Style register/login page

src/app/app-material.module.ts

@@ -4,7 +4,14 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatTableModule } from '@angular/material/table';
-import { MatInputModule, MatListModule, MatNativeDateModule, MatSnackBarModule, MatTooltipModule } from '@angular/material';
+import {
+  MatDialogModule,
+  MatInputModule,
+  MatListModule,
+  MatNativeDateModule,
+  MatSnackBarModule,
+  MatTooltipModule
+} from '@angular/material';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -12,6 +19,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSidenavModule } from '@angular/material/sidenav';
+import { FormsModule } from '@angular/forms';
 
 @NgModule( {
   exports: [
@@ -31,6 +39,9 @@ import { MatSidenavModule } from '@angular/material/sidenav';
     MatMenuModule,
     MatSidenavModule,
     MatListModule,
+    MatFormFieldModule,
+    MatDialogModule,
+    FormsModule,
   ]
 } )
 export class AppMaterialModule {

src/app/app-routing.module.ts

@@ -8,7 +8,13 @@ import { MyScheduleComponent } from '@app/my-schedule/my-schedule.component';
 const routes: Routes = [
   // No logged pages
   { path: '', component: HomeComponent, },
-  { path: 'register', component: RegisterComponent },
+  {
+    path: 'login',
+    component: RegisterComponent,
+    data: {
+      title: 'Sign In or Sing Up in your account',
+    },
+  },
   { path: 'activities', component: ActivitiesComponent },
   { path: 'my-schedule', component: MyScheduleComponent },
   // {

src/app/app.component.html

@@ -19,8 +19,12 @@
   </mat-menu>
 
   <mat-menu #profileMenu="matMenu">
-    <a routerLink="/register"><button mat-menu-item>Login</button></a>
+    <a [routerLink]="[ 'login' ]">
-    <a routerLink="/register"><button mat-menu-item>Create Account</button></a>
+      <button mat-menu-item>Login</button>
+    </a>
+    <a [queryParams]="{ 'new-account': 'true' }" [routerLink]="[ 'login' ]">
+      <button mat-menu-item>Create Account</button>
+    </a>
     <button mat-menu-item (click)="authService.logout()">Logout</button>
   </mat-menu>
 
@@ -28,7 +32,8 @@
 
     <header>
 
-      <div fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between" fxShow id="header-container-desktop">
+      <div fxHide.lt-md="true" fxLayout="row" fxLayoutAlign="space-between" fxShow
+           id="header-container-desktop">
 
         <div class="title" fxFlex="200px">
           <a routerLink="/">DiscoTrip</a>
@@ -65,9 +70,11 @@
 
       </div>
 
-      <div fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="space-between" fxShow id="header-container-mobile">
+      <div fxHide.gt-sm="true" fxLayout="row" fxLayoutAlign="space-between" fxShow
+           id="header-container-mobile">
 
-        <button (click)="drawer.toggle()" mat-flat-button style="position: absolute;top: 0;left: 0;height: 60px;">
+        <button (click)="drawer.toggle()" mat-flat-button
+                style="position: absolute;top: 0;left: 0;height: 60px;">
           <mat-icon style="transform: scale(1.3)">menu</mat-icon>
         </button>
 

src/app/app.module.ts

@@ -34,7 +34,7 @@ import { SearchCardComponent } from './search-card/search-card.component';
 import { MyScheduleComponent } from './my-schedule/my-schedule.component';
 import { ActivitiesComponent } from './activities/activities.component';
 import { AngularFirestore } from '@angular/fire/firestore';
-import { MatDialogModule } from '@angular/material';
+import { ReactiveFormsModule } from '@angular/forms';
 
 @NgModule( {
   declarations: [
@@ -54,8 +54,8 @@ import { MatDialogModule } from '@angular/material';
     AngularFireAuthModule,
     AngularFireDatabaseModule,
     AppMaterialModule,
-    MatDialogModule,
     ScheduleModule,
+    ReactiveFormsModule,
   ],
   providers: [
     AngularFirestore,

src/app/core/services/auth/auth.service.ts

@@ -1,12 +1,7 @@
 import { Injectable } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject, Observable } from 'rxjs';
 import { Router } from '@angular/router';
-import { auth } from  'firebase/app';
+import { AngularFireAuth } from '@angular/fire/auth';
-import { AngularFireAuth } from  "@angular/fire/auth";
 import { User } from 'firebase';
-import { StorageService } from '@app/core/services/storage/storage.service';
-import { LogService } from '@app/core/services/log/log.service';
 
 // import * as config from '@assets/config.json';
 
@@ -14,45 +9,19 @@ import { LogService } from '@app/core/services/log/log.service';
 export class AuthService {
   user: User;
 
-    constructor(public  afAuth:  AngularFireAuth, public  router:  Router) {
+  constructor( public  afAuth: AngularFireAuth, public  router: Router ) {
-		this.afAuth.authState.subscribe(user => {
+    this.afAuth.authState.subscribe( user => {
-       if (user) {
+      if ( user ) {
         this.user = user;
-         localStorage.setItem('user', JSON.stringify(this.user));
+        localStorage.setItem( 'user', JSON.stringify( this.user ) );
       } else {
-         localStorage.setItem('user', null);
+        localStorage.setItem( 'user', null );
       }
-     })
+    } );
-  }
-
-  async  register(email:  string, password:  string) {
-    try {
-      await  this.afAuth.auth.createUserWithEmailAndPassword(email, password)
-      alert("Thank you: " + email + " for registering on DiscoTrip")
-      this.router.navigate(['/']);
-    } catch (e) {
-      alert("Error!"  +  e.message);
-    }
-    }
-
-	async  login(email:  string, password:  string) {
-  	try {
-  		await  this.afAuth.auth.signInWithEmailAndPassword(email, password)
-      alert("User: " + email + " is connected")
-  		this.router.navigate(['/']);
-  	} catch (e) {
-  		alert("Error!"  +  e.message);
-  	}
-  	}
-
-  	async logout(){
-  		await this.afAuth.auth.signOut();
-  		localStorage.removeItem('user');
-      alert("Thank you for using DiscoTrip, see you soon")
   }
 
   get isLoggedIn(): boolean {
-  		const  user  =  JSON.parse(localStorage.getItem('user'));
+    const user = JSON.parse( localStorage.getItem( 'user' ) );
     return user !== null;
   }
 
@@ -70,6 +39,32 @@ export  class  AuthService {
     //   }
     // } );
     // }
-	  return //this.currentUserSubject.value;
+    return; //this.currentUserSubject.value;
+  }
+
+  async register( email: string, password: string ) {
+    try {
+      await this.afAuth.auth.createUserWithEmailAndPassword( email, password );
+      alert( 'Thank you: ' + email + ' for registering on DiscoTrip' );
+      this.router.navigate( [ '/' ] );
+    } catch ( e ) {
+      alert( 'Error!' + e.message );
+    }
+  }
+
+  async login( email: string, password: string ) {
+    try {
+      await this.afAuth.auth.signInWithEmailAndPassword( email, password );
+      alert( 'User: ' + email + ' is connected' );
+      this.router.navigate( [ '/' ] );
+    } catch ( e ) {
+      alert( 'Error!' + e.message );
+    }
+  }
+
+  async logout() {
+    await this.afAuth.auth.signOut();
+    localStorage.removeItem( 'user' );
+    alert( 'Thank you for using DiscoTrip, see you soon' );
   }
 }

src/app/register/register.component.html

@@ -1,22 +1,98 @@
-<div class="container pt-3">
+<div class="main-container">
-  <div class="row justify-content-sm-center">
+
-    <div class="col-sm-10 col-md-6">
+  <div fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutAlign="space-between">
-      <div class="card border-info">
+
-        <div class="card-header">Login</div>
+    <div fxFlex style="margin-top: 150px">
-        <div class="card-body">
+
-          <div class="row">
+      <mat-accordion>
-            <div class="col-md-4 text-center">
+
-              <img src="https://placeimg.com/128/128/nature">
+        <mat-expansion-panel [expanded]="this.openState.login">
-            </div>
+
-            <div class="col-md-8">
+          <mat-expansion-panel-header (click)="loginClick()">
-              <input type="text" class="form-control mb-2" placeholder="Email" #userEmail required autofocus>
+
-              <input type="password" class="form-control mb-2" placeholder="Password" #userPassword required>
+            <mat-panel-title>Sign in</mat-panel-title>
-              <button class="btn btn-lg btn-primary btn-block mb-1" (click)="authService.login(userEmail.value, userPassword.value)">Login</button>
+
-              <button class="btn btn-lg btn-primary btn-block mb-1" (click)="authService.register(userEmail.value, userPassword.value)">Register</button>
+            <mat-panel-description>Sign In on our DiscoTrip website</mat-panel-description>
-            </div>
+
+          </mat-expansion-panel-header>
+
+          <mat-form-field appearance="outline" style="width: 100%">
+
+            <mat-label>Email</mat-label>
+
+            <input #userEmail1 matInput placeholder="Email" required type="email">
+
+          </mat-form-field>
+
+          <mat-form-field appearance="outline" style="width: 100%">
+
+            <mat-label>Password</mat-label>
+
+            <input #userPassword1 matInput placeholder="Password" required type="password">
+
+          </mat-form-field>
+
+          <button (click)="authService.login( userEmail1.value, userPassword1.value )"
+                  mat-flat-button>
+            Sign In
+          </button>
+
+        </mat-expansion-panel>
+
+        <mat-expansion-panel [expanded]="this.openState.newAccount">
+
+          <mat-expansion-panel-header (click)="newAccountClick()">
+
+            <mat-panel-title>Sign Up</mat-panel-title>
+
+            <mat-panel-description>
+              You don't have an account yet ? Just sign up
+            </mat-panel-description>
+
+          </mat-expansion-panel-header>
+
+          <div class="mdc-layout-grid">
+
+            <div class="mdc-layout-grid__inner">
+
+              <div
+                class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12-desktop mdc-layout-grid__cell--span-8-tablet mdc-layout-grid__cell--span-4-phone">
+
+                <mat-form-field appearance="outline" style="width: 100%">
+
+                  <mat-label>Email</mat-label>
+
+                  <input #userEmail2 matInput placeholder="Adresse Email" required type="email">
+
+                </mat-form-field>
+
+                <mat-form-field appearance="outline"
+                                style="width: 100%">
+
+                  <mat-label>Password</mat-label>
+
+                  <input #userPassword2 matInput placeholder="Password" required
+                         type="password">
+
+                </mat-form-field>
+
+                <button (click)="authService.register( userEmail2.value, userPassword2.value )"
+                        mat-flat-button type="submit">
+                  Sign Up
+                </button>
+
               </div>
+
             </div>
+
           </div>
+
+        </mat-expansion-panel>
+
+      </mat-accordion>
+
     </div>
+
   </div>
+
 </div>

src/app/register/register.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { AuthService } from '@app/core/services/auth/auth.service';
+import { ActivatedRoute } from '@angular/router';
 
 @Component( {
   selector: 'app-register',
@@ -8,10 +9,31 @@ import { AuthService } from '@app/core/services/auth/auth.service';
 } )
 export class RegisterComponent implements OnInit {
 
-  constructor( public authService: AuthService ) {
+  public openState = {
+    login: true,
+    newAccount: false,
+  };
+
+  constructor( public authService: AuthService, private route: ActivatedRoute ) {
   }
 
   ngOnInit() {
+    this.route.queryParams.forEach( ( val ) => {
+      if ( val.hasOwnProperty( 'new-account' ) ) {
+        this.newAccountClick();
+      }
+    } );
+  }
+
+  // Clicks
+  public loginClick(): void {
+    this.openState.newAccount = false;
+    this.openState.login = !this.openState.login;
+  }
+
+  public newAccountClick(): void {
+    this.openState.login = false;
+    this.openState.newAccount = !this.openState.newAccount;
   }
 
 }

src/styles.css

@@ -26,6 +26,10 @@ app-root .mat-fab .mat-button-wrapper {
   min-height: 80%;
 }
 
+a {
+  text-decoration: none;
+}
+
 .mat-form-field.mat-focused .mat-form-field-ripple {
   background-color: #078171;
 }