Version 1.0.0 - Initialisation du depot

src/views/Interface.vue

@@ -0,0 +1,95 @@
+<template>
+    <SocketEnvironment>
+        <div class="container">
+                <Box>
+                    <Button @click="router.push('/servers')">Choisir un serveur</Button>
+                    <Button @click="router.push('/terms')">Terms</Button>
+                    <Button @click="router.push('/privacy')">Privacy</Button>
+                    <Button @click="globalStore.toogleTheme()">Changer le thème</Button>
+                    <p>{{ guildId }}</p>
+                </Box>
+                <UserAction/>
+        </div>
+    </SocketEnvironment>
+</template>
+<script setup>
+import Box from '@/components/UI/Box.vue';
+import Button from '@/components/UI/Button.vue';
+import SocketEnvironment from '@/utils/SocketEnvironment.vue';
+import UserAction from '@/components/Features/UserAction.vue';
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useGlobalStore } from '@/stores/globalStore';
+import { useUserStore } from '@/stores/userStore';
+import { IOListener } from '@/utils/IORequest';
+import { onMounted } from 'vue';
+
+const props = defineProps({
+    guildId: {
+        type: String,
+        default: null
+    }
+});
+
+const guildId = props.guildId;
+if (!guildId) {
+    globalStore.setLastGuild(null);
+    router.push('/servers');
+} 
+
+const globalStore = useGlobalStore();
+const userStore = useUserStore();
+const router = useRouter();
+
+watch(() => globalStore.isLoading, (value) => {
+    if(!value) {
+        loadInteface();
+    }
+})
+
+onMounted(() => {
+    if(globalStore.lastGuild && !globalStore.isLoading) {
+        loadInteface();
+    } 
+});
+
+function loadInteface() {
+    console.log("Loading interface")
+    console.log("Guild ID:", guildId);
+    checkGuildAvailability();
+}
+
+function checkGuildAvailability() {
+   if(userStore.userInfo.guilds.filter(guild => guild.id === guildId).length === 0) {
+        globalStore.setLastGuild(null);
+        console.warn("Guild not found, redirecting to servers list.");
+        router.push('/servers');
+    } else {
+        globalStore.setLastGuild(guildId);
+    }
+}
+
+
+
+
+
+</script>
+<style scoped>  
+.container {
+    padding: 20px;
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+}
+
+.container {
+    padding: 20px;;
+    max-width: 800px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 100%;
+}
+</style>

src/views/Login.vue

