aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/app/components/login/login.component.html7
-rw-r--r--src/app/components/login/login.component.ts5
-rw-r--r--src/app/components/register/register.component.html8
-rw-r--r--src/app/components/register/register.component.ts6
-rw-r--r--src/assets/icons/tabler-icon-eye-off.svg76
-rw-r--r--src/assets/icons/tabler-icon-eye.svg71
-rw-r--r--src/styles.css7
7 files changed, 175 insertions, 5 deletions
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index 29aebf9..13ae97a 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1,4 +1,4 @@
-<main class="centered-content flex-col flex-center-align-items flex-justify-center height-full">
+<main class="centered-content scroll-standalone flex-col flex-center-align-items flex-justify-center height-full">
<summary class="title card width-full margin-0 padding-dot2">Login</summary>
<app-error-bar class="width-full margin-top-dot4"></app-error-bar>
@@ -12,8 +12,11 @@
</div>
</section>
<section class="input-selection">
- <input type="password" placeholder="Password" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="password" required>
+ <input [type]="showingPassword ? 'text' : 'password'" placeholder="Password" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="password" required>
<label class="fancy-input-label width-full">Password</label>
+ <button type="button" class="show-password-button hover-half-opacity click-effect" (click)="toggleShowPassword()">
+ <img [src]="showingPassword ? '/assets/icons/tabler-icon-eye-off.svg' : '/assets/icons/tabler-icon-eye.svg'">
+ </button>
<div class="input-errors">
<label *ngIf="loginUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
</div>
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
index edbc461..a0ce730 100644
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login/login.component.ts
@@ -16,6 +16,7 @@ export class LoginComponent implements OnInit {
@ViewChild(ErrorBarComponent) private _errorBar: ErrorBarComponent;
private _title = 'Login';
public loginUserFormGroup: FormGroup;
+ public showingPassword = false;
constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _tokenService: TokenService) {
this._titleService.setTitle(this._title);
@@ -32,6 +33,10 @@ export class LoginComponent implements OnInit {
});
}
+ toggleShowPassword(): void {
+ this.showingPassword = !this.showingPassword;
+ }
+
onSubmit(): void {
this._errorBar.hideError();
this._userService.loginUserRequest(this.loginUserFormGroup).subscribe({
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html
index 1f547c4..1cd6cdb 100644
--- a/src/app/components/register/register.component.html
+++ b/src/app/components/register/register.component.html
@@ -1,4 +1,4 @@
-<main class="centered-content flex-col flex-center-align-items flex-justify-center height-full">
+<main class="centered-content scroll-standalone height-full flex-col flex-center-align-items flex-justify-center">
<summary class="title card width-full margin-0 padding-dot2">Register</summary>
<app-error-bar class="width-full margin-top-dot4"></app-error-bar>
@@ -37,8 +37,11 @@
</div>
</section>
<section class="input-selection">
- <input type="password" placeholder="Password" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="password" required>
+ <input [type]="showingPassword ? 'text' : 'password'" placeholder="Password" class="fancy-input width-full border-faded-slim border-bottom-only" formControlName="password" required>
<label class="fancy-input-label width-full">Password</label>
+ <button type="button" class="show-password-button hover-half-opacity click-effect" (click)="toggleShowPassword()">
+ <img [src]="showingPassword ? '/assets/icons/tabler-icon-eye-off.svg' : '/assets/icons/tabler-icon-eye.svg'">
+ </button>
<div class="input-errors">
<label *ngIf="registerUserFormGroup.get('password')?.errors?.required" class="error">*Required</label>
<label *ngIf="registerUserFormGroup.get('password')?.errors?.minlength" class="error">*Minimum 3 characters</label>
@@ -46,7 +49,6 @@
</div>
</section>
-
<button class="border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full" type="submit">Submit</button>
</form>
<button class="fg-focus border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 width-full margin-top-dot4" (click)="onRedirectLogin()">
diff --git a/src/app/components/register/register.component.ts b/src/app/components/register/register.component.ts
index 07b8976..6d84e11 100644
--- a/src/app/components/register/register.component.ts
+++ b/src/app/components/register/register.component.ts
@@ -16,6 +16,7 @@ export class RegisterComponent implements OnInit {
@ViewChild(ErrorBarComponent) private _errorBar: ErrorBarComponent;
private _title = 'Register';
public registerUserFormGroup: FormGroup;
+ public showingPassword = false;
constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _tokenService: TokenService) {
this._titleService.setTitle(this._title);
@@ -49,6 +50,10 @@ export class RegisterComponent implements OnInit {
// this.registerUserFormGroup.valueChanges.subscribe(console.log);
}
+ toggleShowPassword(): void {
+ this.showingPassword = !this.showingPassword;
+ }
+
onSubmit(): void {
this._userService.registerUserRequest(this.registerUserFormGroup).subscribe({
next: (res: object) => {
@@ -60,6 +65,7 @@ export class RegisterComponent implements OnInit {
}
});
}
+
onRedirectLogin(): void {
this._router.navigate(['/login']);
}
diff --git a/src/assets/icons/tabler-icon-eye-off.svg b/src/assets/icons/tabler-icon-eye-off.svg
new file mode 100644
index 0000000..e1ed7f9
--- /dev/null
+++ b/src/assets/icons/tabler-icon-eye-off.svg
@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ class="icon icon-tabler icon-tabler-eye-off"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ stroke-width="2"
+ stroke="currentColor"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ version="1.1"
+ id="svg10"
+ sodipodi:docname="tabler-icon-eye-off.svg"
+ inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+ <metadata
+ id="metadata16">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs14" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1053"
+ id="namedview12"
+ showgrid="false"
+ inkscape:zoom="37.541667"
+ inkscape:cx="12"
+ inkscape:cy="12"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg10" />
+ <path
+ stroke="none"
+ d="M0 0h24v24H0z"
+ fill="none"
+ id="path2" />
+ <line
+ x1="3"
+ y1="3"
+ x2="21"
+ y2="21"
+ id="line4"
+ style="stroke:#ffeede" />
+ <path
+ d="m 10.584,10.587 a 2.0004052,2.0004052 0 0 0 2.828,2.83"
+ id="path6"
+ style="stroke:#ffeede" />
+ <path
+ d="M 9.363,5.365 A 9.466,9.466 0 0 1 12,5 c 4,0 7.333,2.333 10,7 -0.778,1.361 -1.612,2.524 -2.503,3.488 m -2.14,1.861 C 15.726,18.449 13.942,19 12,19 8,19 4.667,16.667 2,12 3.369,9.605 4.913,7.825 6.632,6.659"
+ id="path8"
+ style="stroke:#ffeede" />
+</svg>
diff --git a/src/assets/icons/tabler-icon-eye.svg b/src/assets/icons/tabler-icon-eye.svg
new file mode 100644
index 0000000..7384d99
--- /dev/null
+++ b/src/assets/icons/tabler-icon-eye.svg
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ class="icon icon-tabler icon-tabler-eye"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ stroke-width="2"
+ stroke="currentColor"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ version="1.1"
+ id="svg8"
+ sodipodi:docname="tabler-icon-eye.svg"
+ inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+ <metadata
+ id="metadata14">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs12" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1053"
+ id="namedview10"
+ showgrid="false"
+ inkscape:zoom="37.541667"
+ inkscape:cx="12"
+ inkscape:cy="12"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg8" />
+ <path
+ stroke="none"
+ d="M0 0h24v24H0z"
+ fill="none"
+ id="path2" />
+ <circle
+ cx="12"
+ cy="12"
+ r="2"
+ id="circle4"
+ style="stroke:#ffeede" />
+ <path
+ d="M 22,12 C 19.333,16.667 16,19 12,19 8,19 4.667,16.667 2,12 4.667,7.333 8,5 12,5 c 4,0 7.333,2.333 10,7"
+ id="path6"
+ style="stroke:#ffeede" />
+</svg>
diff --git a/src/styles.css b/src/styles.css
index 11c2973..2786405 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -458,6 +458,13 @@ input[type=file]::file-selector-button {
padding-bottom: calc(0.4em - 1px);
}
+.show-password-button {
+ position: absolute;
+ right: 0.2em;
+ bottom: 0.9em;
+ height: 1em;
+}
+
/* Input errors */
.input-errors {
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-14 19:27:15 +0000