From 8ae855838bc25f5e1947803465a35cfea515112b Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Thu, 13 Jun 2024 23:38:03 -0400
Subject: [PATCH] feat: (auth) Add Google and DIscord Auth

---
 src/components/DiscordOauthComponent.vue | 19 +++++++++++++++++++
 src/components/GoogleOauthComponent.vue  | 13 ++++++++++++-
 src/pages/LoginPage.vue                  | 12 ++++++++++--
 src/stores/auth.ts                       | 14 ++++++++++++--
 4 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 src/components/DiscordOauthComponent.vue

diff --git a/src/components/DiscordOauthComponent.vue b/src/components/DiscordOauthComponent.vue
new file mode 100644
index 0000000..bfe7df5
--- /dev/null
+++ b/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>
diff --git a/src/components/GoogleOauthComponent.vue b/src/components/GoogleOauthComponent.vue
index d2fc7c2..d980a91 100644
--- a/src/components/GoogleOauthComponent.vue
+++ b/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">
diff --git a/src/pages/LoginPage.vue b/src/pages/LoginPage.vue
index dfda1c0..d2ea91e 100644
--- a/src/pages/LoginPage.vue
+++ b/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('');
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 5802902..6c9f470 100644
--- a/src/stores/auth.ts
+++ b/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://bab.toal.ca/#/login'
+      'https://undock.ca',
+      '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,
   };