Merge branch '24-password-input-component' into 'master'

Resolve "Legg til password-input som shared component i frontend" and "Legg til /logout route i frontend"

Closes #25 and #24

See merge request tdt4140-group-58/spring2021-sellpoint!17

client/src/app/app.component.html

@@ -7,6 +7,7 @@
 		<a href="/register">/register</a>
 		<a href="/login">/login</a>
 		<a href="/profile">/profile</a>
+		<a href="/logout">/logout</a>
 	</nav>
 </div>
 <div class="splash">

client/src/app/authentication/auth.service.ts

@@ -79,7 +79,7 @@ export class AuthService {
    */
   logout() {
     localStorage.removeItem("token");
-    this.router.navigateByUrl("/");
+    this.router.navigateByUrl("/")
   }
 
   /**

client/src/app/shared/password-input/password-input.component.html

+<label>
+    {{label}}
+
+    <input  
+    [type]="isVisible ? 'text' : 'password'"
+    [placeholder]="placeholder"
+    [(ngModel)]="inputModel" 
+    (ngModelChange)="inputModelChange.emit(inputModel)" 
+    (change)="change.emit($event)"
+    (focus)="focus.emit($event)"
+    (blur)="blur.emit($event)">
+    <app-button (click)="togglePasswordVisible()" [text]="toggleText"></app-button>
+</label>
\ No newline at end of file

client/src/app/shared/password-input/password-input.component.scss

+input{
+    padding: 5px;
+}
\ No newline at end of file

client/src/app/shared/password-input/password-input.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+
+import { PasswordInputComponent } from './password-input.component';
+
+describe('PasswordInputComponent', () => {
+  let component: PasswordInputComponent;
+  let fixture: ComponentFixture<PasswordInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PasswordInputComponent ],
+      imports: [ FormsModule ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PasswordInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/shared/password-input/password-input.component.ts

+import { Component, EventEmitter, Input, Output  } from '@angular/core';
+
+@Component({
+  selector: 'app-password-input',
+  templateUrl: './password-input.component.html',
+  styleUrls: ['./password-input.component.scss']
+})
+export class PasswordInputComponent {
+
+  isVisible: boolean = false;
+  toggleText: string = "show";
+
+  @Input()
+  label: string = "";
+
+  @Input()
+  inputModel: string;
+
+  @Input()
+  placeholder: string = "";
+
+  @Output()
+  inputModelChange = new EventEmitter<string>();
+
+  @Output()
+  change = new EventEmitter();
+
+  @Output()
+  focus = new EventEmitter();
+
+  @Output()
+  blur = new EventEmitter();
+
+  constructor() { }
+
+  togglePasswordVisible() {
+    this.isVisible = !this.isVisible;
+    this.toggleText = this.isVisible ? "hide" : "show";
+  }
+
+}

client/src/app/shared/shared.module.ts

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { TextInputComponent } from './text-input/text-input.component';
 import { FormsModule } from '@angular/forms';
+import { TextInputComponent } from './text-input/text-input.component';
+import { PasswordInputComponent } from './password-input/password-input.component';
 import { NumberInputComponent } from './number-input/number-input.component';
 import { ButtonComponent } from './button/button.component';
 import { SelectComponent } from './select/select.component';
@@ -12,11 +13,13 @@ import { SelectComponent } from './select/select.component';
     TextInputComponent,
     NumberInputComponent,
     ButtonComponent,
-    SelectComponent
+    SelectComponent,
+    PasswordInputComponent
   ],
   exports: [
     TextInputComponent,
     NumberInputComponent,
+    PasswordInputComponent,
     ButtonComponent,
     SelectComponent
   ],

client/src/app/users/user-login-form/user-login-form.component.html

@@ -3,7 +3,7 @@
 
 	<app-text-input [(inputModel)]="username" label="Brukernavn" (blur)="checkForm()"></app-text-input>
 
-	<app-text-input [(inputModel)]="password" label="Passord" (blur)="checkForm()"></app-text-input>
+	<app-password-input [(inputModel)]="password" label="Passord" (blur)="checkForm()"></app-password-input>
 
 	<p>{{statusMessage}}</p>
 

client/src/app/users/user-logout/user-logout.component.html

+<p>user-logout works!</p>

client/src/app/users/user-logout/user-logout.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { UserLogoutComponent } from './user-logout.component';
+
+describe('UserLogoutComponent', () => {
+  let component: UserLogoutComponent;
+  let fixture: ComponentFixture<UserLogoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ UserLogoutComponent ],
+      imports: [ HttpClientTestingModule, RouterTestingModule ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserLogoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/users/user-logout/user-logout.component.ts

+import { Component, OnInit } from '@angular/core';
+import { AuthService } from 'src/app/authentication/auth.service';
+
+@Component({
+  selector: 'app-user-logout',
+  templateUrl: './user-logout.component.html',
+  styleUrls: ['./user-logout.component.scss']
+})
+export class UserLogoutComponent implements OnInit {
+
+  constructor(private authService: AuthService) { }
+
+  ngOnInit(): void {
+    this.authService.logout();
+  }
+
+}

client/src/app/users/user-registration-form/user-registration-form.component.html

@@ -5,7 +5,9 @@
 
 	<app-text-input [(inputModel)]="email" label="Epost" (blur)="checkForm()"></app-text-input>
 
-	<app-text-input [(inputModel)]="password" label="Passord" (blur)="checkForm()"></app-text-input>
+	<app-password-input [(inputModel)]="password" label="Passord" (blur)="checkForm()"></app-password-input>
+
+	<app-password-input [(inputModel)]="confirm_password" label="Bekreft passord" (blur)="checkForm()"></app-password-input>
 
 	<p>{{statusMessage}}</p>
 

client/src/app/users/user-registration-form/user-registration-form.component.ts

@@ -13,6 +13,7 @@ export class UserRegistrationFormComponent implements OnInit {
   username: string = "";
   email: string = "";
   password: string = "";
+  confirm_password: string = "";
 
   statusMessage: string = "";
 
@@ -37,6 +38,14 @@ export class UserRegistrationFormComponent implements OnInit {
       this.setStatusMessage("Passordet kan ikke være tom");
       return false;
     }
+    else if (this.confirm_password == "") {
+      this.setStatusMessage("Passordet kan ikke være tom");
+      return false;
+    }
+    else if (this.confirm_password !== this.password) {
+      this.setStatusMessage("Passordene gitt samsvarer ikke");
+      return false;
+    }
 
     this.setStatusMessage("");
     return true;
@@ -56,7 +65,7 @@ export class UserRegistrationFormComponent implements OnInit {
       // Adds user to database and redirects to the homepage afterwards
       this.authService.registerUser(newUser).then(status => {
         console.log("User was added: " + JSON.stringify(status));
-        this.router.navigateByUrl("/");
+        this.router.navigateByUrl("/login");
       }).catch(error => {
         console.log("Error adding user: " + error);
       });

client/src/app/users/user.module.ts

@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { UserRegistrationFormComponent } from './user-registration-form/user-registration-form.component';
 import { UserProfileComponent } from './user-profile/user-profile.component';
 import { UserLoginFormComponent } from './user-login-form/user-login-form.component';
+import { UserLogoutComponent } from './user-logout/user-logout.component';
 
 
 
@@ -12,7 +13,8 @@ import { UserLoginFormComponent } from './user-login-form/user-login-form.compon
   declarations: [
     UserRegistrationFormComponent,
     UserProfileComponent,
-    UserLoginFormComponent
+    UserLoginFormComponent,
+    UserLogoutComponent
   ],
   imports: [
     CommonModule,