Commit 86a8c882 authored by Tomáš Biloš's avatar Tomáš Biloš
Browse files

Merge branch 'fix/login' into 'main'

fix: Update login screen visuals

See merge request !86
parents 94456685 8798841a
This diff is collapsed.
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
<div
class="w-full bg-black text-white shadow-2xl flex mb-4 py-4 justify-center"
>
<div class="w-[70%] text-4xl">Secret archive</div>
</div>
<mat-card class="w-[70%] mx-auto">
<form
class="flex flex-col gap-4"
[formGroup]="loginForm"
(ngSubmit)="onSubmit()"
>
<h1 class="">Sign in</h1>
<p *ngIf="state === requestState.ERROR" class="text-red-600">
{{ errorMessage }}
</p>
<mat-form-field>
<input
matInput
placeholder="Username"
formControlName="username"
required
/>
<mat-error *ngIf="!loginForm.controls['username'].valid"
>Please enter valid username</mat-error
>
</mat-form-field>
<mat-form-field>
<input
matInput
placeholder="Password"
type="password"
formControlName="password"
required
/>
<mat-error *ngIf="!loginForm.controls['password'].valid"
>Please enter password</mat-error
> </mat-form-field
><br />
<button class="self-end" type="submit" mat-raised-button>Login</button>
</form>
</mat-card>
<mat-toolbar color="primary">
<span>Sign in</span>
</mat-toolbar>
<form class="flex flex-col px-4 main-container" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="mat-display-3 !my-12">Secret archive</div>
<p *ngIf="state === requestState.ERROR" class="text-red-600">
{{ errorMessage }}
</p>
<mat-form-field appearance="outline">
<input matInput placeholder="Username" formControlName="username" required />
<mat-error *ngIf="!loginForm.controls['username'].valid">Please enter valid username</mat-error>
</mat-form-field>
<mat-form-field appearance="outline">
<input matInput placeholder="Password" type="password" formControlName="password" required />
<mat-error *ngIf="!loginForm.controls['password'].valid">Please enter password</mat-error>
</mat-form-field><br />
<div class="flex flex-row mt-4 justify-between">
<button type="submit" mat-flat-button>Forgot password?</button>
<button color="primary" type="submit" mat-raised-button>Sign in</button>
</div>
</form>
......@@ -6,7 +6,6 @@ import { RequestState } from '../request-state.enum';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
})
export class LoginComponent implements OnInit {
loginForm = new FormGroup({
......@@ -17,7 +16,7 @@ export class LoginComponent implements OnInit {
requestState = RequestState;
state: RequestState = RequestState.SUCCESS;
constructor(private authService: AuthService, private router: Router) {}
constructor(private authService: AuthService, private router: Router) { }
ngOnInit(): void {
this.authService.removeAllCookies();
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment