zachary/Mainframe-UI
1
0
Fork 0
Code Issues 2 Pull Requests 5 Actions Packages Projects Releases Wiki Activity

Ajout page 404 + Style dashboard et d'autres trucs

Browse Source
This commit is contained in:
Angels-dev
2024-08-24 02:28:06 +02:00
parent 9a6b6816f8
commit c756f44f67
10 changed files with 406 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/question-square.svg Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 11.816406 42.492188 L 36.203125 42.492188 C 40.402344 42.492188 42.492188 40.402344 42.492188 36.265625 L 42.492188 11.734375 C 42.492188 7.597656 40.402344 5.507812 36.203125 5.507812 L 11.816406 5.507812 C 7.636719 5.507812 5.507812 7.578125 5.507812 11.734375 L 5.507812 36.265625 C 5.507812 40.421875 7.636719 42.492188 11.816406 42.492188 Z M 11.875 39.257812 C 9.867188 39.257812 8.742188 38.191406 8.742188 36.105469 L 8.742188 11.894531 C 8.742188 9.808594 9.867188 8.742188 11.875 8.742188 L 36.144531 8.742188 C 38.132812 8.742188 39.257812 9.808594 39.257812 11.894531 L 39.257812 36.105469 C 39.257812 38.191406 38.132812 39.257812 36.144531 39.257812 Z M 23.609375 28.128906 C 24.632812 28.128906 25.234375 27.484375 25.234375 26.703125 L 25.234375 26.460938 C 25.234375 25.335938 25.898438 24.613281 27.285156 23.6875 C 29.234375 22.402344 30.621094 21.238281 30.621094 18.828125 C 30.621094 15.492188 27.644531 13.683594 24.230469 13.683594 C 20.796875 13.683594 18.527344 15.332031 17.964844 17.179688 C 17.863281 17.5 17.800781 17.84375 17.800781 18.164062 C 17.800781 19.066406 18.503906 19.550781 19.167969 19.550781 C 20.3125 19.550781 20.496094 18.949219 21.136719 18.183594 C 21.800781 17.078125 22.765625 16.417969 24.109375 16.417969 C 25.9375 16.417969 27.125 17.460938 27.125 18.988281 C 27.125 20.355469 26.28125 21.015625 24.53125 22.242188 C 23.085938 23.246094 22 24.3125 22 26.28125 L 22 26.542969 C 22 27.585938 22.582031 28.128906 23.609375 28.128906 Z M 23.566406 34.113281 C 24.734375 34.113281 25.738281 33.191406 25.738281 32.027344 C 25.738281 30.859375 24.753906 29.9375 23.566406 29.9375 C 22.382812 29.9375 21.398438 30.878906 21.398438 32.027344 C 21.398438 33.171875 22.402344 34.113281 23.566406 34.113281 Z M 23.566406 34.113281 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

27
src/App.vue
View File

@@ -1,19 +1,30 @@
<script setup lang="ts">
import { RouterView, RouterLink } from 'vue-router'
import { ref, provide, onMounted } from 'vue'
import { checkUser } from '@/utils/discord'
import { checkUser, checkBots, checkUserGuilds } from '@/utils/discord'
import type { Ref } from 'vue'
import type { User } from '@/utils/discord'
import type { User, Guild } from '@/utils/discord'
// État de l'utilisateur et de son avatar
// État de l'utilisateur, des bots et de leur avatar
const user: Ref<User | null> = ref(null)
const avatar = ref('')
const bots: Ref<User[] | null> = ref([])
const guilds: Ref<Guild[] | null> = ref([])
const avatar = ref('/question-square.svg')
const ready = ref(false)
provide('user', user) // Fournit l'utilisateur aux composants enfants
provide('bots', bots) // Fournit les bots aux composants enfants
provide('guilds', guilds) // Fournit les guilds aux composants enfants
provide('ready', ready) // Fournit l'état de préparation aux composants enfants
onMounted(async () => {
user.value = await checkUser() // Vérifie l'authentification lors du montage du composant
avatar.value = user.value ? `https://cdn.discordapp.com/avatars/${user.value.id}/${user.value.avatar}?size=48` : ''
if (user.value) {
avatar.value = `https://cdn.discordapp.com/avatars/${user.value.id}/${user.value.avatar}?size=48`
bots.value = await checkBots() // Vérifie les bots
guilds.value = await checkUserGuilds() // Vérifie les guilds de l'utilisateur
ready.value = true
}
})
</script>
@@ -27,7 +38,7 @@ onMounted(async () => {
<router-link to="/">Index</router-link>
<p>|</p>
<router-link to="/discord">Discord</router-link>
<img v-if="user" :src=avatar>
<img class="rounded" :src=avatar>
</nav>
</header>
@@ -66,10 +77,6 @@ nav * {
margin-left: 20px;
}
nav img {
border-radius: 20%;
}
h1 {
text-align: center;
left: 0;

35
src/assets/main.css
View File

@@ -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 */

18
src/router/index.ts
View File

@@ -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' },
}
]
})

247
src/utils/discord.ts
View File

@@ -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/<id> 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/<id> 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
}

14
src/views/404View.vue Normal file
View File

@@ -0,0 +1,14 @@
<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>
<template>
<div class="main">
<h1>Oula ! (Erreur 404)</h1>
<h3>
Je sais pas ce que t'as fais mais tu es tombé sur une page inexistante.
<br>
Tu peux retourner à l'accueil en cliquant <router-link to="/">ici</router-link> ou sur les boutons en haut !.
</h3>
</div>
</template>

94
src/views/Discord/DashboardView.vue
View File