@@ -0,0 +1,193 @@
+<template>
+    <DefaultSplash width="500px;" gap="30px">
+        <h1>Votre ticket ?</h1>
+        <p>Connexion par Discord (obligatoire)</p>
+        <Button :disabled='!loginReady' @click="handleLogin()"><Icon v-if="loading" spin-pulse icon="fa-solid fa-spinner"/><img src="/discord-logo-white.png"></Button>
+        <div v-if="error || errorServer || callbackError || message" class="error-container">
+            <Error v-if="callbackError">{{ callbackError }}</Error>
+            <Error v-if="error">{{ error }}</Error>
+            <Error v-if="errorServer">{{ errorServer }}</Error>
+            <Info v-if="message">{{ message }}</Info>
+        </div>
+        <div class="footer">
+            <p class="secondtext"><router-link to="/terms">Conditions d'utilisation</router-link> </p>
+            <p class="secondtext"><router-link to="/privacy">Privacy</router-link></p>
+        </div>
+        <p class="second">Session : {{ sessionId }}</p>
+    </DefaultSplash>
+</template>
+
+<script setup>
+import DefaultSplash from '@/components/Layout/DefaultSplash.vue';
+import Button from '@/components/UI/Button.vue';
+import Error from '@/components/UI/Error.vue';
+import Info from '@/components/UI/Info.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useLoginStore } from '@/stores/loginStore';
+import { computed, ref, watch, onMounted } from 'vue';
+import { socket } from '@/socket.js';
+import { useGlobalStore } from '@/stores/globalStore';
+
+
+const loginStore = useLoginStore();
+const globalStore = useGlobalStore();
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+    callbackError: {
+        type: String,
+        default: undefined
+    }
+})
+
+const callbackError = ref(undefined);
+const message = ref(undefined);
+const errorServer = ref(undefined);
+const error = ref(undefined);
+const serverError = ref(true);
+const loading = ref(true);
+const sessionId = computed(() => loginStore.session ? loginStore.session : "Aucune session active");
+const loginReady = computed(() => loginStore.session && discordUrl.value && !serverError.value);
+var discordUrl = ref(null);
+
+if(socket.connected) {
+    socket.disconnect()
+} 
+socket.connect();
+
+if(props.callbackError) {
+    callbackError.value = props.callbackError;  
+}
+if(route.query.error) {
+    callbackError.value = route.query.error;
+}
+
+if(route.query.message) {
+    message.value = route.query.message;
+}
+
+if(!globalStore.lastRoute) {
+    callbackError.value = null;
+    message.value = null;
+    error.value = null;
+    errorServer.value = null;
+}
+
+var errorSessionMsg = "Aucune session n'est active. Le serveur est-il en ligne ?"; 
+
+watch(loginReady, (ready) => {
+    if(ready) {
+        loading.value = false;
+    } else {
+        loading.value = true;
+    }
+});
+
+if(!loginStore.session) {
+    error.value = errorSessionMsg;
+}   
+watch(() => loginStore.session, (session) => {
+  error.value = !session ? errorSessionMsg: undefined;
+});
+
+    fetch("/information.json")
+        .then(response => response.json())
+        .then(data => {
+             discordUrl.value = import.meta.env.DEV ? data.discord.development : data.discord.production;
+   
+        })
+        .catch(e => {
+            console.error("Error fetching Discord URL:", e);
+            error.value = "Une erreur est survenue lors de la récupération de l'URL Discord.";
+            loading.value = false;
+        });
+
+
+function handleLogin() {
+     window.location.href = discordUrl.value;
+}
+
+socket.on("NEW_SESSION", (data) => {
+    console.log("Nouvelle session reçue :", data);
+    loginStore.setSession(data);
+    socket.io.opts.reconnection = false;
+    socket.disconnect();    
+
+});
+
+socket.on("connect", () => {
+    serverError.value = false;
+    if(loginStore.token) {
+        window.location.href = discordUrl.value;
+    }
+    console.log("Login : Socket connected successfully");
+}); 
+
+socket.on("connect_error", (error) => {
+    loading.value = false;
+    errorServer.value = "Erreur de connexion au serveur. Veuillez réessayer plus tard.";
+    error.value = "Erreur de connexion au serveur. Veuillez réessayer plus tard.";
+    serverError.value = true;
+    
+}); 
+
+
+
+</script>
+<style scoped>
+img {
+    width: 80%;
+    height: 100%;
+}
+
+h1 {
+    margin: 0 !important;
+    font-size: 25px;
+
+}
+
+Button {
+  width: 160px;;
+}
+
+p { 
+    max-width: 100vh;
+    margin: 0 !important;
+}
+
+.secondtext {
+    font-size: 12px;
+    color: var(--text-secondary);
+    margin-top: 10px;
+    text-align: justify;
+}
+
+.footer {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    text-align: center;
+    align-items: center;
+}
+
+.error-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    gap: 10px;
+    width: 100%;
+}   
+
+.second {
+    color: var(--text-secondary);
+    font-size: 8px;
+    margin-top: 10px;
+    text-align: center;
+    padding-right: 5px;
+    padding-left: 5px;
+    word-break: break-all;
+}
+
+</style>

src/views/PageError.vue

