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

Putting the login component outsite of the SPA

Browse Source
This commit is contained in:
Zoe Roux 2020-04-12 03:31:47 +02:00
parent 6f43e3d2bd
commit 8f89f0600d
7 changed files with 31 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/auth/auth-routing.module.ts
View File

@ -1,12 +1,10 @@
import {NgModule} from '@angular/core'; import {NgModule} from '@angular/core';
import {RouterModule, Routes} from "@angular/router"; import {RouterModule, Routes} from "@angular/router";
import {UnauthorizedComponent} from "./unauthorized/unauthorized.component"; import {UnauthorizedComponent} from "./unauthorized/unauthorized.component";
import {LoginComponent} from "./login/login.component";
import {LogoutComponent} from "./logout/logout.component"; import {LogoutComponent} from "./logout/logout.component";
import {AutologinComponent} from "./autologin/autologin.component"; import {AutologinComponent} from "./autologin/autologin.component";
const routes: Routes = [ const routes: Routes = [
{path: "login", component: LoginComponent},
{path: "logout", component: LogoutComponent}, {path: "logout", component: LogoutComponent},
{path: "autologin", component: AutologinComponent}, {path: "autologin", component: AutologinComponent},
{path: "unauthorized", component: UnauthorizedComponent}, {path: "unauthorized", component: UnauthorizedComponent},

14
src/app/auth/auth.module.ts
View File

@ -5,7 +5,6 @@ import {AuthPipe} from "./misc/auth.pipe";
import {AutologinComponent} from "./autologin/autologin.component"; import {AutologinComponent} from "./autologin/autologin.component";
import {UnauthorizedComponent} from "./unauthorized/unauthorized.component"; import {UnauthorizedComponent} from "./unauthorized/unauthorized.component";
import {LogoutComponent} from "./logout/logout.component"; import {LogoutComponent} from "./logout/logout.component";
import {LoginComponent} from "./login/login.component";
import {ConfigResult, OidcConfigService, OidcSecurityService, OpenIdConfiguration, AuthModule as OidcModule} from "angular-auth-oidc-client"; import {ConfigResult, OidcConfigService, OidcSecurityService, OpenIdConfiguration, AuthModule as OidcModule} from "angular-auth-oidc-client";
import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from "@angular/common/http"; import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from "@angular/common/http";
import {AuthGuard} from "./misc/authenticated-guard.service"; import {AuthGuard} from "./misc/authenticated-guard.service";
@ -13,14 +12,8 @@ import {AuthorizerInterceptor} from "./misc/authorizer-interceptor.service";
import {MatFormFieldModule} from "@angular/material/form-field"; import {MatFormFieldModule} from "@angular/material/form-field";
import {MatIconModule} from "@angular/material/icon"; import {MatIconModule} from "@angular/material/icon";
import {MatInputModule} from "@angular/material/input"; import {MatInputModule} from "@angular/material/input";
import {AppComponent} from "../app.component";
import {MatDialogModule} from "@angular/material/dialog"; import {MatDialogModule} from "@angular/material/dialog";
import {MatButtonModule} from "@angular/material/button"; import {MatButtonModule} from "@angular/material/button";
import {BrowserModule} from "@angular/platform-browser";
import {AppRoutingModule} from "../app-routing.module";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {MatSnackBarModule} from "@angular/material/snack-bar";
import {MatProgressBarModule} from "@angular/material/progress-bar";
import {MatSelectModule} from "@angular/material/select"; import {MatSelectModule} from "@angular/material/select";
import {MatMenuModule} from "@angular/material/menu"; import {MatMenuModule} from "@angular/material/menu";
import {MatSliderModule} from "@angular/material/slider"; import {MatSliderModule} from "@angular/material/slider";
@ -42,8 +35,7 @@ export function loadConfig(oidcConfigService: OidcConfigService)
AuthPipe, AuthPipe,
AccountComponent, AccountComponent,
UnauthorizedComponent, UnauthorizedComponent,
LogoutComponent, LogoutComponent
LoginComponent,
], ],
imports: [ imports: [
CommonModule, CommonModule,
@ -95,8 +87,8 @@ export class AuthModule
client_id: 'kyoo.webapp', client_id: 'kyoo.webapp',
response_type: "code", response_type: "code",
trigger_authorization_result_event: true, trigger_authorization_result_event: true,
scope: "openid profile offline_access kyoo.read kyoo.play", scope: "openid profile",
silent_renew: false, silent_renew: true,
silent_renew_url: "/silent", silent_renew_url: "/silent",
use_refresh_token: false, use_refresh_token: false,
start_checksession: true, start_checksession: true,

93
src/app/auth/login/login.component.html
View File

@ -1,93 +0,0 @@
<div class="container d-flex justify-content-center pt-5">
<mat-card class="col-xl-5 col-md-7">
<mat-tab-group mat-stretch-tabs>
<mat-tab label="Login">
<br/>
<form #loginForm="ngForm" (ngSubmit)="login()">
<mat-card-content>
<mat-form-field appearance="outline" class="w-75">
<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 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: {{loginPassword.getError("passwordError")["error"]}}
</mat-error>
</mat-form-field>
<br/>
<mat-checkbox class="pl-3" [(ngModel)]="loginInformation.stayLoggedIn" name="rememberme">Stay logged in</mat-checkbox>
<br/>
<br/>
<mat-error *ngFor="let item of this.loginErrors;">
{{item.description}}
</mat-error>
</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="Register">
<br/>
<form #signinForm="ngForm" (ngSubmit)="register()">
<mat-card-content>
<mat-form-field appearance="outline" class="w-75">
<mat-label>Email</mat-label>
<input matInput name="signinEmail" #signinEmail="ngModel" [(ngModel)]="signinInformation.email" required email>
<mat-error *ngIf="signinEmail.hasError('required')">
An email is <strong>required</strong>
</mat-error>
<mat-error *ngIf="signinEmail.hasError('email')">
Please enter a valid email
</mat-error>
</mat-form-field>
<br/>
<br/>
<mat-form-field appearance="outline" class="w-75">
<mat-label>Username</mat-label>
<input matInput name="signinUsername" #signinUsername="ngModel" [(ngModel)]="signinInformation.username" required>
<mat-error *ngIf="signinUsername.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="signinPassword" #signinPassword="ngModel" [(ngModel)]="signinInformation.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="signinPassword.hasError('required')">
A password is <strong>required</strong>
</mat-error>
<mat-error *ngIf="signinPassword.hasError('passwordError')">
Error: {{signinPassword.getError("passwordError")["error"]}}
</mat-error>
</mat-form-field>
<mat-error *ngFor="let item of this.registerErrors;">
{{item.description}}
</mat-error>
</mat-card-content>
<div fxFlexAlign="end" align="end" style="text-align: end">
<button mat-button type="submit" [disabled]="!signinForm.valid">Sigin</button>
</div>
</form>
</mat-tab>
</mat-tab-group>
</mat-card>
</div>

0
src/app/auth/login/login.component.scss
View File

63
src/app/auth/login/login.component.ts
View File

@ -1,63 +0,0 @@
import { Component } from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {catchError} from "rxjs/operators";
import {EMPTY} from "rxjs";
import {HttpClient} from "@angular/common/http";
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent
{
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;
loginErrors: [{code: string, description: string}];
registerErrors: [{code: string, description: string}];
constructor(private router: Router, private route: ActivatedRoute, private http: HttpClient)
{
if (this.route.snapshot.queryParams["ReturnUrl"])
this.redirectURI = this.route.snapshot.queryParams["ReturnUrl"];
if (this.route.snapshot.queryParams["otac"])
this.useOTAC(this.route.snapshot.queryParams["otac"]);
}
async login()
{
this.http.post("/api/account/login", this.loginInformation).pipe(catchError((error =>
{
this.loginErrors = error.error;
return EMPTY;
}))).subscribe(() =>
{
window.location.href = this.redirectURI;
});
}
useOTAC(otac: string)
{
this.http.post("/api/account/otac-login", {"otac": otac}).pipe(catchError((error =>
{
this.registerErrors = error.error;
return EMPTY;
}))).subscribe(() =>
{
window.location.href = this.redirectURI;
});
}
async register()
{
// @ts-ignore
this.http.post<string>("/api/account/register", this.signinInformation, {responseType: "text"}).pipe(catchError((error =>
{
this.registerErrors = JSON.parse(error.error);
return EMPTY;
}))).subscribe(otac => { this.useOTAC(otac); });
}
}

1
src/styles.scss
View File

@ -33,7 +33,6 @@ h6
@import '~@angular/material/theming'; @import '~@angular/material/theming';
@include mat-core(); @include mat-core();
// Define the default theme (same as the example above).
$primary: (default: #0a1128); $primary: (default: #0a1128);
$accent: (default: #e23c00, lighter: #ff9149); $accent: (default: #e23c00, lighter: #ff9149);
$theme: mat-dark-theme($primary, $accent); $theme: mat-dark-theme($primary, $accent);

8
static/iconfont/material-icons.css
View File

@ -2,12 +2,12 @@
font-family: 'Material Icons'; font-family: 'Material Icons';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */ src: url(/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'), src: local('Material Icons'),
local('MaterialIcons-Regular'), local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'), url(/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff'), url(/iconfont/MaterialIcons-Regular.woff) format('woff'),
url(MaterialIcons-Regular.ttf) format('truetype'); url(/iconfont/MaterialIcons-Regular.ttf) format('truetype');
} }
.material-icons { .material-icons {