Changed settings to display based on provider

COS301-SE-2024 · Oct 24, 2024 · 11d9ef7 · 11d9ef7
1 parent 8666daf
commit 11d9ef7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 29 deletions.
diff --git a/Frontend/src/app/components/templates/desktop/settings/account/account.component.html b/Frontend/src/app/components/templates/desktop/settings/account/account.component.html
@@ -1,7 +1,7 @@
 <div class="flex-col text-white">
 
     <!-- Change Username -->
-    <div class="flex p-3 justify-between justify-centre">
+    <div *ngif="validProvider()" class="flex p-3 justify-between justify-centre">
         <div class="w-2/3 h-full bg-gray-light px-10 py-2 justify-centre justify-between rounded-full">
             <p>Change Username</p>
         </div>
@@ -11,7 +11,7 @@
     </div>
 
     <!-- Change Password -->
-    <div class="flex p-3 justify-between justify-centre">
+    <div *ngif="validProvider()" class="flex p-3 justify-between justify-centre">
         <div class="w-2/3 h-full bg-gray-light px-10 py-2 justify-centre justify-between rounded-full">
             <p>Change Password</p>
         </div>
@@ -21,7 +21,7 @@
     </div>
 
     <!-- Change Profile Picture -->
-    <div class="flex p-3 justify-between justify-centre">
+    <div *ngif="validProvider()" class="flex p-3 justify-between justify-centre">
         <div class="w-2/3 h-full bg-gray-light px-10 py-2 justify-centre justify-between rounded-full">
             <p>Change Profile Picture</p>
         </div>
@@ -30,36 +30,13 @@
         </div>
     </div>
 
-    <!-- Enable Two-Factor Authentication -->
-    <div class="flex p-3 justify-between justify-centre">
-        <div class="w-2/3 h-full bg-gray-light px-10 py-2 justify-centre justify-between rounded-full">
-            <p>Enable Two-Factor Authentication</p>
-        </div>
-        <div class="w-1/3 px-10 py-2">
-            <label class="inline-flex items-center cursor-pointer">
-                <input type="checkbox" value="" class="sr-only peer">
-                <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
-            </label>
-        </div>
-    </div>
-
     <!-- Manage Connected Accounts -->
     <div class="flex p-3 justify-between justify-centre">
         <div class="w-2/3 h-full bg-gray-light px-10 py-2 justify-centre justify-between rounded-full">
-            <p>Manage Connected Accounts</p>
-        </div>
-        <div class="w-1/3 px-10 py-2">
-            <button class="bg-pink text-white font-bold py-2 px-4 rounded-full">Manage</button>
-        </div>
-    </div>
-
-    <!-- Delete Account -->
-    <div class="flex p-3 justify-between justify-centre">
-        <div class="w-2/3 h-full bg-gray-light px-10 py-2 justify-centre justify-between rounded-full">
-            <p class="text-red-500">Delete Account</p>
+            <p>Connected Accounts</p>
         </div>
         <div class="w-1/3 px-10 py-2">
-            <button class="bg-red-500 text-white font-bold py-2 px-4 rounded-full">Delete</button>
+            <button class="bg-pink text-white font-bold py-2 px-4 rounded-full">View</button>
         </div>
     </div>
 

diff --git a/Frontend/src/app/components/templates/desktop/settings/account/account.component.ts b/Frontend/src/app/components/templates/desktop/settings/account/account.component.ts
@@ -30,10 +30,19 @@ export class AccountComponent {
       this.currentPfpPath = res.user.user_metadata.picture;
     }); 
     this.authService.checkOAuth().subscribe((res) => {
-      console.log(res.providers);
+      console.log(res.currentProvider);
+      this.currentProvider = res.currentProvider;
     });
   }
 
+  validProvider() : boolean {
+    if(this.currentProvider != 'spotify' && this.currentProvider != 'google')
+    {
+      return true;
+    }
+    return false;
+  }
+
   getCurrentUser()
   {