@@ -0,0 +1,45 @@
+<template>
+    <DefaultSplash width="600px">
+        <div class="error-page">
+            <h1>Erreur ! </h1>
+            <strong><p>On s'est trompé de mesure !</p></strong>
+            <Box no-shadow  level="second" padding="closed">
+                <p>Raison : {{ message }}</p>
+            </Box>
+            
+        </div>
+        <br>
+        <router-link class="no-decoration" to="/">
+            <Button><Icon icon="fa-solid fa-house"/> Revenir au concert</Button>
+        </router-link>
+    </DefaultSplash>
+
+</template>
+<script setup>
+import DefaultSplash from '@/components/Layout/DefaultSplash.vue';
+import Button from '@/components/UI/Button.vue'
+import Box from '@/components/UI/Box.vue';
+import { socket } from '@/socket';
+
+defineProps({
+    message: {
+        type: String,
+        default: "Une erreur est survenue"
+    }
+})
+
+if(socket.connected) {
+    socket.disconnect();
+}   
+
+
+</script>
+<style scoped>
+
+.error-page {
+    max-width: 600px;
+    width: 100%;
+    text-align: center;;
+}
+
+</style>

src/views/Privacy.vue

@@ -0,0 +1,119 @@
+<script setup>
+import ReturnHomeButton from '@/components/Actions/ReturnHomeButton.vue';
+import DefaultSplash from '@/components/Layout/DefaultSplash.vue';
+import Box from '@/components/UI/Box.vue';
+import Button from '@/components/UI/Button.vue';
+</script>
+
+<template>
+    <DefaultSplash>
+        <ReturnHomeButton/>
+        <h1>Privacy</h1>
+        <Box no-shadow  level="second" padding="closed">
+            <div class="terms-content">
+                <p><strong>Date d'entrée en vigueur :</strong> 22 juillet 2025</p>
+                <p><strong>Responsable du traitement des données :</strong> Raphix (<code>raphixscrap</code> sur Discord)</p>
+
+                <h2>1. Introduction</h2>
+                <p>Subsonics (le "bot" et l’"application") est un bot Discord et une application Web proposant des fonctionnalités audio pour enrichir l’expérience de vos serveurs. </p>
+                <p>Cette politique de confidentialité décrit quelles données sont collectées, comment elles sont utilisées, et quels sont vos droits.</p>
+                <p>En utilisant Subsonics ou son interface Web, vous acceptez les conditions de cette politique de confidentialité.</p>
+
+                <h2>2. Données collectées</h2>
+                <p><strong>Données collectées automatiquement (pour le bon fonctionnement) :</strong></p>
+                <ul>
+                    <li>Identifiant utilisateur Discord (User ID)</li>
+                    <li>Identifiant de serveur (Guild ID)</li>
+                    <li>Identifiant de salon (Channel ID)</li>
+                    <li>Commandes utilisées et journaux d’exécution</li>
+                    <li>Données de lecture audio (titres de morceaux, horodatage, etc.)</li>
+                </ul>
+
+                <p><strong>Concernant l’application Web :</strong></p>
+                <ul>
+                    <li>Adresse IP (logs de sécurité)</li>
+                    <li>Informations du navigateur (User-Agent)</li>
+                    <li>Cookies (préférences, sécurité, analytics si activé)</li>
+                </ul>
+
+                <p>Nous <strong>ne collectons pas</strong> vos messages privés, vos conversations vocales ni aucune donnée personnelle sensible.</p>
+
+                <h2>3. Utilisation des données</h2>
+                <p>Les données collectées sont utilisées uniquement pour :</p>
+                <ul>
+                    <li>Assurer le bon fonctionnement du bot</li>
+                    <li>Corriger les bugs et améliorer l’expérience utilisateur</li>
+                    <li>Analyser l’utilisation de certaines commandes (statistiques anonymes)</li>
+                    <li>Empêcher les abus et sécuriser l’infrastructure</li>
+                </ul>
+                <p>Nous ne revendons ni ne partageons vos données avec des tiers.</p>
+
+                <h2>4. Conservation des données</h2>
+                <ul>
+                    <li>Les données des utilisateurs et serveurs sont conservées <strong>tant que le bot est présent sur le serveur et tant qu'une demande de supression n'a été expressément demandé</strong>.</li>
+                </ul>
+
+                <h2>5. Vos droits</h2>
+                <p>Conformément au RGPD, vous avez le droit de :</p>
+                <ul>
+                    <li>Demander l’accès à vos données</li>
+                    <li>Demander la suppression de vos données</li>
+                    <li>Demander la rectification d’informations incorrectes</li>
+                    <li>Retirer votre consentement à tout moment (en retirant le bot de votre serveur ou via une demande)</li>
+                </ul>
+
+                <h2>6. Suppression des données / Demandes</h2>
+                <p>Pour toute demande liée à vos données personnelles, vous pouvez contacter le développeur :</p>
+                <ul>
+                    <li><strong>Nom :</strong> Raphix</li>
+                    <li><strong>Contact Discord :</strong> <code>raphixscrap</code></li>
+                    <li><strong>Informations à fournir :</strong> votre identifiant Discord (User ID) ou l’ID du serveur concerné</li>
+                </ul>
+
+                <h2>7. Sécurité</h2>
+                <p>Nous mettons en œuvre des mesures techniques et organisationnelles raisonnables pour protéger vos données, incluant :</p>
+                <ul>
+                    <li>Accès limité aux données</li>
+                    <li>Stockage sécurisé</li>
+                    <li>Mises à jour régulières des dépendances</li>
+                    <li>Surveillance et alertes en cas d’anomalie</li>
+                </ul>
+                <p>Malgré cela, aucun système n’est totalement invulnérable et nous ne pouvons garantir une sécurité absolue.</p>
+
+                <h2>8. Services tiers</h2>
+                <p>Subsonics utilise l’API Discord ainsi que des services d’hébergement. Ces plateformes ont leurs propres politiques de confidentialité :</p>
+                <p><a href="https://discord.com/privacy" target="_blank">Politique de confidentialité de Discord</a></p>
+
+                <h2>9. Modifications de cette politique</h2>
+                <p>Cette politique peut être mise à jour à tout moment. N'hésitez pas à consulter régulièrement cette page pour rester informé des changements.</p>
+
+                <h2>10. Contact</h2>
+                <p>Pour toute question, suggestion ou réclamation :</p>
+                <ul>
+                    <li><strong>Développeur :</strong> Raphix</li>
+                    <li><strong>Contact Discord :</strong> <code>raphixscrap</code></li>
+                </ul>
+            </div>
+       
+        </Box>
+        <br/>
+        <router-link class="no-decoration" to="/">
+            <Button><Icon icon="fa-solid fa-house"/> Revenir au concert</Button>
+        </router-link>
+        <!-- Add more content here as needed -->
+    </DefaultSplash>
+</template>
+<style scoped>
+    .terms-content {
+             max-width: 800px;
+        margin: 0 auto;
+        padding-right: 10px;
+        padding-left: 10px;
+        font-size: 12px;
+        line-height: 1.6;
+        max-height: 35vh;
+        overflow-y: auto;
+        color: var(--text-secondary);
+         text-align: justify;
+    }
+</style>

