diff --git a/angularapp/src/app/app-routing.module.ts b/angularapp/src/app/app-routing.module.ts new file mode 100644 index 0000000..372da9b --- /dev/null +++ b/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 { } \ No newline at end of file diff --git a/angularapp/src/app/app.component.html b/angularapp/src/app/app.component.html index e0e5279..e9fa002 100644 --- a/angularapp/src/app/app.component.html +++ b/angularapp/src/app/app.component.html @@ -1,7 +1,9 @@
- - + + +
diff --git a/angularapp/src/app/app.module.ts b/angularapp/src/app/app.module.ts index 1fa9c25..78bf623 100644 --- a/angularapp/src/app/app.module.ts +++ b/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] diff --git a/angularapp/src/app/login/forgottpassword/forgottpassword.component.html b/angularapp/src/app/login/forgottpassword/forgottpassword.component.html new file mode 100644 index 0000000..15b2057 --- /dev/null +++ b/angularapp/src/app/login/forgottpassword/forgottpassword.component.html @@ -0,0 +1 @@ +

forgottpassword works!

diff --git a/angularapp/src/app/login/forgottpassword/forgottpassword.component.less b/angularapp/src/app/login/forgottpassword/forgottpassword.component.less new file mode 100644 index 0000000..e69de29 diff --git a/angularapp/src/app/login/forgottpassword/forgottpassword.component.spec.ts b/angularapp/src/app/login/forgottpassword/forgottpassword.component.spec.ts new file mode 100644 index 0000000..5339290 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ForgottpasswordComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ForgottpasswordComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angularapp/src/app/login/forgottpassword/forgottpassword.component.ts b/angularapp/src/app/login/forgottpassword/forgottpassword.component.ts new file mode 100644 index 0000000..0c0c770 --- /dev/null +++ b/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 { + +} diff --git a/angularapp/src/app/login/login.component.html b/angularapp/src/app/login/login.component.html new file mode 100644 index 0000000..51a01e9 --- /dev/null +++ b/angularapp/src/app/login/login.component.html @@ -0,0 +1,49 @@ +
+ +
\ No newline at end of file diff --git a/angularapp/src/app/login/login.component.less b/angularapp/src/app/login/login.component.less new file mode 100644 index 0000000..2731ae1 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/angularapp/src/app/login/login.component.spec.ts b/angularapp/src/app/login/login.component.spec.ts new file mode 100644 index 0000000..10eca24 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LoginComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angularapp/src/app/login/login.component.ts b/angularapp/src/app/login/login.component.ts new file mode 100644 index 0000000..9a755aa --- /dev/null +++ b/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']); + } +} diff --git a/angularapp/src/app/login/register/register.component.html b/angularapp/src/app/login/register/register.component.html new file mode 100644 index 0000000..43a354d --- /dev/null +++ b/angularapp/src/app/login/register/register.component.html @@ -0,0 +1,54 @@ + \ No newline at end of file diff --git a/angularapp/src/app/login/register/register.component.less b/angularapp/src/app/login/register/register.component.less new file mode 100644 index 0000000..e69de29 diff --git a/angularapp/src/app/login/register/register.component.spec.ts b/angularapp/src/app/login/register/register.component.spec.ts new file mode 100644 index 0000000..f975533 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ RegisterComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(RegisterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/angularapp/src/app/login/register/register.component.ts b/angularapp/src/app/login/register/register.component.ts new file mode 100644 index 0000000..fc25b43 --- /dev/null +++ b/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; + } +} + diff --git a/angularapp/src/app/navbar/navbar.component.html b/angularapp/src/app/navbar/navbar.component.html index 3008c97..89085d3 100644 --- a/angularapp/src/app/navbar/navbar.component.html +++ b/angularapp/src/app/navbar/navbar.component.html @@ -13,7 +13,10 @@ User List
  • - Add User + Add User +
    • +
  • + Login