Cutlery/Kyoo
1
0
Fork 0
mirror of https://github.com/zoriya/Kyoo.git synced 2025-06-23 15:30:34 -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 {MatTabsModule} from "@angular/material/tabs";
import {PasswordValidator} from "./misc/password-validator";
import {MatCheckboxModule} from "@angular/material/checkbox";
@NgModule({
declarations: [
@ -64,7 +65,8 @@ import {PasswordValidator} from "./misc/password-validator";
MatInputModule,
MatFormFieldModule,
FormsModule,
MatTabsModule
MatTabsModule,
MatCheckboxModule
],
providers: [],
bootstrap: [AppComponent]

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

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

30
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 {ActivatedRoute, Router} from "@angular/router";
@Component({
selector: 'app-login',
@ -8,15 +9,33 @@ import {AuthService} from "../services/auth.service";
})
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: ""};
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()
{
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()
@ -24,10 +43,9 @@ export class LoginComponent
this.authService.register(this.signinInformation)
.subscribe(result =>
{
console.log("Sucess: " + result);
this.useOTAC(result);
}, 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 {HttpClient} from "@angular/common/http";
import { catchError } from 'rxjs/operators';
import {EMPTY} from "rxjs";
import {EMPTY, Observable} from "rxjs";
import {MatSnackBar} from "@angular/material/snack-bar";
@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);
this.snackBar.open(`An unknown error occured: ${error.message}.`, null, { horizontalPosition: "left", panelClass: ['snackError'], duration: 2500 });