Feat: Developed ui for login, signup, reset password

angular.json

@@ -28,12 +28,16 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "serviceWorker": true,
+            "ngswConfigPath": "ngsw-config.json"
           },
           "configurations": {
             "production": {
@@ -96,9 +100,11 @@
             "inlineStyleLanguage": "scss",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
+              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
               "src/styles.scss"
             ],
             "scripts": []

ngsw-config.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -6,18 +6,23 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "run": "http-server -p 8080 -c-1 dist/bhumi-rtepwa",
+    "serve": "ng build && npm run run"
   },
   "private": true,
   "dependencies": {
     "@angular/animations": "~13.3.0",
+    "@angular/cdk": "^13.3.1",
     "@angular/common": "~13.3.0",
     "@angular/compiler": "~13.3.0",
     "@angular/core": "~13.3.0",
     "@angular/forms": "~13.3.0",
+    "@angular/material": "^13.3.1",
     "@angular/platform-browser": "~13.3.0",
     "@angular/platform-browser-dynamic": "~13.3.0",
     "@angular/router": "~13.3.0",
+    "@angular/service-worker": "~13.3.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -36,4 +41,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.6.2"
   }
-}
+}

src/app/app.module.ts

@@ -1,9 +1,16 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { ServiceWorkerModule } from '@angular/service-worker';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { MatButtonModule } from "@angular/material/button";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatToolbarModule } from "@angular/material/toolbar";
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { LoginComponent } from './components/login/login.component';
 import { SignupComponent } from './components/signup/signup.component';
@@ -13,7 +20,8 @@ import { HomeComponent } from './components/home/home.component';
 import { FeedbackComponent } from './components/feedback/feedback.component';
 import { CreditsComponent } from './components/credits/credits.component';
 import { RestComponent } from './services/rest/rest/rest.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { SplashScreenComponent } from './components/splash-screen/splash-screen.component';
+import { NavbarComponent } from './components/navbar/navbar.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +33,9 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     HomeComponent,
     FeedbackComponent,
     CreditsComponent,
-    RestComponent
+    RestComponent,
+    SplashScreenComponent,
+    NavbarComponent
   ],
   imports: [
     BrowserModule,
@@ -36,7 +46,14 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
       // or after 30 seconds (whichever comes first).
       registrationStrategy: 'registerWhenStable:30000'
     }),
-    BrowserAnimationsModule
+    BrowserAnimationsModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatButtonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatToolbarModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/components/forgot-password/forgot-password.component.html

@@ -1 +1,18 @@
-<p>forgot-password works!</p>
+<app-navbar [title]="'Reset Password'"></app-navbar>
+<form ngNoForm [formGroup]="resetPasswordGroup">
+
+  <div class="reset-instructions-container">
+    <h2>Forgot password?</h2>
+    <p class="reset-instructions">Please enter your registered email to get the password reset link.</p>
+  </div>
+
+  <div>
+    <mat-form-field appearance="standard">
+      <mat-label>Email</mat-label>
+      <input matInput formControlName="email" />
+    </mat-form-field>
+  </div>
+
+  <button class="reset-password-button" mat-flat-button color="primary">Reset password</button>
+
+</form>

src/app/components/forgot-password/forgot-password.component.scss

@@ -0,0 +1,18 @@
+:host {
+  @import "src/assets/shared/common";
+
+  form {
+    .reset-instructions-container {
+      width: 100%;
+      text-align: center;
+
+      .reset-instructions {
+        color: $dark-grey;
+      }
+
+      .reset-password-button {
+        width: 100%;
+      }
+    }
+  }
+}

src/app/components/forgot-password/forgot-password.component.ts

@@ -1,13 +1,19 @@
 import { Component, OnInit } from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-forgot-password',
   templateUrl: './forgot-password.component.html',
   styleUrls: ['./forgot-password.component.scss']
 })
 export class ForgotPasswordComponent implements OnInit {
+  resetPasswordGroup: FormGroup;
 
-  constructor() { }
+  constructor(private fb: FormBuilder) {
+    this.resetPasswordGroup = fb.group({
+      email: [ '', [ Validators.required, Validators.email ]]
+    })
+  }
 
   ngOnInit(): void {
   }

src/app/components/login/login.component.html

@@ -1 +1,29 @@
-<p>login works!</p>
+<app-navbar [title]="'Login'"></app-navbar>
+<form ngNoForm [formGroup]="loginForm">
+  <div>
+    <mat-form-field appearance="standard">
+      <mat-label>Email</mat-label>
+      <input matInput formControlName="email" required/>
+    </mat-form-field>
+  </div>
+
+  <div>
+    <mat-form-field appearance="standard">
+      <mat-label>Password</mat-label>
+      <input matInput [type]="hide ? 'password' : 'text'" [formControlName]="'password'" formControlName="password" required/>
+      <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
+        <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
+      </button>
+    </mat-form-field>
+  </div>
+
+  <a class="forgot-password-link" [routerLink]="['/forgot-password']">Forgot password?</a>
+
+  <div class="buttons-container">
+    <button mat-flat-button color="primary">Sign in</button>
+
+    <button mat-flat-button color="primary" [routerLink]="['/signup']">Sign up</button>
+  </div>
+
+  <a class="learn-more-link" href="https://rte25.bhumi.ngo" target="_blank" rel="noopener noreferrer">Click here to learn more</a>
+</form>