added fpassword,login,register, and routing components

angularapp/src/app/app-routing.module.ts

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { RegisterComponent } from './login/register/register.component';
+import { LoginComponent } from './login/login.component';
+import { ForgottpasswordComponent } from './login/forgottpassword/forgottpassword.component';
+import { DevExtremeModule } from 'devextreme-angular';
+import { UsersTableComponent } from './users/users-table/users-table.component';
+import { AddUserComponent } from './users/add-user/add-user.component';
+import { CommonModule } from '@angular/common';
+
+
+
+
+
+const routes: Routes = [
+    {
+        path: 'home',
+        component: UsersTableComponent,
+      },
+  {
+    path: 'register',
+    component: RegisterComponent,
+  },
+  {
+    path: 'login',
+    component: LoginComponent,
+  },
+  {
+    path: 'add-user',
+    component: AddUserComponent,
+  },
+  {
+    path: '**',
+    redirectTo: 'home'
+  }
+];
+
+@NgModule({
+    imports: [RouterModule.forRoot(routes, { useHash: true }), DevExtremeModule, CommonModule],
+    exports: [RouterModule],
+    declarations: [LoginComponent,RegisterComponent,ForgottpasswordComponent]
+})
+export class AppRoutingModule { }

angularapp/src/app/app.component.html

@@ -1,7 +1,9 @@
 <div class="container">
   <app-navbar></app-navbar>
   <div style="width: 90%; margin-left: auto; margin-right: auto;">
-    <app-users-table></app-users-table>
-    <app-add-user></app-add-user>
+    <!--<app-users-table></app-users-table>
+    <app-add-user></app-add-user>-->
+    <router-outlet></router-outlet>
+
   </div>
 </div>

angularapp/src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { DxButtonModule, DxDataGridModule, DxDateBoxModule, DxFormModule } from 'devextreme-angular';
+import { DevExtremeModule} from 'devextreme-angular';
 import { AppComponent } from './app.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { UsersTableComponent } from './users/users-table/users-table.component';
@@ -9,13 +9,17 @@ import { DatePipe } from '@angular/common';
 import { AddUserComponent } from './users/add-user/add-user.component';
 import { FormsModule } from '@angular/forms';
 import { NavbarComponent } from './navbar/navbar.component';
+import { LoginComponent } from './login/login.component';
+import { RegisterComponent } from './login/register/register.component';
+import { ForgottpasswordComponent } from './login/forgottpassword/forgottpassword.component';
+import { AppRoutingModule } from './app-routing.module';
 
 @NgModule({
   declarations: [
     AppComponent,
     UsersTableComponent,
     AddUserComponent,
-    NavbarComponent
+    NavbarComponent,
   ],
   imports: [
     // Angular
@@ -23,12 +27,10 @@ import { NavbarComponent } from './navbar/navbar.component';
     HttpClientModule,
     NgbModule,
     FormsModule,
+    AppRoutingModule,
 
     // Devextreme
-    DxButtonModule,
-    DxDataGridModule,
-    DxFormModule,
-    DxDateBoxModule
+    DevExtremeModule
   ],
   providers: [DatePipe],
   bootstrap: [AppComponent]

angularapp/src/app/login/forgottpassword/forgottpassword.component.html

@@ -0,0 +1 @@
+<p>forgottpassword works!</p>

angularapp/src/app/login/forgottpassword/forgottpassword.component.spec.ts

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

angularapp/src/app/login/forgottpassword/forgottpassword.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-forgottpassword',
+  templateUrl: './forgottpassword.component.html',
+  styleUrls: ['./forgottpassword.component.less']
+})
+export class ForgottpasswordComponent {
+
+}

angularapp/src/app/login/login.component.html

@@ -0,0 +1,49 @@
+<div class="wrapper">
+<form class="login-form" (submit)="onSubmit($event)">
+  <dx-form [formData]="formData" [disabled]="loading">
+
+    <dxi-item dataField="email" editorType="dxTextBox"
+              [editorOptions]="{ stylingMode: 'filled', placeholder: 'Email', mode: 'email' }">
+      <dxi-validation-rule type="required" message="Email is required"></dxi-validation-rule>
+      <dxi-validation-rule type="email" message="Email is invalid"></dxi-validation-rule>
+      <dxo-label [visible]="false"></dxo-label>
+    </dxi-item>
+
+    <dxi-item dataField="password" editorType="dxTextBox"
+              [editorOptions]="{ stylingMode: 'filled', placeholder: 'Password', mode: 'password' }">
+      <dxi-validation-rule type="required" message="Password is required"></dxi-validation-rule>
+      <dxo-label [visible]="false"></dxo-label>
+    </dxi-item>
+
+    <dxi-item dataField="rememberMe" editorType="dxCheckBox"
+              [editorOptions]="{ text: 'Remember me', elementAttr: { class: 'form-text' } }">
+      <dxo-label [visible]="false"></dxo-label>
+    </dxi-item>
+
+    <dxi-item itemType="button">
+      <dxo-button-options width="100%" type="default" [useSubmitBehavior]="true" [template]="'signInTemplate'">
+      </dxo-button-options>
+    </dxi-item>
+
+    <dxi-item>
+      <div class="link">
+        <a routerLink="/reset-password">Forgot password?</a>
+      </div>
+    </dxi-item>
+
+    <dxi-item itemType="button">
+      <dxo-button-options text="Create an account" width="100%" [onClick]="onCreateAccountClick"></dxo-button-options>
+    </dxi-item>
+
+    <ng-container *dxTemplate="let item of 'signInTemplate'">
+      <span class="dx-button-text">
+        <ng-container *ngIf="loading; else notLoading">
+          <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
+        </ng-container>
+        <ng-template #notLoading>Sign In</ng-template>
+      </span>
+    </ng-container>
+
+  </dx-form>
+</form>
+</div>

