Merge pull request #467 from COS301-SE-2024/448-working-settings

448 working settings
COS301-SE-2024 · Oct 24, 2024 · fd5c964 · fd5c964
2 parents d8bdcd2 + c37e82b
commit fd5c964
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 68 deletions.
diff --git a/Backend/src/auth/services/auth.service.ts b/Backend/src/auth/services/auth.service.ts
@@ -5,7 +5,8 @@ import { AuthDto } from "../../dto/auth.dto";
 export interface UserAuthInfo
 {
     oAuth: boolean,
-    providers: string[]
+    providers: string[],
+    currentProvider: string
 }
 
 
@@ -88,8 +89,9 @@ export class AuthService
 
         const providers = user.app_metadata.providers;
         const oAuth = providers.length > 0;
+        const currentProvider = user.app_metadata.provider;
 
-        return { oAuth, providers };
+        return { oAuth, providers, currentProvider };
     }
 
 
@@ -112,7 +114,7 @@ export class AuthService
         {
             return {
                 provider: "none",
-                message: "No user logged in"
+                message: "No user logged in",
             };
         }
 

diff --git a/Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.html b/Frontend/src/app/components/templates/desktop/deskLogin/desk-login.component.html
@@ -1,15 +1,17 @@
 <div class="h-screen flex flex-col">
   <div class="flex flex-1 flex-row">
          <div class="flex flex-1 items-center justify-center rounded-xl" style="background-color: rgba(0, 0, 0, 0.3);">
-        <app-tool-tip tooltipText="Click to change the Mood.." position="top">
-          <!-- add default color rgb here -->
-          <div [ngStyle]="{'box-shadow': '0 0 40px 10px ' + getFillColor(), 'width': '60vh', 'height': '60vh'}" (click)="changeMood()" class="bg-gray-component rounded-full text-center flex flex-col items-center justify-center">
-            <div class="text-gray-verylight font-semibold text-2xl pb-1">
-              Your mood. Your music.
+          <app-tool-tip tooltipText="Click to change the Mood.." position="top">
+            <!-- Use fixed width and height to stop resizing -->
+            <div [ngStyle]="{'box-shadow': '0 0 40px 10px ' + getFillColor(), 'width': '60vh', 'height': '60vh'}" 
+                 (click)="changeMood()" 
+                 class="bg-gray-component rounded-full text-center flex flex-col items-center justify-center">
+              <div class="text-gray-verylight font-semibold text-2xl pb-1">
+                Your mood. Your music.
+              </div>
+              <app-echo-logo></app-echo-logo>
             </div>
-            <app-echo-logo></app-echo-logo>
-          </div>
-        </app-tool-tip>
+          </app-tool-tip>
       </div>
     <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
       <div class="w-full max-w-sm  p-6 rounded-lg">

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,17 +1,17 @@
 <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>
         <div class="w-1/3 h-full px-10 py-2">
-            <input type="text" id="username" class="bg-gray-dark border border-gray-light text-sm rounded-lg focus:ring-pink focus:border-pink block w-full p-2.5" placeholder="Current Username"/>
+            <input type="text" id="username" class="bg-gray-dark border border-gray-light text-sm rounded-lg focus:ring-pink focus:border-pink block w-full p-2.5" [placeholder]="currentUser"/>
         </div>
     </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,45 +21,22 @@
     </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>
         <div class="w-1/3 px-10 py-2">
-            <input type="text" id="pfp" class="bg-gray-dark border border-gray-light text-sm rounded-lg focus:ring-pink focus:border-pink block w-full p-2.5" placeholder="currentPicture.jpg"/>
-        </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>
+            <input type="text" id="pfp" class="bg-gray-dark border border-gray-light text-sm rounded-lg focus:ring-pink focus:border-pink block w-full p-2.5" [placeholder]="currentPfpPath"/>
         </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
@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { MoodService } from '../../../../../services/mood-service.service';
 import { NgClass } from '@angular/common';
+import { AuthService } from '../../../../../services/auth.service';
 
 @Component({
   selector: 'app-account',
@@ -11,13 +12,44 @@ import { NgClass } from '@angular/common';
 })
 export class AccountComponent {
   currentMood!: string;
+  currentUser!: string;
+  currentPfpPath!: string;
+  currentProvider!: string;
   moodComponentClasses!:{ [key: string]: string };
   backgroundMoodClasses!:{ [key: string]: string };
 
   constructor(
     public moodService: MoodService,
+    public authService: AuthService,
   ) {
     this.currentMood = this.moodService.getCurrentMood(); 
-    this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
+    this.moodComponentClasses = this.moodService.getComponentMoodClasses();
+    this.currentUser = 'John Doe'
+    this.authService.currentUser().subscribe((res) => {
+      this.currentUser = res.user.user_metadata.name;
+      this.currentPfpPath = res.user.user_metadata.picture;
+    }); 
+    this.authService.checkOAuth().subscribe((res) => {
+      console.log(res.currentProvider);
+      this.currentProvider = res.currentProvider;
+    });
+  }
+
+  validProvider() : boolean {
+    if(this.currentProvider != 'spotify' && this.currentProvider != 'google')
+    {
+      return true;
+    }
+    return false;
+  }
+
+  getCurrentUser()
+  {
+
+  }
+
+  getLinkedAccounts()
+  {
+
   }
 }
diff --git a/Frontend/src/app/components/templates/desktop/settings/display/display.component.html b/Frontend/src/app/components/templates/desktop/settings/display/display.component.html
@@ -8,7 +8,7 @@
             </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" (change)="toggleAutomaticUIChange()"> -->
+                    <input type="checkbox" [checked]="getMoodServiceToggleSetting()" class="sr-only peer" (change)="toggleAutomaticUIChange()">
                     <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>

