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

Refactor login component to manage submission state and add button styles

Browse Source
This commit is contained in:
Christian Werner 2025-10-26 02:38:13 +01:00
parent 49853d99c6
commit e3467605b5
3 changed files with 53 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/angular/frontend/src/app/components/login/login.component.ts
View File

@ -26,7 +26,7 @@ export class LoginComponent {
});
protected errors = signal<string[]>([]);
protected submitting = signal<boolean>(true);
protected submitting = signal<boolean>(false);
constructor() {
@ -59,7 +59,8 @@ export class LoginComponent {
this.submitting.set(false)
});
console.log('login successful');
await this.router.navigate(['/']);
await this.router.navigate(['/']).finally(
() => this.submitting.set(false)
);
}
}

48
src/angular/frontend/src/button.scss Normal file
View File

@ -0,0 +1,48 @@
button {
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
font-weight: bold;
white-space: nowrap;
background-color: var(--button-bg-color);
color: var(--button-fg-color);
&:hover {
background-color: var(--button-bg-hover-color);
cursor: pointer;
}
--button-fg-color: var(--neutral-90);
&.primary {
--button-bg-color: var(--primary-30);
--button-bg-hover-color: var(--primary-20);
}
&.secondary {
--button-bg-color: var(--secondary-30);
--button-bg-hover-color: var(--secondary-20);
}
&.outline {
padding: calc(0.5rem - 1px) calc(1rem - 1px);
border: 1px solid var(--button-bg-color);
background-color: transparent;
color: var(--button-bg-color);
&:hover {
border: 1px solid var(--button-bg-hover-color);
background-color: transparent;
color: var(--button-bg-hover-color);
}
}
&:disabled {
background-color: var(--neutral-60);
color: var(--neutral-20);
cursor: default;
}
}

44
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 "button";
@use "form";
html, input {
@ -21,46 +22,3 @@ body {
scrollbar-color: var(--neutral-70)var(--neutral-80);
scrollbar-width: thin;
}
button {
border: none;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
font-weight: bold;
white-space: nowrap;
background-color: var(--button-bg-color);
color: var(--button-fg-color);
&:hover {
background-color: var(--button-bg-hover-color);
cursor: pointer;
}
--button-fg-color: var(--neutral-90);
&.primary {
--button-bg-color: var(--primary-30);
--button-bg-hover-color: var(--primary-20);
}
&.secondary {
--button-bg-color: var(--secondary-30);
--button-bg-hover-color: var(--secondary-20);
}
&.outline {
padding: calc(0.5rem - 1px) calc(1rem - 1px);
border: 1px solid var(--button-bg-color);
background-color: transparent;
color: var(--button-bg-color);
&:hover {
border: 1px solid var(--button-bg-hover-color);
background-color: transparent;
color: var(--button-bg-hover-color);
}
}
}