feat: (auth) Add Google and DIscord Auth

src/components/DiscordOauthComponent.vue

@@ -0,0 +1,19 @@
+<template>
+  <q-btn
+    @click="auth.discordLogin()"
+    style="width: 300px">
+    <q-avatar
+      left
+      size="sm"
+      class="q-ma-xs">
+      <img
+        src="https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a6a49cf127bf92de1e2_icon_clyde_blurple_RGB.png" />
+    </q-avatar>
+    Login with Discord
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from 'src/stores/auth';
+const auth = useAuthStore();
+</script>

src/components/GoogleOauthComponent.vue

@@ -1,5 +1,16 @@
 <template>
-  <div @click="auth.googleLogin()">Login with Google</div>
+  <q-btn
+    @click="auth.googleLogin()"
+    style="width: 300px">
+    <q-avatar
+      left
+      class="q-ma-xs"
+      size="sm">
+      <img
+        src="https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA" />
+    </q-avatar>
+    <div>Login with Google</div>
+  </q-btn>
 </template>
 
 <script setup lang="ts">

src/pages/LoginPage.vue

@@ -51,7 +51,14 @@
               </q-card-actions>
             </q-card-section>
           </q-form>
-          <!-- <q-card-section><GoogleOauthComponent /></q-card-section> -->
+          <q-card-section>
+            <div class="row justify-center q-ma-sm">
+              <GoogleOauthComponent />
+            </div>
+            <div class="row justify-center q-ma-sm">
+              <DiscordOauthComponent />
+            </div>
+          </q-card-section>
         </q-card>
       </q-page>
     </q-page-container>
@@ -76,7 +83,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { login } from 'boot/appwrite';
-// import GoogleOauthComponent from 'src/components/GoogleOauthComponent.vue';
+import GoogleOauthComponent from 'src/components/GoogleOauthComponent.vue';
+import DiscordOauthComponent from 'src/components/DiscordOauthComponent.vue';
 
 const email = ref('');
 const password = ref('');

src/stores/auth.ts

@@ -44,8 +44,17 @@ export const useAuthStore = defineStore('auth', () => {
   async function googleLogin() {
     account.createOAuth2Session(
       OAuthProvider.Google,
-      'https://bab.toal.ca/',
+      'https://undock.ca',
-      'https://bab.toal.ca/#/login'
+      'https://undock.ca/#/login'
+    );
+    currentUser.value = await account.get();
+  }
+
+  async function discordLogin() {
+    account.createOAuth2Session(
+      OAuthProvider.Discord,
+      'https://undock.ca',
+      'https://undock.ca/#/login'
     );
     currentUser.value = await account.get();
   }
@@ -88,6 +97,7 @@ export const useAuthStore = defineStore('auth', () => {
     register,
     login,
     googleLogin,
+    discordLogin,
     logout,
     init,
   };