diff --git a/Frontend/src/app/components/templates/desktop/settings/display/display.component.ts b/Frontend/src/app/components/templates/desktop/settings/display/display.component.ts
@@ -21,4 +21,14 @@ export class DisplayComponent {
     this.currentMood = this.moodService.getCurrentMood(); 
     this.moodComponentClasses = this.moodService.getComponentMoodClasses(); 
   }
+
+  public getMoodServiceToggleSetting()
+  {
+    return this.moodService.getMoodToggleSetting();
+  }
+  public toggleAutomaticUIChange()
+  {
+    //Disable mood service tracking
+    this.moodService.moodServicetoggle();
+  }
 }
diff --git a/Frontend/src/app/pages/settings/settings.component.html b/Frontend/src/app/pages/settings/settings.component.html
@@ -1,31 +1,23 @@
-<div  class="rounded-xl flex flex-col h-dvh p-2" style="overflow: hidden;">
+<div class="rounded-xl flex flex-col h-dvh p-2" style="overflow: hidden;">
     <!-- Main container -->
-     <div class="h-full flex rounded-xl gap-x-20">
+    <div class="h-full flex flex-col lg:flex-row rounded-xl lg:gap-x-20">
         <!-- Left Nav -->
-        <app-back-button></app-back-button>
-        <div class="w-1/4 grid grid-cols-1 grid-rows-10 px-4 position: fixed;">
-              <h2 class="text-white mb-4 text-2xl font-bold">Settings</h2>
+        <div class="lg:w-1/4 w-full lg:grid grid-cols-1 grid-rows-10 px-4 fixed lg:static">
+            <div class="flex items-center mb-4">
+                <app-back-button></app-back-button>
+                <h2 class="text-white text-2xl font-bold text-center lg:text-left ml-4">Settings</h2>
+            </div>
             <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Account') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-newDark'" (click)="showSettings('Account')">
                 Account
             </button>
-            <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Privacy') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-newDark'"  (click)="showSettings('Privacy')">
-                Privacy
-            </button>
-            <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Display') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-newDark'"  (click)="showSettings('Display')">
+            <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Display') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-newDark'" (click)="showSettings('Display')">
                 Display
             </button>
-            <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Audio') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-newDark'"  (click)="showSettings('Audio')">
-                Audio
-            </button>
-            <button class="text-white font-bold py-2 px-4 rounded-full h-10 min-w-32" [ngClass]="getButtonClass('Language') ? this.moodComponentClasses[this.moodService.getCurrentMood()]: 'bg-gray-newDark'"  (click)="showSettings('Language')">
-                Language
-            </button>
         </div>
-        <div class="border-r border-gray-light mx-0"></div>
+        <div class="border-r border-gray-light mx-0 hidden lg:block"></div>
         <!-- Right Page -->
-        <div class="w-3/4 row-start-1 h-full">
-            <h2 class="text-white text-2xl font-bold mb-12">{{ activeSetting }}</h2>
-            <div class="overflow-auto h-full gris-rows-10">
+        <div class="lg:w-3/4 w-full row-start-1 h-full mt-28 ">
+            <div class="overflow-auto h-full grid-rows-10">
                 <ng-container *ngIf="activeSetting === 'Account'">
                     <app-account></app-account>
                 </ng-container>
@@ -41,8 +33,7 @@ <h2 class="text-white text-2xl font-bold mb-12">{{ activeSetting }}</h2>
                 <ng-container *ngIf="activeSetting === 'Language'">
                     <app-language></app-language>
                 </ng-container>
-            </div>            
+            </div>
         </div>
-     </div>
-     <div></div>
+    </div>
 </div>
diff --git a/Frontend/src/app/services/auth.service.ts b/Frontend/src/app/services/auth.service.ts
@@ -18,7 +18,8 @@ export interface AuthResponse
 export interface UserAuthInfo
 {
   oAuth: boolean,
-  providers: string[]
+  providers: string[],
+  currentProvider: string
 }
 
 @Injectable({

diff --git a/Frontend/src/app/services/mood-service.service.ts b/Frontend/src/app/services/mood-service.service.ts
@@ -5,6 +5,7 @@ import { Injectable } from '@angular/core';
 })
 export class MoodService {
   private _currentMood!: string;
+  private _automaticMoodChange: boolean = true;
 
   private _moodColors: { [key: string]: string } = {
     Neutral: 'rgb(238, 2, 88)',   // #EE0258
@@ -89,6 +90,8 @@ export class MoodService {
   private initMood(): void {
     if (typeof window !== 'undefined') {
       this._currentMood = this.getLocalStorageItem('currentMood') || 'Neutral';
+      const moodServiceToggle = this.getLocalStorageItem('moodServiceToggle');
+      this._automaticMoodChange = moodServiceToggle === null ? true : moodServiceToggle === 'true';
     } 
   }
   private getLocalStorageItem(key: string): string | null {
@@ -135,8 +138,22 @@ export class MoodService {
     return this._currentMood;
   }
   setCurrentMood(mood: string): void {
-    this._currentMood = mood;
-    this.setLocalStorageItem('currentMood', mood);
+    if(this._automaticMoodChange)
+    {
+      this._currentMood = mood;
+      this.setLocalStorageItem('currentMood', mood);
+    }
+
+  }
+
+  moodServicetoggle()
+  {
+    this._automaticMoodChange = !this._automaticMoodChange;
+    this.setLocalStorageItem('moodServiceToggle', this._automaticMoodChange.toString());
+  }
+  getMoodToggleSetting()
+  {
+    return this._automaticMoodChange;
   }
   getAllMoods(): string[] {
     return Object.keys(this._componentMoodClasses);