diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 5f3715f..d68e95f 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -1,3 +1,4 @@ +import { PasswordComponent } from './pages/password/password.component'; import { AuthGuard } from './services/auth-guard.service'; import { DomainsComponent } from './pages/domains/domains.component'; import { NgModule } from '@angular/core'; @@ -24,6 +25,10 @@ const routes: Routes = [ path: 'domains', component: DomainsComponent }, + { + path: 'password', + component: PasswordComponent + }, { path: '**', redirectTo: '/' diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index aa80da4..b73ded1 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,5 +1,6 @@ Domains + Password Logout diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 14516a8..b5f7ce3 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -1,3 +1,4 @@ +import { PasswordOperation } from './operations/password.operations'; import { AuthGuard } from './services/auth-guard.service'; import { FocusDirective } from './utils/Focus.directive'; import { BrowserModule } from '@angular/platform-browser'; @@ -19,6 +20,7 @@ import { StateService } from './services/state.service'; import { HttpService } from './services/http.service'; import { SessionOperation } from './operations/session.operation'; import { DomainsComponent } from './pages/domains/domains.component'; +import { PasswordComponent } from './pages/password/password.component'; @NgModule({ declarations: [ @@ -32,7 +34,8 @@ import { DomainsComponent } from './pages/domains/domains.component'; ModalContainerComponent, LoginComponent, DomainsComponent, - FocusDirective + FocusDirective, + PasswordComponent ], imports: [ BrowserModule, @@ -44,6 +47,7 @@ import { DomainsComponent } from './pages/domains/domains.component'; StateService, HttpService, SessionOperation, + PasswordOperation, AuthGuard ], bootstrap: [AppComponent] diff --git a/frontend/src/app/operations/password.operations.ts b/frontend/src/app/operations/password.operations.ts new file mode 100644 index 0000000..828e11b --- /dev/null +++ b/frontend/src/app/operations/password.operations.ts @@ -0,0 +1,24 @@ +import { UserApitype } from './../apitypes/User.apitype'; +import { Injectable } from '@angular/core'; +import { HttpService } from '../services/http.service'; +import { StateService } from '../services/state.service'; +import { SessionApitype } from '../apitypes/Session.apitype'; + +@Injectable() +export class PasswordOperation { + + constructor(private http: HttpService, private gs: StateService) { } + + public async changePassword(password: string): Promise { + try { + await this.http.put('/users/me', { + password: password + }); + + return true; + } catch (e) { + console.error(e); + return false; + } + } +} diff --git a/frontend/src/app/operations/session.operation.ts b/frontend/src/app/operations/session.operation.ts index 443fe8d..0b80022 100644 --- a/frontend/src/app/operations/session.operation.ts +++ b/frontend/src/app/operations/session.operation.ts @@ -2,7 +2,6 @@ import { UserApitype } from './../apitypes/User.apitype'; import { Injectable } from '@angular/core'; import { HttpService } from '../services/http.service'; import { StateService } from '../services/state.service'; -import { AxiosResponse, AxiosError } from 'axios'; import { SessionApitype } from '../apitypes/Session.apitype'; @Injectable() diff --git a/frontend/src/app/pages/login/login.component.ts b/frontend/src/app/pages/login/login.component.ts index 862db51..40886ce 100644 --- a/frontend/src/app/pages/login/login.component.ts +++ b/frontend/src/app/pages/login/login.component.ts @@ -11,12 +11,12 @@ import { SessionOperation } from '../../operations/session.operation'; styleUrls: ['./login.component.scss'] }) export class LoginComponent { - loginForm: FormGroup; + public loginForm: FormGroup; - loginError = false; + public loginError = false; constructor(private router: Router, private fb: FormBuilder, public gs: StateService, - public sessions: SessionOperation, private route: ActivatedRoute) { + private sessions: SessionOperation, private route: ActivatedRoute) { this.createForm(); } diff --git a/frontend/src/app/pages/password/password.component.html b/frontend/src/app/pages/password/password.component.html new file mode 100644 index 0000000..b0d727a --- /dev/null +++ b/frontend/src/app/pages/password/password.component.html @@ -0,0 +1,29 @@ +
+
+

Change your password:

+ +
+
+ + +
+ Password is required. +
+
+ +
+ + +
+ Passwords do not match. +
+
+ + + Password change sucessfull. + + + +
+
+
\ No newline at end of file diff --git a/frontend/src/app/pages/password/password.component.scss b/frontend/src/app/pages/password/password.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/app/pages/password/password.component.ts b/frontend/src/app/pages/password/password.component.ts new file mode 100644 index 0000000..dcaf24c --- /dev/null +++ b/frontend/src/app/pages/password/password.component.ts @@ -0,0 +1,32 @@ +import { PasswordOperation } from './../../operations/password.operations'; +import { PasswordValidationUtil } from './../../utils/PasswordValidation.util'; +import { FormGroup, Validators, FormBuilder } from '@angular/forms'; +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-password', + templateUrl: './password.component.html', + styleUrls: ['./password.component.scss'] +}) +export class PasswordComponent { + + public passwordForm: FormGroup; + + public changeSuccessfull = false; + + constructor(private fb: FormBuilder, private password: PasswordOperation) { + this.createForm(); + } + + private createForm() { + this.passwordForm = this.fb.group({ + password: ['', Validators.required], + password2: ['', Validators.required] + }, { validator: PasswordValidationUtil.matchPassword }); + } + + public async onSubmit() { + this.changeSuccessfull = await this.password.changePassword(this.passwordForm.value.password); + setTimeout(() => this.changeSuccessfull = false, 3000); + } +} diff --git a/frontend/src/app/services/http.service.ts b/frontend/src/app/services/http.service.ts index ef16a45..9929c0a 100644 --- a/frontend/src/app/services/http.service.ts +++ b/frontend/src/app/services/http.service.ts @@ -16,7 +16,6 @@ export class HttpService { } public async get(url: string, params: Object = {}): Promise { - console.log('Get request'); const parts = []; for (const [k, v] of Object.entries(params)) { let value; diff --git a/frontend/src/app/utils/PasswordValidation.util.ts b/frontend/src/app/utils/PasswordValidation.util.ts new file mode 100644 index 0000000..b3ca832 --- /dev/null +++ b/frontend/src/app/utils/PasswordValidation.util.ts @@ -0,0 +1,14 @@ +import { AbstractControl } from '@angular/forms'; + +export class PasswordValidationUtil { + + static matchPassword(ac: AbstractControl) { + const password = ac.get('password').value; + const password2 = ac.get('password2').value; + if (password !== password2) { + ac.get('password2').setErrors({ matchPassword: true }); + } else { + return null; + } + } +}