Merge pull request #402 from COS301-SE-2024/feat/mobileInterface

Feat/mobile interface Login and Regsiter Mobile Pages

Frontend/src/app/app.component.html

@@ -19,6 +19,7 @@
       <router-outlet></router-outlet>
     </div>
   </div>  
+
   <div *ngIf="screenSize === 'mobile'">
     <div class="grid grid-cols-3 grid-rows-[0.1fr,1fr,1fr]  gap-x-4 min-h-screen relative">
       <app-header class="col-start-2 col-span-1 row-start-1 row-span-1"></app-header>

Frontend/src/app/app.routes.ts

@@ -1,7 +1,6 @@
 import { RouterModule, Routes } from "@angular/router";
 import { LandingPageComponent } from "./pages/landing-page/landing-page.component";
-import { LoginComponent } from "./pages/login/login.component";
-import { RegisterComponent } from "./pages/register/register.component";
+// import { RegisterComponent } from "./pages/register/register.component";
 import { HomeComponent } from "./components/templates/desktop/home/home.component";
 import { ProfileComponent } from "./pages/profile/profile.component";
 import { AuthCallbackComponent } from "./authcallback/authcallback.component";
@@ -13,12 +12,14 @@ import { MoodComponent } from "./pages/mood/mood.component";
 import { NgModule } from "@angular/core";
 import { InsightsComponent } from "./pages/insights/insights.component";
 import { HelpMenuComponent } from "./pages/help-menu/help-menu.component";
-import { LoginComponentview} from "./views/login/login.component";
 import { EchoSongComponent } from "./components/templates/desktop/echo-song/echo-song.component";
