From c756f44f67ef9a75f3af1d563aefdddae57dad9b Mon Sep 17 00:00:00 2001 From: Angels-dev Date: Sat, 24 Aug 2024 02:28:06 +0200 Subject: [PATCH] Ajout page 404 + Style dashboard et d'autres trucs --- public/question-square.svg | 6 + src/App.vue | 27 +-- src/assets/main.css | 35 ++-- src/router/index.ts | 18 +- src/utils/discord.ts | 247 ++++++++++++++++++++++++---- src/views/404View.vue | 14 ++ src/views/Discord/DashboardView.vue | 94 ++++++++++- src/views/Discord/LogoutView.vue | 19 +++ src/views/DiscordView.vue | 24 +-- src/views/Index/AboutView.vue | 2 +- 10 files changed, 406 insertions(+), 80 deletions(-) create mode 100644 public/question-square.svg create mode 100644 src/views/404View.vue create mode 100644 src/views/Discord/LogoutView.vue diff --git a/public/question-square.svg b/public/question-square.svg new file mode 100644 index 0000000..7dc5be0 --- /dev/null +++ b/public/question-square.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/App.vue b/src/App.vue index 401d55e..554d5db 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,19 +1,30 @@ @@ -27,7 +38,7 @@ onMounted(async () => { Index

|