@@ -1,16 +1,35 @@
<script setup lang="ts">
import { inject } from 'vue'
import { ref, inject } from 'vue'
import type { Ref } from 'vue'
import type { User } from '@/utils/discord'
import type { User, Guild } from '@/utils/discord'
// État de l'utilisateur et des bots
const user: Ref<User | null> | undefined = inject('user')
const bots: Ref<User[] | null> | undefined = inject('bots')
const guilds: Ref<Guild[] | null> | undefined = inject('guilds')
console.log(guilds)
function avatar(bot: User) { return bot?`https://cdn.discordapp.com/avatars/${bot.id}/${bot.avatar}?size=256` : '' }
const bot1 = ref({} as User)
const bot2 = ref({} as User)
const bot3 = ref({} as User)
const bot4 = ref({} as User)
const bot5 = ref({} as User)
if (bots?.value) {
bot1.value = bots.value[0]
bot2.value = bots.value[1]
bot3.value = bots.value[2]
bot4.value = bots.value[3]
bot5.value = bots.value[4]
}
</script>
<template>
<div class="main">
<div class="title">
<h1>Test Dashboard Discord</h1>
<h1>Liste de mes bots</h1>
<div v-if="user">
<p>Vous êtes connecté en tant que {{ user.global_name }}.</p>
<p>Vous avez l'ID {{ user.id }}.</p>
@@ -18,11 +37,70 @@ const bots: Ref<User[] | null> | undefined = inject('bots')
<p v-else>Vous n'êtes pas connecté.</p>
</div>
<div class="bots">
<h2>Bots</h2>
<div v-for="bot in bots" :key="bot.id">
<p>{{ bot.username }}</p>
<p>{{ bot.id }}</p>
<div>
<p class="bot-title">{{ bot2.username }}</p>
<img class="rounded" :src="avatar(bot2)">
<p class="bot-desc">Petit chouchou du tamiseur</p>
</div>
<div>
<p style="font-size: 26px">{{ bot1.username }}</p>
<img style="max-width: 80%" class="rounded" :src="avatar(bot1)">
<p style="font-size: 22px">Le big boss</p>
</div>
<div>
<p class="bot-title">{{ bot3.username }}</p>
<img class="rounded" :src="avatar(bot3)">
<p class="bot-desc">L'autre là, qui le connait ?</p>
</div>
</div>
<div class="bots">
<div>
<p class="bot-title">{{ bot4.username }}</p>
<img class="rounded" :src="avatar(bot4)">
<p class="bot-desc">(Réservé pour la streameuse Jujul / Laytho)</p>
</div>
<div>
<p class="bot-title">{{ bot5.username }}</p>
<img class="rounded" :src="avatar(bot5)">
<p class="bot-desc">(Réservé pour les débug temporaires)</p>
</div>
</div>
</div>
</template>
</template>
<style scoped>
.main {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: center;
align-content: stretch;
justify-content: center;
}
.title {
flex: 0.6;
margin-right: auto;
}
.bots {
flex: 1.2;
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
text-align: center;
gap: 30px;
div {
flex: 1 1 0;
}
}
.bot-title {
font-size: 20px;
}
.bot-desc {
font-size: 16px;
}
img {
max-width: 60%;
height: auto;
}
</style>

19
src/views/Discord/LogoutView.vue Normal file
View File

@@ -0,0 +1,19 @@
<script setup lang="ts">
import { inject } from 'vue'
import type { Ref } from 'vue'
import type { User, Guild } from '@/utils/discord'
// État de l'utilisateur et des bots
const user: Ref<User | null> | undefined = inject('user')
const bots: Ref<User[] | null> | undefined = inject('bots')
const guilds: Ref<Guild[] | null> | undefined = inject('guilds')
if (user) user.value = null
if (bots) bots.value = null
if (guilds) guilds.value = null
</script>
<template>
<div class="main">
<h1>Vous avez été déconnecté !</h1>
</div>
</template>

24
src/views/DiscordView.vue
View File

@@ -1,38 +1,27 @@
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { checkBots, checkUserGuilds, login, logout } from '@/utils/discord'
import { ref, provide, inject, onMounted } from 'vue'
import { login, logout } from '@/utils/discord'
import { inject } from 'vue'
import type { Ref } from 'vue'
import type { User } from '@/utils/discord'
// État de l'utilisateur et des bots
const user: Ref<User | null> | undefined = inject('user')
const bots = ref([])
const guilds = ref([])
provide('bots', bots) // Fournit les bots aux composants enfants
provide('guilds', guilds) // Fournit les guilds aux composants enfants
onMounted(async () => {
if (user) {
bots.value = await checkBots()
guilds.value = await checkUserGuilds()
}
})
const ready: Ref<boolean> | undefined = inject('ready')
</script>
<template>
<div>
<div class="sidenav">
<router-link to="/discord">Dashboard</router-link>
<router-link to="/config">Config</router-link>
<router-link to="/discord/config">Config</router-link>
<button v-if="!user" @click="login">Se connecter</button>
<button v-if="user" @click="logout(user)">Se déconnecter</button>
<button v-if="user" @click="logout">Se déconnecter</button>
</div>
<router-view v-slot="{ Component }">
<transition name="slide-fade" mode="out-in">
<component :is="Component" />
<component v-if="ready" :is="Component" />
</transition>
</router-view>
</div>
@@ -43,4 +32,5 @@ onMounted(async () => {
position: absolute;
bottom: 60px;
}
</style>

2
src/views/Index/AboutView.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="main">
<div style="width: 60%" class="main">
<h1>A propos de moi</h1>
<br>
<h3 style="font-weight: bold;">Bonjour,</h3>