Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-07-07 10:14:13 -04:00
Code Issues Packages Projects Releases Wiki Activity

Implementing the login

Browse Source
This commit is contained in:
Zoe Roux 2020-03-07 03:22:49 +01:00
parent 93c506a3db
commit 45f2b5b641
4 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.module.ts
View File

@ -29,6 +29,7 @@ import { MatInputModule } from "@angular/material/input";
import { MatFormFieldModule } from "@angular/material/form-field"; import { MatFormFieldModule } from "@angular/material/form-field";
import {MatTabsModule} from "@angular/material/tabs"; import {MatTabsModule} from "@angular/material/tabs";
import {PasswordValidator} from "./misc/password-validator"; import {PasswordValidator} from "./misc/password-validator";
import {MatCheckboxModule} from "@angular/material/checkbox";
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -64,7 +65,8 @@ import {PasswordValidator} from "./misc/password-validator";
MatInputModule, MatInputModule,
MatFormFieldModule, MatFormFieldModule,
FormsModule, FormsModule,
MatTabsModule MatTabsModule,
MatCheckboxModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] bootstrap: [AppComponent]

35
src/app/login/login.component.html
View File

@ -3,38 +3,37 @@
<mat-tab-group mat-stretch-tabs> <mat-tab-group mat-stretch-tabs>
<mat-tab label="Login"> <mat-tab label="Login">
<br/> <br/>
<mat-card-content> <form #loginForm="ngForm" (ngSubmit)="login()">
<form #loginForm="ngForm" (ngSubmit)="login()"> <mat-card-content>
<mat-form-field appearance="outline" class="w-75"> <mat-form-field appearance="outline" class="w-75">
<mat-label>Email</mat-label> <mat-label>Username</mat-label>
<input matInput name="loginEmail" #loginEmail="ngModel" [(ngModel)]="loginInformation.email" required email> <input matInput name="loginUsername" #loginUsername="ngModel" [(ngModel)]="loginInformation.username" required>
<mat-error *ngIf="loginEmail.hasError('required')"> <mat-error *ngIf="loginUsername.hasError('required')">
An email is <strong>required</strong> An username is <strong>required</strong>
</mat-error>
<mat-error *ngIf="loginEmail.hasError('email')">
Please enter a valid email
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<br/> <br/>
<br/> <br/>
<mat-form-field appearance="outline" class="w-75"> <mat-form-field appearance="outline" class="w-75">
<mat-label>Password</mat-label> <mat-label>Password</mat-label>
<input matInput name="loginPassword" #loginPassword="ngModel" [(ngModel)]="loginInformation.password" [type]="hidePassword ? 'password' : 'text'" required passwordValidator> <input matInput name="loginPassword" #loginPassword="ngModel" [(ngModel)]="loginInformation.password" [type]="hidePassword ? 'password' : 'text'" required passwordValidator>
<button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword"> <button mat-icon-button matSuffix type="button" (click)="hidePassword = !hidePassword;" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
<mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon> <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
</button> </button>
<mat-error *ngIf="loginPassword.hasError('required')"> <mat-error *ngIf="loginPassword.hasError('required')">
A password is <strong>required</strong> A password is <strong>required</strong>
</mat-error> </mat-error>
<mat-error *ngIf="loginPassword.hasError('passwordError')"> <mat-error *ngIf="loginPassword.hasError('passwordError')">
Error: {{signinPassword.getError("passwordError")["error"]}} Error: {{loginPassword.getError("passwordError")["error"]}}
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</form> <br/>
</mat-card-content> <mat-checkbox class="pl-3" [(ngModel)]="loginInformation.stayLoggedIn" name="rememberme">Stay logged in</mat-checkbox>
<div fxFlexAlign="end" align="end" style="text-align: end"> </mat-card-content>
<button mat-button type="submit" [disabled]="!loginForm.valid">Login</button> <div fxFlexAlign="end" align="end" style="text-align: end">
</div> <button mat-button type="submit" [disabled]="!loginForm.valid">Login</button>
</div>
</form>
</mat-tab> </mat-tab>
<mat-tab label="Signin"> <mat-tab label="Signin">
<br/> <br/>
@ -64,7 +63,7 @@
<mat-form-field appearance="outline" class="w-75"> <mat-form-field appearance="outline" class="w-75">
<mat-label>Password</mat-label> <mat-label>Password</mat-label>
<input matInput name="signinPassword" #signinPassword="ngModel" [(ngModel)]="signinInformation.password" [type]="hidePassword ? 'password' : 'text'" required passwordValidator> <input matInput name="signinPassword" #signinPassword="ngModel" [(ngModel)]="signinInformation.password" [type]="hidePassword ? 'password' : 'text'" required passwordValidator>
<button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword"> <button mat-icon-button matSuffix type="button" (click)="hidePassword = !hidePassword;" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
<mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon> <mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
</button> </button>
<mat-error *ngIf="signinPassword.hasError('required')"> <mat-error *ngIf="signinPassword.hasError('required')">

