Issue 11 / essaies

app.vue

@@ -2,21 +2,14 @@
   <div class="body">
     <Header @login="show" />
     <div class="btns">
-      <button
-        v-if="jwtStore.role === 'ADMIN' && jwtStore.jwt"
-        class="add-task-btn"
-        @click="showAddTask = true"
-      >
+      <button v-if="jwtStore.role === 'ADMIN' && jwtStore.jwt" class="add-task-btn" @click="showAddTask = true">
         <span class="material-symbols-outlined"> note_add </span> Ajouter une
         tâche
       </button>
     </div>
     <LoginForm :show-form="showForm" @close="closeForm" />
     <TaskList />
-    <AddTaskForm
-      v-if="showAddTask && jwtStore.role === 'ADMIN'"
-      @close="showAddTask = false"
-    />
+    <AddTaskForm v-if="showAddTask && jwtStore.role === 'ADMIN'" @close="showAddTask = false" />
     <Footer />
   </div>
 </template>
@@ -41,6 +34,7 @@ const closeForm = () => {
   font-family: "Ubuntu", sans-serif;
   color: white;
 }
+
 .body {
   background-color: #171e27;
   position: absolute;
@@ -49,6 +43,7 @@ const closeForm = () => {
   right: 0;
   display: column;
 }
+
 .btns {
   display: flex;
   margin-top: 5rem;

components/LoginForm.vue

@@ -13,26 +13,23 @@
         <h2>Connexion</h2>
         <div class="form-group">
           <label for="password">Nom d'utilisateur</label>
-          <input
-            type="text"
-            class="form-control"
-            id="username"
-            aria-describedby="usernameHelp"
-            placeholder="Votre nom d'utilisateur"
-            v-model="username"
-            @keyup="handleChange"
-          />
+          <input type="text" class="form-control" id="username" aria-describedby="usernameHelp"
+            placeholder="Votre nom d'utilisateur" v-model="username" @keyup="handleChange" />
         </div>
         <div class="form-group">
           <label for="password">Mot de passe</label>
-          <input
-            type="password"
-            class="form-control"
-            id="exampleInputPassword1"
-            placeholder="Votre mot de passe"
-            v-model="password"
-            @keyup="handleChange"
-          />
+          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Votre mot de passe"
+            v-model="password" @keyup="handleChange" />
+        </div>
+        <div class="oauth-icons">
+          <a href="#" class="oauth-button discord" @click="redirectToDiscordOAuth">
+            <img src="../assets/img/discord-icon.png" alt="Discord Icon" />
+            Se connecter avec Discord
+          </a>
+          <a href="#" class="oauth-button twitch" @click="redirectToTwitchOAuth">
+            <img src="../assets/img/twitch-icon.png" alt="Twitch Icon" />
+            Se connecter avec Twitch
+          </a>
         </div>
         <input type="submit" value="Connexion" />
         <span class="error" v-if="error !== ''">{{ error }}</span>
@@ -44,12 +41,15 @@
 <script setup>
 import { useJwtStore } from "~~/stores/jwt";
 
+
 const username = ref("");
 const password = ref("");
 const error = ref("");
 const emit = defineEmits(["close"]);
 const jwtStore = useJwtStore();
 
+
+
 defineProps({
   showForm: {
     type: Boolean,
@@ -89,6 +89,30 @@ const login = async () => {
 const handleChange = () => {
   error.value = "";
 };
+
+const runtimeConfig = useRuntimeConfig()
+
+
+const redirectToDiscordOAuth = () => {
+  const discordClientId = runtimeConfig.discordClientId;
+  const discordRedirectUri = runtimeConfig.discordClientRedirect;
+
+  const discordOAuthUrl = `  https://discord.com/api/oauth2/authorize?client_id=${discordClientId}&redirect_uri=${discordRedirectUri}&response_type=code&scope=identify%20guilds`;
+  console.log(discordRedirectUri);
+  window.location.href = discordOAuthUrl;
+};
+
+const redirectToTwitchOAuth = () => {
+  const twitchClientId = runtimeConfig.twitchClientId;
+  const twitchRedirectUri = runtimeConfig.twitchClientRedirect;
+
+  const twitchOAuthUrl = `https://id.twitch.tv/oauth2/authorize?client_id=${twitchClientId}&redirect_uri=${twitchRedirectUri}&response_type=code&scope=openid`;
+
+  window.location.href = twitchOAuthUrl;
+};
+
+
+
 </script>
 
 <style scoped>
@@ -166,25 +190,58 @@ button {
   color: white;
 }
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.01s linear;
+.oauth-icons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1em;
+}
+
+.oauth-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5em 1em;
+  background-color: #7289da;
+  /* Couleur Discord */
+  color: white;
+  border: none;
+  border-radius: 8px;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.oauth-button:hover {
+  background-color: #5865f2;
+  /* Couleur Discord au survol */
+}
+
+.oauth-button img {
+  width: 24px;
+  height: 24px;
+  margin-right: 0.5em;
+}
+
+/* Style spécifique pour le bouton Discord */
+.discord {
+  background-color: #7289da;
+  /* Couleur Discord */
 }
 
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
+.discord:hover {
+  background-color: #5865f2;
+  /* Couleur Discord au survol */
 }
 
-.pop-enter-active,
-.pop-leave-active {
-  transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67),
-    opacity 0.25s linear;
+/* Style spécifique pour le bouton Twitch */
+.twitch {
+  background-color: #6441a5;
+  /* Couleur Twitch */
 }
 
-.pop-enter-from,
-.pop-leave-to {
-  opacity: 0;
-  transform: scale(0.2) translateY(-50%);
+.twitch:hover {
+  background-color: #9146ff;
+  /* Couleur Twitch au survol */
 }
-</style>
+</style>

components/OauthDiscord.vue

@@ -0,0 +1,18 @@
+<!-- <script setup>
+const passport = require('passport');
+const { Strategy } = require('passport-discord');
+
+passport.use(
+    new Strategy({
+        clientID: '1057597168506126397',
+        clientSecret: 'w4bUTDxYAUupRZrB3NewQUhRgqO0Lm7Z',
+        callbackURL: 'http://localhost:3000/api/auth/discord/redirect',
+        scope: ['identify'],
+    }, async (accessToken, refreshToken, profile, done) => {
+        console.log('Jetons d\'accès OAuth2 :', accessToken);
+        console.log('Jeton de rafraîchissement :', refreshToken);
+        console.log('Profil Discord de l\'utilisateur :', profile);
+    })
+);
+</script>
+   -->

nuxt.config.ts

@@ -1,24 +1,34 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
-    modules: [
-        [
-          '@pinia/nuxt',
-          {
-            autoImports: [
-              // automatically imports `defineStore`
-              'defineStore', // import { defineStore } from 'pinia'
-              // automatically imports `defineStore` as `definePiniaStore`
-              ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
-            ],
-          },
+  modules: [
+    [
+      '@pinia/nuxt',
+      {
+        autoImports: [
+          // automatically imports `defineStore`
+          'defineStore', // import { defineStore } from 'pinia'
+          // automatically imports `defineStore` as `definePiniaStore`
+          ['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
         ],
-      ],
-    meta: {
-        link: [
-            {
-                href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0",
-                rel: "stylesheet",
-              },
-        ]
+      },
+    ],
+  ],
+  meta: {
+    link: [
+      {
+        href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0",
+        rel: "stylesheet",
+      },
+    ]
+  },
+  runtimeConfig: {
+    public: {
+      discordClientId: process.env.DISCORD_CLIENT_ID,
+      discordClientSecret: process.env.DISCORD_CLIENT_SECRET,
+      discordClientRedirect: process.env.DISCORD_CLIENT_REDIRECT,
+      twitchClientId: process.env.TWITCH_CLIENT_ID,
+      twitchClientSecret: process.env.TWTICH_CLIENT_SECRET,
+      twitchClientRedirect: process.env.TWITCH_CLIENT_REDIRECT,
     }
+  }
 })