src/views/Servers.vue

@@ -0,0 +1,117 @@
+<script setup>
+import UserAction from '@/components/Features/UserAction.vue';
+import Splash from '@/components/Layout/Splash.vue';
+import Box from '@/components/UI/Box.vue';
+import SocketEnvironment from "../utils/SocketEnvironment.vue"
+import { useRouter } from 'vue-router';
+import { useGlobalStore } from '@/stores/globalStore';
+import { useUserStore } from '@/stores/userStore';
+import Button from '@/components/UI/Button.vue';
+import ReturnHomeButton from '@/components/Actions/ReturnHomeButton.vue';
+import { ref } from 'vue';
+import ServerListItem from '@/components/Features/ServerListItem.vue';
+
+const globalStore = useGlobalStore();
+const userStore = useUserStore();
+console.log("Last route:", globalStore.lastRoute);    
+const router = useRouter();
+const hasLink = ref(false);
+const botInviteUrl = ref("");
+
+console.log(globalStore.lastGuild);
+
+fetch('/information.json')
+    .then(response => response.json())
+    .then(data => {
+        botInviteUrl.value = import.meta.env.DEV ? data.bot_invite.development : data.bot_invite.production;
+        hasLink.value = true
+    })
+    .catch(error => {
+        console.error("Error fetching bot invite URL:", error);
+        hasLink.value = false;
+    });
+
+function inviteSubsonics() {
+    
+    window.open(botInviteUrl.value, '_blank');
+}
+
+</script>
+
+<template>
+    <SocketEnvironment>
+        <Splash>
+            <ReturnHomeButton v-if="globalStore.lastGuild"/>
+            <div class="servers-div">
+            <Box box-class="server-box" padding="closed">
+                <div class="servers-content">
+                    <div class="servers-container">
+                        <div class="servers-list">
+                        <ServerListItem v-for="server in userStore.userInfo.guilds" :key="server.id" :server="server" />
+                        
+                        </div>
+                    </div>
+                    
+                    <Button :disabled="!hasLink" @click="inviteSubsonics()"><Icon icon="fa-solid fa-user-plus"/>Inviter Subsonics</Button>
+                </div>
+            </Box>
+            <UserAction/>
+            </div>
+        </Splash>
+    </SocketEnvironment>
+    
+</template>
+<style scoped>
+.servers-div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 90%;
+    max-width: 800px;;
+    margin-left: 20px;
+    margin-right: 20px;
+}
+
+.servers-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+
+}
+
+.server-box {
+    width: 100%;
+    max-width: 800px;
+
+}
+
+.servers-list {
+    display: flex;
+    flex-direction: column;
+    gap:10px;
+    overflow-y: auto;
+    width: 100%;
+
+
+    
+}
+
+.servers-container {
+    overflow-y: auto;
+    flex: 1;
+    padding-right: 5px;
+    padding-left: 5px;
+    width: 100%;
+    position: relative;
+    max-height: 45vh;
+}
+
+h1 {
+    font-size: 20px;;
+}
+
+</style>

