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">
<br/>
<mat-card-content>
<form>
<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>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">
<form #loginForm="ngForm" (ngSubmit)="login()">
<mat-form-field appearance="outline" class="w-75">
<mat-label>Email</mat-label>
<input matInput [formControl]="email">
<mat-error *ngIf="email.hasError('required')">
<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="email.hasError('email')">
<mat-error *ngIf="loginEmail.hasError('email')">
Please enter a valid email
</mat-error>
</mat-form-field>
<br/>
<br/>
<mat-form-field appearance="fill" class="w-75">
<mat-form-field appearance="outline" class="w-75">
<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">
<mat-icon>{{hidePassword ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
<mat-error *ngIf="password.hasError('required')">
<mat-error *ngIf="loginPassword.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>Sigin</button>
<div fxFlexAlign="end" align="end" style="text-align: end">
<button mat-button type="submit" [disabled]="!loginForm.valid">Login</button>
</div>
</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-card>
</div>

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

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