Enhance login form layout and styling with improved error handling
This commit is contained in:
parent
e77e670bc3
commit
55ca5f572f
@ -1,120 +1 @@
|
|||||||
<p><app-link href="/dashboard/test">test</app-link> - <app-link href="/dashboard/test/testa">testa</app-link> - <app-link href="/dashboard/test/testb">testb</app-link></p>
|
<h2>CRINGE</h2>
|
||||||
<p><app-link href="/dashboard/test2">test2</app-link> - <app-link href="/dashboard/test2/testa">testa</app-link> - <app-link href="/dashboard/test2/testb">testb</app-link></p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
<p>home works!</p>
|
|
||||||
|
|||||||
@ -1,10 +1,12 @@
|
|||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import {LinkComponent} from '../link/link.component';
|
import {LinkComponent} from '../link/link.component';
|
||||||
|
import {LoginComponent} from '../login/login.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-home',
|
selector: 'app-home',
|
||||||
imports: [
|
imports: [
|
||||||
LinkComponent
|
LinkComponent,
|
||||||
|
LoginComponent
|
||||||
],
|
],
|
||||||
templateUrl: './home.component.html',
|
templateUrl: './home.component.html',
|
||||||
styleUrl: './home.component.scss',
|
styleUrl: './home.component.scss',
|
||||||
|
|||||||
@ -1,16 +1,32 @@
|
|||||||
@if (errors().length > 0) {
|
<div class="container">
|
||||||
<div class="errors">
|
<form [formGroup]="loginFormGroup" (ngSubmit)="onSubmit($event)" class="single-column-form">
|
||||||
@for (error of errors(); track error) {
|
@if (errors().length > 0) {
|
||||||
<div class="error">{{ error }}</div>
|
<div class="errors">
|
||||||
|
@for (error of errors(); track error) {
|
||||||
|
<div class="error">{{ error }}</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
<div class="form-group">
|
||||||
}
|
<h2 class="title">Login</h2>
|
||||||
<form [formGroup]="loginFormGroup" (ngSubmit)="onSubmit($event)">
|
<div class="fields">
|
||||||
<input required type="text" name="username" placeholder="Username" formControlName="usernameOrEmail">
|
<div class="form-field">
|
||||||
<input required type="password" name="password" placeholder="*****" formControlName="password">
|
<label for="username">Username</label>
|
||||||
<div class="group">
|
<input type="text" name="username" placeholder="Username" formControlName="usernameOrEmail" required />
|
||||||
<input id="remember" type="checkbox" name="remember" formControlName="keep">
|
</div>
|
||||||
<label for="remember">Keep me signed in</label><br>
|
<div class="form-field">
|
||||||
<input type="submit" value="Login">
|
<label for="password">Password</label>
|
||||||
</div>
|
<input type="password" name="password" placeholder="*****" formControlName="password" required />
|
||||||
</form>
|
</div>
|
||||||
|
<div class="form-field full-width">
|
||||||
|
<label for="checkbox">Keep me signed in</label>
|
||||||
|
<input type="checkbox" id="checkbox" name="checkbox" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="actions">
|
||||||
|
<button type="submit" class="primary">Login</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|||||||
@ -1,17 +1,14 @@
|
|||||||
form {
|
:host {
|
||||||
padding: 1rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
gap: .75rem;
|
align-items: center;
|
||||||
max-width: 400px;
|
height: 100vh;
|
||||||
|
width: 100vw;
|
||||||
|
|
||||||
.group {
|
.container {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: row;
|
max-width: 500px;
|
||||||
gap: .25rem;
|
padding: 1rem;
|
||||||
|
|
||||||
input[type="submit"] {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
77
src/angular/frontend/src/form.scss
Normal file
77
src/angular/frontend/src/form.scss
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
form {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&.single-column-form {
|
||||||
|
.form-group .fields {
|
||||||
|
grid-template-columns: 1fr !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
|
||||||
|
.fields {
|
||||||
|
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
|
||||||
|
@media only screen and (width <= 720px) {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
&.full-width {
|
||||||
|
grid-column: 1 / -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
color: var(--neutral-10);
|
||||||
|
accent-color: var(--secondary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:not([type="checkbox"], [type="radio"]) {
|
||||||
|
padding: 0.5em;
|
||||||
|
border-radius: 0.5em;
|
||||||
|
background-color: var(--neutral-80);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(input[required]:not([type="radio"])) {
|
||||||
|
label::after {
|
||||||
|
content: " *";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:has(input[type="checkbox"], input[type="radio"]) {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin-right: auto;
|
||||||
|
gap: 0.5ch;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.errors {
|
||||||
|
background-color: oklch(from var(--danger-color) clamp(0, l/1.5, 1) clamp(0, c/1.7, 1) clamp(0, h, 360));
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -1,5 +1,6 @@
|
|||||||
/* You can add global styles to this file, and also import other style files */
|
/* You can add global styles to this file, and also import other style files */
|
||||||
@use "color-theme";
|
@use "color-theme";
|
||||||
|
@use "form";
|
||||||
|
|
||||||
html, input {
|
html, input {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user