Discord - + @@ -66,10 +77,6 @@ nav * { margin-left: 20px; } -nav img { - border-radius: 20%; -} - h1 { text-align: center; left: 0; diff --git a/src/assets/main.css b/src/assets/main.css index 6050edf..0a993de 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -5,8 +5,8 @@ /* max-width: 1280px; */ /* margin: 0 auto; */ /* padding: 2rem;*/ - height: inherit; - width: inherit; + /* height: inherit; */ + /* width: inherit; */ font-weight: normal; } @@ -26,14 +26,24 @@ a, @media (min-width: 1024px) { body { - display: flex; + /* display: flex; */ place-items: center; } #app { - /* display: grid; */ + display: grid; /* grid-template-columns: 1fr 1fr; */ - padding: 0 2rem; + height: 100vh; + width: 90vw; + } +} + +@media screen and (max-height: 450px) { + .sidenav { + padding-top: 15px; + } + .sidenav a { + font-size: 18px; } } @@ -62,21 +72,20 @@ a, color: #f1f1f1; } +/* PAGE CONTENT */ .main { margin-top: 60px; /* 60px is the height of the header navbar */ height: calc(100% - 60px); margin-left: 200px; /* 200px is the width of the header vl position (or sidebar) */ width: calc(100% - 200px); - /* padding: 0px 10px; */ + padding: 2rem 2rem; + display: grid; + align-content: center; + align-items: center; } -@media screen and (max-height: 450px) { - .sidenav { - padding-top: 15px; - } - .sidenav a { - font-size: 18px; - } +.rounded { + border-radius: 20%; } /* ROUTE HIGHLIGHT */ diff --git a/src/router/index.ts b/src/router/index.ts index 4795fc8..a37a4d3 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -15,7 +15,7 @@ const router = createRouter({ component: () => import('../views/Index/HomeView.vue') }, { - path: '/about', + path: 'about', name: 'about', component: () => import('../views/Index/AboutView.vue') } @@ -25,7 +25,7 @@ const router = createRouter({ path: '/discord', name: 'discord', component: () => import('../views/DiscordView.vue'), - meta: { title: 'MainFrame | Discord', discordAuth: true }, + meta: { title: 'MainFrame | Discord', discordAuth: false }, children: [ { path: '', @@ -33,11 +33,23 @@ const router = createRouter({ component: () => import('../views/Discord/DashboardView.vue') }, { - path: '/config', + path: 'config', name: 'config', component: () => import('../views/Discord/ConfigView.vue') + }, + { + path: 'logout', + name: 'logout', + component: () => import('../views/Discord/LogoutView.vue'), + meta: { discordAuth: false } } ] + }, + { + path: '/:pathMatch(.*)*', + name: '404', + component: () => import('../views/404View.vue'), + meta: { title: 'MainFrame | 404' }, } ] }) diff --git a/src/utils/discord.ts b/src/utils/discord.ts index 9386b61..1367656 100644 --- a/src/utils/discord.ts +++ b/src/utils/discord.ts @@ -1,41 +1,23 @@ import axios from 'axios' -export interface User { - id: string - username: string - discriminator: string - global_name?: string - avatar?: string - bot?: boolean - system?: boolean - mfa_enabled?: boolean - banner?: string - accent_color?: number - locale?: string - verified?: boolean - email?: string - flags?: number - premium_type?: number - public_flags?: number - avatar_decoration_data?: { - sku_id: number - asset: string - } -} - // Fonction pour rediriger vers Discord pour l'authentification export function login() { window.location.href = import.meta.env.VITE_BACKEND_URL + '/discord/auth/redirect'; } // Fonction pour se déconnecter -export function logout(user_value: User | null) { - user_value = null - return user_value - // Effectue une requête à ton API pour déconnecter l'utilisateur, supprimer la session, etc. - // Ou simplement rediriger vers une page d'accueil sans session +export async function logout() { + try { + console.log('1111') + const response = await axios.get(import.meta.env.VITE_BACKEND_URL + '/discord/auth/logout', { withCredentials: true }) + console.log('1112') + console.log(response.data) + console.log('1113') + window.location.href = '/discord/logout'; + } catch (err) { return null } } +// Fonction pour récupérer l'état des bots export async function checkBots() { try { const response = await axios.get(import.meta.env.VITE_BACKEND_URL + '/discord/bots', { withCredentials: true }) @@ -43,6 +25,7 @@ export async function checkBots() { } catch (err) { return null } } +// Fonction pour récupérer les informations de l'utilisateur export async function checkUser() { try { const response = await axios.get(import.meta.env.VITE_BACKEND_URL + '/discord/user', { withCredentials: true }) @@ -50,9 +33,217 @@ export async function checkUser() { } catch (err) { return null } } +// Fonction pour récupérer les guilds de l'utilisateur export async function checkUserGuilds() { try { const response = await axios.get(import.meta.env.VITE_BACKEND_URL + '/discord/user/guilds', { withCredentials: true }) return response.data } catch (err) { return null } +} + +// Types de données Discord +export type snowflake = string // A unique identifier for an object within Discord +export type ISO8601 = string // Date and hour timestamp "2017-07-11T17:27:07.299000+00:00" + +export interface User { + id: snowflake // the user's id + username: string // the user's username, not unique across the platform + discriminator: string // the user's Discord-tag + global_name?: string // the user's display name, if it is set. For bots, this is the application name + avatar?: string // the user's avatar hash + bot?: boolean // whether the user belongs to an OAuth2 application + system?: boolean // whether the user is an Official Discord System user (part of the urgent message system) + mfa_enabled?: boolean // whether the user has two factor enabled on their account + banner?: string // the user's banner hash + accent_color?: number // the user's banner color encoded as an integer representation of hexadecimal color code + locale?: string // the user's chosen language option + verified?: boolean // whether the email on this account has been verified + email?: string // the user's email + flags?: number // the flags on a user's account + premium_type?: number // the type of Nitro subscription on a user's account + public_flags?: number // the public flags on a user's account + avatar_decoration_data?: AvatarDecoration // data for the user's avatar decoration +} +export interface AvatarDecoration { + asset: string // the avatar decoration hash + sku_id: snowflake // id of the avatar decoration's SKU +} +export interface Guild { + id: snowflake // guild id + name: string // guild name (2-100 characters, excluding trailing and leading whitespace) + icon?: string // icon hash + icon_hash?: string // icon hash, returned when in the template object + splash?: string // splash hash + discovery_splash?: string // discovery splash hash; only present for guilds with the "DISCOVERABLE" feature + owner?: boolean // true if the user is the owner of the guild + owner_id: snowflake // id of owner + permissions?: string // total permissions for the user in the guild (excludes overwrites and implicit permissions) + region?: string // voice region id for the guild (deprecated) + afk_channel_id?: snowflake // id of afk channel + afk_timeout: number // afk timeout in seconds + widget_enabled?: boolean // true if the server widget is enabled + widget_channel_id?: snowflake // the channel id that the widget will generate an invite to, or null if set to no invite + verification_level: number // verification level required for the guild + default_message_notifications: number // default message notifications level + explicit_content_filter: number // explicit content filter level + roles: Role[] // roles in the guild + emojis: Emoji[] // custom guild emojis + features: string[] // enabled guild features + mfa_level: number // required MFA level for the guild + application_id?: snowflake // application id of the guild creator if it is bot-created + system_channel_id?: snowflake // the id of the channel where guild notices such as welcome messages and boost events are posted + system_channel_flags: number // system channel flags + rules_channel_id?: snowflake // the id of the channel where Community guilds can display rules and/or guidelines + max_presences?: number // the maximum number of presences for the guild (null is always returned, apart from the largest of guilds) + max_members?: number // the maximum number of members for the guild + vanity_url_code?: string // the vanity url code for the guild + description?: string // the description of a guild + banner?: string // banner hash + premium_tier: number // premium tier (Server Boost level) + premium_subscription_count?: number // the number of boosts this guild currently has + preferred_locale: string // the preferred locale of a Community guild; used in server discovery and notices from Discord, and sent in interactions; defaults to "en-US" + public_updates_channel_id?: snowflake // the id of the channel where admins and moderators of Community guilds receive notices from Discord + max_video_channel_users?: number // the maximum amount of users in a video channel + max_stage_video_channel_users?: number // the maximum amount of users in a stage video channel + approximate_member_count?: number // approximate number of members in this guild, returned from the GET /guilds/ and /users/@me/guilds endpoints when with_counts is true + approximate_presence_count?: number // approximate number of non-offline members in this guild, returned from the GET /guilds/ and /users/@me/guilds endpoints when with_counts is true + welcome_screen?: WelcomeScreen // the welcome screen of a Community guild, shown to new members, returned in an Invite's guild object + nsfw_level?: number // guild NSFW level + stickers?: Sticker[] // custom guild stickers + premium_progress_bar_enabled: boolean // whether the guild has the boost progress bar enabled + safety_alerts_channel_id?: snowflake // the id of the channel where admins and moderators of Community guilds receive safety alerts from Discord +} +export interface GuildMember { + user?: User // the user this guild member represents + nick?: string // this user's guild nickname + avatar?: string // the member's guild avatar hash + roles: snowflake[] // array of role object ids + joined_at: ISO8601 // when the user joined the guild + premium_since?: ISO8601 // when the user started boosting the guild + deaf: boolean // whether the user is deafened in voice channels + mute: boolean // whether the user is muted in voice channels + flags: number // guild member flags represented as a bit set, defaults to 0 + pending?: boolean // whether the user has not yet passed the guild's Membership Screening requirements + permissions?: string // total permissions of the member in the channel, including overwrites, returned when in the interaction object + communication_disabled_until?: ISO8601 // when the user's timeout will expire and the user will be able to communicate in the guild again, null or a time in the past if the user is not timed out + avatar_decoration_data?: AvatarDecoration // data for the member's guild avatar decoration +} +export interface Role { + id: snowflake // role id + name: string // role name + color: number // integer representation of hexadecimal color code + hoist: boolean // if this role is pinned in the user listing + icon?: string // role icon hash + unicode_emoji?: string // role unicode emoji + position: number // position of this role (roles with the same position are sorted by id) + permissions: string // permission bit set + managed: boolean // whether this role is managed by an integration + mentionable: boolean // whether this role is mentionable + tags?: RoleTags // the tags this role has + flags: number // role flags combined as a bitfield +} +export interface RoleTags { + bot_id?: snowflake // the id of the bot this role belongs to + integration_id?: snowflake // the id of the integration this role belongs to + premium_subscriber?: null // whether this is the guild's Booster role + subscription_listing_id?: snowflake // the id of this role's subscription sku and listing + available_for_purchase?: null // whether this role is available for purchase + guild_connections?: null // whether this role is a guild's linked role +} +export interface Emoji { + id?: snowflake // emoji id + name?: string // (can be null only in reaction emoji objects) // emoji name + roles?: snowflake[] // roles allowed to use this emoji + user?: User // user that created this emoji + require_colons?: boolean // whether this emoji must be wrapped in colons + managed?: boolean // whether this emoji is managed + animated?: boolean // whether this emoji is animated + available?: boolean // whether this emoji can be used, may be false due to loss of Server Boosts +} +export interface Sticker { + id: snowflake // id of the sticker + pack_id?: snowflake // for standard stickers, id of the pack the sticker is from + name: string // name of the sticker + description?: string // description of the sticker + tags: string // autocomplete/suggestion tags for the sticker (max 200 characters) + asset?: string // Deprecated previously the sticker asset hash, now an empty string + type: number // type of sticker + format_type: number // type of sticker format + available?: boolean // whether this guild sticker can be used, may be false due to loss of Server Boosts + guild_id?: snowflake // id of the guild that owns this sticker + user?: User // the user that uploaded the guild sticker + sort_value?: number // the standard sticker's sort order within its pack +} +export interface WelcomeScreen { + description?: string // the server description shown in the welcome screen + welcome_channels: WelcomeChannel[] // the channels shown in the welcome screen, up to 5 +} +export interface WelcomeChannel { + channel_id: snowflake // the channel's id + description: string // the description shown for the channel + emoji_id?: snowflake // the emoji id, if the emoji is custom + emoji_name?: string // the emoji name if custom, the unicode character if standard, or null if no emoji is set +} +export interface Channel { + id: snowflake // the id of this channel + type: number // the type of channel + guild_id?: snowflake // the id of the guild (may be missing for some channel objects received over gateway guild dispatches) + position?: number // sorting position of the channel (channels with the same position are sorted by id) + permission_overwrites?: [] // array of overwrite objects // explicit permission overwrites for members and roles + name?: string // the name of the channel (1-100 characters) + topic?: string // the channel topic (0-4096 characters for GUILD_FORUM and GUILD_MEDIA channels, 0-1024 characters for all others) + nsfw?: boolean // whether the channel is nsfw + last_message_id?: snowflake // the id of the last message sent in this channel (or thread for GUILD_FORUM or GUILD_MEDIA channels) (may not point to an existing or valid message or thread) + bitrate?: number // the bitrate (in bits) of the voice channel + user_limit?: number // the user limit of the voice channel + rate_limit_per_user?: number // amount of seconds a user has to wait before sending another message (0-21600); bots, as well as users with the permission manage_messages or manage_channel, are unaffected + recipients?: User[] // the recipients of the DM + icon?: string // icon hash of the group DM + owner_id?: snowflake // id of the creator of the group DM or thread + application_id?: snowflake // application id of the group DM creator if it is bot-created + managed?: boolean // for group DM channels: whether the channel is managed by an application via the gdm.join OAuth2 scope + parent_id?: snowflake // for guild channels: id of the parent category for a channel (each parent category can contain up to 50 channels), for threads: id of the text channel this thread was created + last_pin_timestamp?: ISO8601 // when the last pinned message was pinned. This may be null in events such as GUILD_CREATE when a message is not pinned. + rtc_region?: string // voice region id for the voice channel, automatic when set to null + video_quality_mode?: number // the camera video quality mode of the voice channel, 1 when not present + message_count?: number // number of messages (not including the initial message or deleted messages) in a thread. + member_count?: number // an approximate count of users in a thread, stops counting at 50 + thread_metadata?: ThreadMetadata // thread-specific fields not needed by other channels + member?: ThreadMember // thread member object for the current user, if they have joined the thread, only included on certain API endpoints + default_auto_archive_duration?: number // default duration, copied onto newly created threads, in minutes, threads will stop showing in the channel list after the specified period of inactivity, can be set to: 60, 1440, 4320, 10080 + permissions?: string // computed permissions for the invoking user in the channel, including overwrites, only included when part of the resolved data received on a slash command interaction. This does not include implicit permissions, which may need to be checked separately + flags?: number // channel flags combined as a bitfield + total_message_sent?: number // number of messages ever sent in a thread, it's similar to message_count on message creation, but will not decrement the number when a message is deleted + available_tags?: Tag[] // the set of tags that can be used in a GUILD_FORUM or a GUILD_MEDIA channel + applied_tags?: snowflake[] // the IDs of the set of tags that have been applied to a thread in a GUILD_FORUM or a GUILD_MEDIA channel + default_reaction_emoji?: DefaultReaction // the emoji to show in the add reaction button on a thread in a GUILD_FORUM or a GUILD_MEDIA channel + default_thread_rate_limit_per_user?: number // the initial rate_limit_per_user to set on newly created threads in a channel. this field is copied to the thread at creation time and does not live update. + default_sort_order?: number // the default sort order type used to order posts in GUILD_FORUM and GUILD_MEDIA channels. Defaults to null, which indicates a preferred sort order hasn't been set by a channel admin + default_forum_layout?: number // the default forum layout view used to display posts in GUILD_FORUM channels. Defaults to 0, which indicates a layout view has not been set by a channel admin +} +export interface Tag { + id: snowflake // the id of the tag + name: string // the name of the tag (0-20 characters) + moderated: boolean // whether this tag can only be added to or removed from threads by a member with the MANAGE_THREADS permission + emoji_id?: snowflake // the id of a guild's custom emoji + emoji_name?: string // the unicode character of the emoji +} +export interface ThreadMetadata { + archived: boolean // whether the thread is archived + auto_archive_duration: number // the thread will stop showing in the channel list after auto_archive_duration minutes of inactivity, can be set to: 60, 1440, 4320, 10080 + archive_timestamp: ISO8601 // timestamp when the thread's archive status was last changed, used for calculating recent activity + locked: boolean // whether the thread is locked; when a thread is locked, only users with MANAGE_THREADS can unarchive it + invitable?: boolean // whether non-moderators can add other non-moderators to a thread; only available on private threads + create_timestamp?: ISO8601 // timestamp when the thread was created; only populated for threads created after 2022-01-09 +} +export interface ThreadMember { + id?: snowflake // ID of the thread + user_id?: snowflake // ID of the user + join_timestamp: ISO8601 // Time the user last joined the thread + flags: number // Any user-thread settings, currently only used for notifications + member?: GuildMember // Additional information about the user +} +export interface DefaultReaction { + emoji_id?: snowflake // the id of a guild's custom emoji + emoji_name?: string // the unicode character of the emoji } \ No newline at end of file diff --git a/src/views/404View.vue b/src/views/404View.vue new file mode 100644 index 0000000..a8a4baf --- /dev/null +++ b/src/views/404View.vue @@ -0,0 +1,14 @@ + + + \ No newline at end of file diff --git a/src/views/Discord/DashboardView.vue b/src/views/Discord/DashboardView.vue index eff111c..134b72e 100644 --- a/src/views/Discord/DashboardView.vue +++ b/src/views/Discord/DashboardView.vue @@ -1,16 +1,35 @@ \ No newline at end of file + + + \ No newline at end of file diff --git a/src/views/Discord/LogoutView.vue b/src/views/Discord/LogoutView.vue new file mode 100644 index 0000000..8428b3d --- /dev/null +++ b/src/views/Discord/LogoutView.vue @@ -0,0 +1,19 @@ + + + \ No newline at end of file diff --git a/src/views/DiscordView.vue b/src/views/DiscordView.vue index 3494762..ad0daeb 100644 --- a/src/views/DiscordView.vue +++ b/src/views/DiscordView.vue @@ -1,38 +1,27 @@