+//vies 
+import { LoginComponentview} from "./views/login/login.component";
+import { RegisterComponent} from "./views/register/register.component";
 
 export const routes: Routes = [
   { path: "landing", component: LandingPageComponent },
-  { path: "login", component: LoginComponent },
+  { path: "login", component: LoginComponentview},
   { path: "home", component: HomeComponent},
   { path: "register", component: RegisterComponent },
   { path: "profile", component: ProfileComponent },
@@ -30,7 +31,6 @@ export const routes: Routes = [
   { path: "help", component: HelpMenuComponent },
   { path: "insights", component: InsightsComponent},
   { path: "search", component: SearchComponent},
-  { path: "newlogin", component: LoginComponentview},
   { path: "library", component: UserLibraryComponent},
   { path: "echo Song", component: EchoSongComponent},
   { path: '**', redirectTo: '/login' } //DO NOT MOVE - MUST ALWAYS BE LAST

Frontend/src/app/pages/register/register.component.html → Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.html

@@ -1,60 +1,61 @@
-<div class="h-screen flex flex-row">
-  <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
-    <div class="text-center">
-      <div class="text-white font-semibold text-5xl">
-        Welcome to
+<div class="h-screen flex flex-col">
+  <div class="flex flex-1 flex-row">
+    <div class="flex flex-1 items-center justify-center rounded-l-xl" style="background-color: rgba(0, 0, 0, 0.3);">
+      <div class="text-center">
+        <div class="text-white font-semibold text-5xl">
+          Welcome to 
+        </div>
+        <img src="./assets/images/logo-dark-bg.png" alt="logo" class="h-72">
       </div>
-      <img src="./assets/images/logo-dark-bg.png" alt="logo" class="h-72">
     </div>
-  </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">
-      <form class="space-y-6" action="#" method="POST">
-        <div>
-          <input id="username" [(ngModel)]="username" name="username" autocomplete="username" placeholder="  Username" required
-            class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
-        </div>
-
-        <div>
-          <input id="email" [(ngModel)]="email" name="email" type="email" autocomplete="email" placeholder="  Email address" required
-            class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
-        </div>
-
-        <div>
-          <input id="password" [(ngModel)]="password" name="password" type="password" autocomplete="current-password" placeholder="  Password" required
-            class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
-        </div>
-
-        <div class="flex justify-center">
-          <button type="submit" (click)="register()" class="rounded-full bg-default px-10 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-default-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-dark">Create account</button>
-        </div>
-
-        <div class="relative flex py-3 items-center">
-          <div class="flex-grow border-t border-gray-light"></div>
-          <span class="flex-shrink mx-4 text-xs text-gray-verylight">Or sign up with</span>
-          <div class="flex-grow border-t border-gray-light"></div>
-        </div>
-
-        <div class="flex justify-between items-center w-full">
-          <app-spotify-login (click)="spotify()"></app-spotify-login>
-          <app-google-login></app-google-login>
-          <app-apple-login></app-apple-login>
+
+    <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">
+        <form class="space-y-6" action="#" method="POST">
+          <div>
+            <input id="username" [(ngModel)]="username" name="username" autocomplete="username" placeholder="  Username" required
+              class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+          </div>
+
+          <div>
+            <input id="email" [(ngModel)]="email" name="email" type="email" autocomplete="email" placeholder="  Email address" required
+              class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+          </div>
+
+          <div>
+            <input id="password" [(ngModel)]="password" name="password" type="password" autocomplete="current-password" placeholder="  Password" required
+              class="block w-full rounded-full border-0 py-2 bg-gray-verylight text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-light focus:ring-2 focus:ring-inset focus:ring-pink-dark sm:text-sm sm:leading-6">
+          </div>
+
+          <div class="flex justify-center">
+            <button type="submit" (click)="register()" class="rounded-full bg-default px-10 py-2.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-default-dark focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-dark">Create account</button>
+          </div>
+
+          <div class="relative flex py-3 items-center">
+            <div class="flex-grow border-t border-gray-light"></div>
+            <span class="flex-shrink mx-4 text-xs text-gray-verylight">Or sign up with</span>
+            <div class="flex-grow border-t border-gray-light"></div>
+          </div>
+
+          <div class="flex justify-between items-center w-full">
+            <app-spotify-login (click)="spotify()"></app-spotify-login>
+            <app-google-login></app-google-login>
+            <app-apple-login></app-apple-login>
+          </div>
+        </form>
+
+        <p class="mt-10 text-center text-sm text-black font-semibold">
+          Already have an Echo account?
+          <button (click)="navigateTologin()" class="font-bold text-lg leading-6 text-default hover:text-pink-dark">Login</button>
+        </p>
+
+        <div class="toast-container">
+          <app-toast></app-toast>
         </div>
-      </form>
-
-      <p class="mt-10 text-center text-sm text-black font-semibold">
-        Already have and Echo account
-        <button (click)="navigateTologin()" class="font-bold text-lg leading-6 text-default hover:text-pink-dark">Login</button>
-      </p>
-
-      <div class="toast-container">
-        <app-toast></app-toast>
       </div>
     </div>
   </div>
-
-  <!-- Modal Overlays -->
+
   <div *ngIf="showModal" class="modal-overlay">
     <div class="modal-content">
       <button (click)="closeModal()" class="close-button">Close</button>
@@ -68,7 +69,7 @@ <h3 class="mb-5 text-lg font-bold text-black">Frequently Asked Questions</h3>
       </div>
     </div>
   </div>
-
+  
   <div *ngIf="showAboutModal" class="modal-overlay">
     <div class="modal-content">
       <button (click)="closeModal()" class="close-button">Close</button>
@@ -78,7 +79,7 @@ <h3 class="mb-5 text-lg font-bold text-black">About Us</h3>
       </div>
     </div>
   </div>
-
+  
   <div *ngIf="showContactModal" class="modal-overlay">
     <div class="modal-content">
       <button (click)="closeModal()" class="close-button">Close</button>
@@ -88,7 +89,7 @@ <h3 class="mb-5 text-lg font-bold text-pink">Contact Details</h3>
       </div>
     </div>
   </div>
-
+  
   <div *ngIf="showPrivacyModal" class="modal-overlay">
     <div class="modal-content">
       <button (click)="closeModal()" class="close-button">Close</button>
@@ -98,8 +99,7 @@ <h3 class="mb-5 text-lg font-bold text-pink">Privacy Policy</h3>
       </div>
     </div>
   </div>
-
-  <!-- Footer Section -->
+
   <footer class="bg-gray-light dark:bg-dark-bg py-1">
     <div class="container mx-auto px-6 lg:px-8">
       <div class="flex flex-wrap justify-between items-center">

Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeskRegisterComponent } from './desk-register.component';
+
+describe('DeskRegisterComponent', () => {
+  let component: DeskRegisterComponent;
+  let fixture: ComponentFixture<DeskRegisterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DeskRegisterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DeskRegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

Frontend/src/app/pages/register/register.component.ts → Frontend/src/app/components/templates/desktop/desk-register/desk-register.component.ts

@@ -1,20 +1,21 @@
 import { Component, OnInit,ViewChild } from '@angular/core';
-import { SpotifyLoginComponent } from '../../components/organisms/spotify-login/spotify-login.component';
-import { AuthService } from '../../services/auth.service';
+import { SpotifyLoginComponent } from '../../../../components/organisms/spotify-login/spotify-login.component';
+import { AuthService } from '../../../../services/auth.service';
 import { Router } from '@angular/router';
 import { FormsModule } from '@angular/forms';
-import { ToastComponent } from '../../components/organisms/toast/toast.component';
+import { ToastComponent } from '../../../../components/organisms/toast/toast.component';
 import { CommonModule } from '@angular/common';
-import { AppleLoginComponent } from "../../components/organisms/apple-login/apple-login.component";
-import { GoogleLoginComponent } from "../../components/organisms/google-login/google-login.component";
+import { AppleLoginComponent } from "../../../../components/organisms/apple-login/apple-login.component";
+import { GoogleLoginComponent } from "../../../../components/organisms/google-login/google-login.component";
+
 @Component({
-    selector: 'app-register',
-    standalone: true,
+  selector: 'app-desk-register',
+  standalone: true,
   imports: [SpotifyLoginComponent, FormsModule, ToastComponent, CommonModule, AppleLoginComponent, GoogleLoginComponent],
-    templateUrl: './register.component.html',
-    styleUrl: './register.component.css',
+  templateUrl: './desk-register.component.html',
+  styleUrl: './desk-register.component.css'
 })
-export class RegisterComponent {
+export class DeskRegisterComponent {
     username: string = '';
     email: string = '';
     password: string = '';
@@ -77,3 +78,4 @@ export class RegisterComponent {
       this.showPrivacyModal = false;
     }
 }
+