src/views/Terms.vue

@@ -0,0 +1,43 @@
+<script setup>
+import ReturnHomeButton from '@/components/Actions/ReturnHomeButton.vue';
+import DefaultSplash from '@/components/Layout/DefaultSplash.vue';
+import Box from '@/components/UI/Box.vue';
+import Button from '@/components/UI/Button.vue';
+</script>
+
+<template>
+    <DefaultSplash>
+        <ReturnHomeButton/>
+        <h1>Conditions d'utilisation</h1>
+        <Box no-shadow level="second" padding="closed">
+            <div class="terms-content">
+                <p>En utilisant ce site, vous consentez à l'utilisation de vos données fournis par Discord <Icon icon="fa-solid fa-copyright"/> afin d'assurer le bon fonctionnement de la plateforme. Vous avez la possibilité de demander la suppression de vos données à tout moment en contactant Raphix (raphixscrap). Tout acte intentionnel de dégradation du bot entraînera un bannissement du site.</p>
+                <p>Ce bot est destiné à un usage privé exclusivement et n'est pas conçu pour être utilisé par le grand public.</p>
+                <p>Toutes les musiques disponibles sur ce site sont hébergées sur les plateformes suivantes : Youtube, Soundcloud, Spotify.</p>
+                <p>En utilisant Subsonics, vous bénéficiez du droit d'accès au service et de l'écoute du contenu. Cependant, veuillez noter que Raphix n'est pas tenu de fournir la provenance ni l'autorisation d'exploitation des musiques par les ayants droits. Il vous incombe donc d'obtenir les autorisations nécessaires des ayants droits pour écouter le contenu.</p>
+                <p>En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus illégaux, violents, haineux, discriminatoires, ou à caractère sexuel.</p>
+                <p>En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus à caractère politique, religieux, incitant à la haine, publicitaire ou pornographique.</p>
+            </div>
+       
+        </Box>
+        <br>
+        <router-link class="no-decoration" to="/">
+            <Button><Icon icon="fa-solid fa-house"/> Revenir au concert</Button>
+        </router-link>
+        <!-- Add more content here as needed -->
+    </DefaultSplash>
+</template>
+<style scoped>
+    .terms-content {
+        max-width: 800px;
+        margin: 0 auto;
+        padding-right: 10px;
+        padding-left: 10px;
+        font-size: 12px;
+        line-height: 1.6;
+        max-height: 35vh;
+        overflow-y: auto;
+        color: var(--text-secondary);
+        text-align: justify;
+    }
+</style>