28
src/app/login/login.component.ts
View File

@ -1,5 +1,6 @@
import { Component, OnInit } from '@angular/core'; import { Component } from '@angular/core';
import {AuthService} from "../services/auth.service"; import {AuthService} from "../services/auth.service";
import {ActivatedRoute, Router} from "@angular/router";
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
@ -8,15 +9,33 @@ import {AuthService} from "../services/auth.service";
}) })
export class LoginComponent export class LoginComponent
{ {
loginInformation: {email: string, password: string} = {email: "", password: ""}; loginInformation: {username: string, password: string, stayLoggedIn: boolean} = {username: "", password: "", stayLoggedIn: false};
signinInformation: {email: string, username: string, password: string} = {email: "", username: "", password: ""}; signinInformation: {email: string, username: string, password: string} = {email: "", username: "", password: ""};
hidePassword: boolean = true; hidePassword: boolean = true;
redirectURI: string = "/";
constructor(private authService: AuthService) { } constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute)
{
if (this.route.snapshot.queryParams["redirectURI"])
this.redirectURI = this.route.snapshot.queryParams["redirectURI"];
if (this.route.snapshot.queryParams["otac"])
this.useOTAC(this.route.snapshot.queryParams["otac"]);
}
async login() async login()
{ {
this.authService.login(this.loginInformation)
.subscribe(() =>
{
this.router.navigateByUrl(this.redirectURI);
}, error => {
console.log("Login error: " + error);
});
}
useOTAC(otac: string)
{
console.log("Got an OTAC: " + otac);
} }
async signin() async signin()
@ -24,10 +43,9 @@ export class LoginComponent
this.authService.register(this.signinInformation) this.authService.register(this.signinInformation)
.subscribe(result => .subscribe(result =>
{ {
console.log("Sucess: " + result); this.useOTAC(result);
}, error => { }, error => {
console.log("Register error: " + error); console.log("Register error: " + error);
}); });
console.log("Register returned");
} }
} }

16
src/app/services/auth.service.ts
View File

@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { UserManager, UserManagerSettings, User } from 'oidc-client'; import { UserManager, UserManagerSettings, User } from 'oidc-client';
import {HttpClient} from "@angular/common/http"; import {HttpClient} from "@angular/common/http";
import { catchError } from 'rxjs/operators'; import { catchError } from 'rxjs/operators';
import {EMPTY} from "rxjs"; import {EMPTY, Observable} from "rxjs";
import {MatSnackBar} from "@angular/material/snack-bar"; import {MatSnackBar} from "@angular/material/snack-bar";
@Injectable({ @Injectable({
@ -23,14 +23,20 @@ export class AuthService
}); });
} }
login() login(loginInformation: any)
{ {
return this._userManager.signinRedirect(); return this.http.post("/api/account/login", loginInformation).pipe(catchError((error =>
{
console.log(error.status + " - " + error.message);
this.snackBar.open(`An unknown error occured: ${error.message}.`, null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });
return EMPTY;
})));
} }
register(userRegistration: any) register(userRegistration: any) : Observable<string>
{ {
return this.http.post("/api/account/register", userRegistration).pipe(catchError((error => // @ts-ignore
return this.http.post<string>("/api/account/register", userRegistration, {responseType: "text"}).pipe(catchError((error =>
{ {
console.log(error.status + " - " + error.message); console.log(error.status + " - " + error.message);
this.snackBar.open(`An unknown error occured: ${error.message}.`, null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 }); this.snackBar.open(`An unknown error occured: ${error.message}.`, null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });