Suspectus/gandalf-reborn
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Enhance login form layout and styling with improved error handling

Browse Source
This commit is contained in:
Christian Werner 2025-10-25 22:28:52 +02:00
parent e77e670bc3
commit 55ca5f572f
6 changed files with 123 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/angular/frontend/src/app/components/home/home.component.html
View File

@ -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>
<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>
<h2>CRINGE</h2>

4
src/angular/frontend/src/app/components/home/home.component.ts
View File

@ -1,10 +1,12 @@
import { Component } from '@angular/core';
import {LinkComponent} from '../link/link.component';
import {LoginComponent} from '../login/login.component';
@Component({
selector: 'app-home',
imports: [
LinkComponent
LinkComponent,
LoginComponent
],
templateUrl: './home.component.html',
styleUrl: './home.component.scss',

30
src/angular/frontend/src/app/components/login/login.component.html
View File

@ -1,3 +1,5 @@
<div class="container">
<form [formGroup]="loginFormGroup" (ngSubmit)="onSubmit($event)" class="single-column-form">
@if (errors().length > 0) {
<div class="errors">
@for (error of errors(); track error) {
@ -5,12 +7,26 @@
}
</div>
}
<form [formGroup]="loginFormGroup" (ngSubmit)="onSubmit($event)">
<input required type="text" name="username" placeholder="Username" formControlName="usernameOrEmail">
<input required type="password" name="password" placeholder="*****" formControlName="password">
<div class="group">
<input id="remember" type="checkbox" name="remember" formControlName="keep">
<label for="remember">Keep me signed in</label><br>
<input type="submit" value="Login">
<div class="form-group">
<h2 class="title">Login</h2>
<div class="fields">
<div class="form-field">
<label for="username">Username</label>
<input type="text" name="username" placeholder="Username" formControlName="usernameOrEmail" required />
</div>
<div class="form-field">
<label for="password">Password</label>
<input type="password" name="password" placeholder="*****" formControlName="password" required />
</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>

27
src/angular/frontend/src/app/components/login/login.component.scss
View File

@ -1,17 +1,14 @@
form {
:host {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
.container {
width: 100%;
max-width: 500px;
padding: 1rem;
display: flex;
flex-direction: column;
gap: .75rem;
max-width: 400px;
}
}
.group {
display: flex;
flex-direction: row;
gap: .25rem;
input[type="submit"] {
margin-left: auto;
}
}
}

77
src/angular/frontend/src/form.scss Normal file
View 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
src/angular/frontend/src/styles.scss
View File

@ -1,5 +1,6 @@
/* You can add global styles to this file, and also import other style files */
@use "color-theme";
@use "form";
html, input {
font-size: 18px;