angularapp/src/app/login/login.component.less

@@ -0,0 +1,33 @@
+.login-form {
+    margin-top: 30px;
+    .link {
+      
+      font-size: 16px;
+      font-style: normal;
+  
+      a {
+        text-decoration: none;
+      }
+    }
+  
+    ::ng-deep .form-text {
+      margin: 10px 0;
+
+    }
+  }
+.wrapper{
+    display: inline-block;
+    width: 32%; /* of wrapper width */
+    margin: auto;
+    text-align: left;
+}
+
+@media (max-width: 991px){
+    .wrapper{
+        display: inline-block;
+        width: 100%; /* of wrapper width */
+        margin: auto;
+        text-align: left;
+        margin-top: 50px;
+    }  
+}

angularapp/src/app/login/login.component.spec.ts

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

angularapp/src/app/login/login.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import notify from 'devextreme/ui/notify';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.less']
+})
+export class LoginComponent {
+  loading = false;
+  formData: any = {};
+
+  constructor(private router: Router) { }
+  //constructor(private authService: AuthService, private router: Router) { }
+
+  async onSubmit(e:any) {
+    e.preventDefault();
+    const { email, password } = this.formData;
+    this.loading = true;
+
+    //const result = await this.authService.logIn(email, password);
+    //if (!result.isOk) {
+    //  this.loading = false;
+    //  notify(result.message, 'error', 2000);
+    //}
+  }
+
+  onCreateAccountClick = () => {
+    this.router.navigate(['/register']);
+  }
+}

angularapp/src/app/login/register/register.component.html

@@ -0,0 +1,54 @@
+<form class="create-account-form" (submit)="onSubmit($event)">
+    <dx-form [formData]="formData" [disabled]="loading">
+  
+      <dxi-item dataField="email" editorType="dxTextBox"
+        [editorOptions]="{ stylingMode: 'filled', placeholder: 'Email', mode: 'email' }">
+        <dxi-validation-rule type="required" message="Email is required"></dxi-validation-rule>
+        <dxi-validation-rule type="email" message="Email is invalid"></dxi-validation-rule>
+        <dxo-label [visible]="false"></dxo-label>
+      </dxi-item>
+  
+      <dxi-item dataField="password" editorType="dxTextBox"
+        [editorOptions]="{ stylingMode: 'filled', placeholder: 'Password', mode: 'password' }">
+        <dxi-validation-rule type="required" message="Password is required"></dxi-validation-rule>
+        <dxo-label [visible]="false"></dxo-label>
+      </dxi-item>
+  
+      <dxi-item dataField="confirmedPassword" editorType="dxTextBox"
+        [editorOptions]="{ stylingMode: 'filled', placeholder: 'Confirm Password', mode: 'password' }">
+        <dxi-validation-rule type="required" message="Password is required"></dxi-validation-rule>
+        <dxi-validation-rule type="custom" message="Passwords do not match" [validationCallback]="confirmPassword">
+        </dxi-validation-rule>
+        <dxo-label [visible]="false"></dxo-label>
+      </dxi-item>
+  
+      <dxi-item>
+        <div class='policy-info'>
+          By creating an account, you agree to the <a routerLink="#">Terms of Service</a> and <a routerLink="#">Privacy
+            Policy</a>
+        </div>
+      </dxi-item>
+  
+      <dxi-item itemType="button">
+        <dxo-button-options width="100%" type="default" [useSubmitBehavior]="true" [template]="'createAccountTemplate'">
+        </dxo-button-options>
+      </dxi-item>
+  
+      <dxi-item>
+        <div class="login-link">
+          Have an account? <a routerLink="/login">Sign In</a>
+        </div>
+      </dxi-item>
+  
+      <ng-container *dxTemplate="let item of 'createAccountTemplate'">
+        <span class="dx-button-text">
+          <ng-container *ngIf="loading; else notLoading">
+            <dx-load-indicator width="24px" height="24px" [visible]="true"></dx-load-indicator>
+          </ng-container>
+  
+          <ng-template #notLoading>Create a new account</ng-template>
+        </span>
+      </ng-container>
+  
+    </dx-form>
+  </form>

angularapp/src/app/login/register/register.component.spec.ts

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

angularapp/src/app/login/register/register.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.less']
+})
+export class RegisterComponent {
+  loading = false;
+  formData: any = {};
+
+  //constructor(private authService: AuthService, private router: Router) { }
+  constructor() { }
+
+  async onSubmit(e: any) {
+    e.preventDefault();
+    const { email, password } = this.formData;
+    this.loading = true;
+
+    //const result = await this.authService.createAccount(email, password);
+    this.loading = false;
+
+    /*if (result.isOk) {
+      this.router.navigate(['/login-form']);
+    } else {
+      notify(result.message, 'error', 2000);
+    }
+    */
+  }
+
+  confirmPassword = (e: { value: string }) => {
+    return e.value === this.formData.password;
+  }
+}
+

angularapp/src/app/navbar/navbar.component.html

@@ -13,7 +13,10 @@
           <a class="nav-link" href="#">User List</a>
         </li>
         <li class="nav-item">
-          <a class="nav-link" href="#">Add User</a>
+          <a class="nav-link" href="#/add-user">Add User</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="#/login">Login</a>
         </li>
       </ul>
     </div>