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

Cleaning up login forms validations

Browse Source
This commit is contained in:
Zoe Roux 2020-03-05 22:22:00 +01:00
parent b62b965c0c
commit 58f5a3b1c4
2 changed files with 60 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,73 +4,76 @@
<mat-tab label="Login"> <mat-tab label="Login">
<br/> <br/>
<mat-card-content> <mat-card-content>
<form> <form #loginForm="ngForm" (ngSubmit)="login()">
<mat-form-field appearance="fill" class="w-75"> <mat-form-field appearance="outline" class="w-75">
<mat-label>Username</mat-label>
<input matInput [formControl]="username">
<mat-error *ngIf="username.hasError('required')">
An username is <strong>required</strong>
</mat-error>
</mat-form-field>
<br/>
<br/>
<mat-form-field appearance="fill" class="w-75">
<mat-label>Password</mat-label>
<input matInput [formControl]="password" [type]="hidePassword ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword">
<mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
<mat-error *ngIf="password.hasError('required')">
A password is <strong>required</strong>
</mat-error>
</mat-form-field>
</form>
</mat-card-content>
<div fxFlexAlign="end" align="end">
<button mat-button>Login</button>
</div>
</mat-tab>
<mat-tab label="Signin">
<br/>
<mat-card-content>
<form class="form-group">
<mat-form-field appearance="fill" class="w-75">
<mat-label>Username</mat-label>
<input matInput [formControl]="username">
<mat-error *ngIf="username.hasError('required')">
An username is <strong>required</strong>
</mat-error>
</mat-form-field>
<br/>
<br/>
<mat-form-field appearance="fill" class="w-75">
<mat-label>Email</mat-label> <mat-label>Email</mat-label>
<input matInput [formControl]="email"> <input matInput name="loginEmail" #loginEmail="ngModel" [(ngModel)]="loginInformation.email" required email>
<mat-error *ngIf="email.hasError('required')"> <mat-error *ngIf="loginEmail.hasError('required')">
An email is <strong>required</strong> An email is <strong>required</strong>
</mat-error> </mat-error>
<mat-error *ngIf="email.hasError('email')"> <mat-error *ngIf="loginEmail.hasError('email')">
Please enter a valid email Please enter a valid email
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
<br/> <br/>
<br/> <br/>
<mat-form-field appearance="fill" class="w-75"> <mat-form-field appearance="outline" class="w-75">
<mat-label>Password</mat-label> <mat-label>Password</mat-label>
<input matInput [formControl]="password" [type]="hidePassword ? 'password' : 'text'"> <input matInput name="loginPassword" #loginPassword="ngModel" [(ngModel)]="loginInformation.password" [type]="hidePassword ? 'password' : 'text'" required>
<button mat-icon-button matSuffix (click)="hidePassword = !hidePassword" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hidePassword"> <button mat-icon-button matSuffix (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="password.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-form-field> </mat-form-field>
</form> </form>
</mat-card-content> </mat-card-content>
<div fxFlexAlign="end" align="end"> <div fxFlexAlign="end" align="end" style="text-align: end">
<button mat-button>Sigin</button> <button mat-button type="submit" [disabled]="!loginForm.valid">Login</button>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="Signin">
<br/>
<form #signinForm="ngForm" (ngSubmit)="signin()">
<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>
<button mat-icon-button matSuffix (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-form-field>
</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-tab-group>
</mat-card> </mat-card>
</div> </div>

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

@ -1,27 +1,26 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {FormControl, Validators} from "@angular/forms"; import {FormControl, FormGroup, Validators} from "@angular/forms";
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
templateUrl: './login.component.html', templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'] styleUrls: ['./login.component.scss']
}) })
export class LoginComponent implements OnInit export class LoginComponent
{ {
username = new FormControl("", [Validators.required]); loginInformation: {email: string, password: string} = {email: "", password: ""};
password = new FormControl("", [Validators.required]); signinInformation: {email: string, username: string, password: string} = {email: "", username: "", password: ""};
email = new FormControl("", [Validators.required, Validators.email]);
hidePassword: boolean = true; hidePassword: boolean = true;
constructor() { } constructor() { }
ngOnInit()
{
}
async login() async login()
{ {
} }
async signin()
{
console.log("Signing in")
}
} }