Skip to content

Commit f2f4865

Browse files
xmlkingxmlking
committed
perf(login): enhanced login UX
added ionicons, enhanced login UX
1 parent f2f1462 commit f2f4865

File tree

8 files changed

+121
-62
lines changed

8 files changed

+121
-62
lines changed

‎apps/webapp/src/styles.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,6 @@ $alt-theme: mat-dark-theme($alt-primary, $alt-accent);
3636
@import '~perfect-scrollbar/css/perfect-scrollbar.css';
3737
@import '~filepond/dist/filepond.min.css';
3838
@import '~filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
39+
40+
$ionicons-font-path: '~ionicons/dist/fonts';
41+
@import '~ionicons/dist/scss/ionicons';

‎libs/auth/src/lib/auth.module.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
3+
import { RouterModule } from '@angular/router';
34
import { JwksValidationHandler, OAuthModule, OAuthService, ValidationHandler } from 'angular-oauth2-oidc';
45
import { Store } from '@ngxs/store';
56

@@ -17,6 +18,7 @@ import {
1718
MatFormFieldModule,
1819
MatIconModule,
1920
MatInputModule,
21+
MatTooltipModule,
2022
MatToolbarModule,
2123
} from '@angular/material';
2224
import { ReactiveFormsModule } from '@angular/forms';
@@ -26,12 +28,14 @@ import { AuthGuard } from './auth.guard';
2628
@NgModule({
2729
imports: [
2830
CommonModule,
31+
RouterModule,
2932
MatButtonModule,
3033
MatCardModule,
3134
MatCheckboxModule,
3235
MatDialogModule,
3336
MatFormFieldModule,
3437
MatIconModule,
38+
MatTooltipModule,
3539
MatInputModule,
3640
MatToolbarModule,
3741
FlexLayoutModule,

‎libs/auth/src/lib/auth.service.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { OAuthEvent } from 'angular-oauth2-oidc/events';
1616

1717
@Injectable()
1818
export class AuthService {
19-
static loginDefaultConf = { width: '400px', disableClose: true, panelClass: 'mylogin-no-padding-dialog' };
19+
static loginDefaultConf = { width: '380px', disableClose: true, panelClass: 'mylogin-no-padding-dialog' };
2020
private _refresher: Subscription;
2121
private _monitorer: Subscription;
2222
// @Select('auth.authMode') authMode$: Observable<AuthMode>;

‎libs/auth/src/lib/components/login/login.component.html‎

Lines changed: 78 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,79 @@
1-
<div class="login-container">
2-
<div class="login-content">
3-
<mat-toolbar color="primary">
4-
<mat-toolbar-row class="login-toolbar">
5-
<span>Login</span>
6-
</mat-toolbar-row>
7-
</mat-toolbar>
8-
<mat-card>
9-
<mat-card-header>
10-
<mat-card-subtitle *ngIf="infoMsg">{{infoMsg}}</mat-card-subtitle>
11-
<mat-error class="center" *ngIf="errorMsg">{{errorMsg}}</mat-error>
12-
</mat-card-header>
13-
14-
<form [formGroup]="loginForm" (ngSubmit)="onSubmit(loginForm.value)" novalidate>
15-
<mat-form-field>
16-
<mat-icon matPrefix>person_outline</mat-icon>
17-
<input autofocus type="text" matInput placeholder="Usernames: sumo, sumo1, sumo2, sumo3" formControlName="username">
18-
</mat-form-field>
19-
20-
<mat-form-field>
21-
<mat-icon matPrefix>lock_outline</mat-icon>
22-
<input type="password" autocomplete="false" matInput placeholder="Password: demo" formControlName="password">
23-
</mat-form-field>
24-
25-
<div mat-dialog-actions fxLayout="row" fxLayoutAlign="space-around center">
26-
<button mat-button color="warn" type="button" [mat-dialog-close]="false">Cancel</button>
27-
<span fxFlex></span>
28-
<button mat-raised-button type="button" (click)="initSSO()">SSO</button>
29-
<!--<button mat-raised-button color="primary" type="submit" cdkFocusInitial>Login</button>-->
30-
<button mat-raised-button color="primary" type="submit" >Login</button>
31-
</div>
32-
</form>
33-
</mat-card>
34-
</div>
1+
<div class="card border-radius elevation">
2+
<mat-toolbar color="primary">
3+
<mat-toolbar-row style="margin-bottom: -50px;" fxLayout="column" fxLayoutAlign="start end">
4+
<button mat-icon-button [mat-dialog-close]="false" style="margin-right: -15px">
5+
<mat-icon aria-label="Close">close</mat-icon>
6+
</button>
7+
</mat-toolbar-row>
8+
<mat-toolbar-row style="min-height:120px;" fxLayout="column" fxLayoutAlign="center center">
9+
<img class="login-angular-logo" src="assets/img/homepage/angular-white-transparent.svg">
10+
</mat-toolbar-row>
11+
</mat-toolbar>
12+
13+
14+
<form class="padding" fxLayout="column" fxLayoutGap="16px" [formGroup]="loginForm">
15+
16+
<span fxLayout="row" fxLayoutAlign="space-between center">
17+
<mat-hint align="start" *ngIf="infoMsg">{{infoMsg}}</mat-hint>
18+
<mat-error align="end" class="center" *ngIf="errorMsg">{{errorMsg}}</mat-error>
19+
</span>
20+
21+
<mat-form-field fxFlex="grow" appearance="fill">
22+
<mat-label>Username</mat-label>
23+
<!--<mat-icon matPrefix>person_outline</mat-icon>-->
24+
<input autofocus matInput required placeholder="Usernames: sumo, sumo1, sumo2, sumo3" formControlName="username">
25+
<mat-hint>Usernames: sumo, sumo1, sumo2, sumo3</mat-hint>
26+
<mat-error *ngIf="loginForm.get('username').hasError('required')">We need an username to log you in</mat-error>
27+
</mat-form-field>
28+
29+
<mat-form-field fxFlex="grow" appearance="fill">
30+
<mat-label>Password</mat-label>
31+
<!--<mat-icon matPrefix>lock_outline</mat-icon>-->
32+
<input matInput required [type]="inputType" autocomplete="false" placeholder="Password: demo"
33+
formControlName="password">
34+
<button type="button" mat-icon-button matSuffix (click)="toggleInputType()" matTooltip="Toggle Visibility">
35+
<mat-icon *ngIf="visible">visibility</mat-icon>
36+
<mat-icon *ngIf="!visible">visibility_off</mat-icon>
37+
</button>
38+
<mat-hint>Password: demo</mat-hint>
39+
<mat-hint align="end">Click the eye to toggle visibility</mat-hint>
40+
<mat-error *ngIf="loginForm.get('password').hasError('required')">We need a password to log you in</mat-error>
41+
</mat-form-field>
42+
43+
<div fxLayout="row" fxLayoutAlign="space-between center">
44+
<mat-checkbox class="mat-caption">Remember Me</mat-checkbox>
45+
<a class="mat-caption" [routerLink]="['/forgot-password']">Forgot Password?</a>
46+
</div>
47+
<button type="submit" color="primary" mat-raised-button [disabled]="!loginForm.valid"
48+
(click)="onSubmit(loginForm.value)">
49+
SIGN IN
50+
</button>
51+
52+
<mat-hint class="text-center mat-caption">
53+
<p>Not a member?
54+
<a [routerLink]="['/register']">Register</a>
55+
</p>
56+
</mat-hint>
57+
<!--
58+
<mat-hint class="text-center mat-caption">
59+
<p>or sign in with:</p>
60+
</mat-hint>
61+
-->
62+
<span fxLayout="row" fxLayoutAlign="space-evenly center">
63+
<button mat-mini-fab (click)="initSSO()" matTooltip="Login with KeyCloak" matTooltipPosition="above">
64+
<mat-icon>security</mat-icon>
65+
</button>
66+
<button mat-mini-fab matTooltip="Login with Google" matTooltipPosition="above">
67+
<i class="icon ion-logo-google"></i>
68+
</button>
69+
<button mat-mini-fab>
70+
<i class="icon ion-logo-twitter" matTooltip="Login with Twitter" matTooltipPosition="above"></i>
71+
</button>
72+
<button mat-mini-fab>
73+
<i class="icon ion-logo-github" matTooltip="Login with GitHub" matTooltipPosition="above"></i>
74+
</button>
75+
</span>
76+
77+
</form>
3578
</div>
79+

‎libs/auth/src/lib/components/login/login.component.scss‎

Lines changed: 13 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,19 @@
1-
.login-container {
2-
height: 100%;
3-
width: 100%;
4-
align-items: center;
5-
display: flex;
6-
}
7-
8-
form {
9-
width: 100%;
10-
}
11-
12-
.login-content {
13-
width: 100%;
14-
}
1+
.card {
2+
width: 380px;
3+
border-radius: 3px;
4+
background: #fff;
155

16-
.login-toolbar {
17-
justify-content: center;
6+
.padding {
7+
padding: 24px;
8+
}
189
}
1910

20-
.mat-form-field {
21-
width: 100%;
22-
display: block;
23-
}
24-
25-
.mat-dialog-actions {
26-
margin-top: 15px;
11+
.text-center {
12+
text-align: center;
2713
}
2814

29-
.center {
30-
margin-top: -20px;
31-
text-align: center;
15+
.login-angular-logo {
16+
height: 96px;
17+
margin: 0 4px 3px 0;
18+
vertical-align: middle;
3219
}

‎libs/auth/src/lib/components/login/login.component.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeDetectionStrategy, Component, Inject, OnInit } from '@angular/core';
1+
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, OnInit } from '@angular/core';
22
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
33
import { ROPCService } from '../../ropc.service';
44
import { Router } from '@angular/router';
@@ -16,11 +16,14 @@ import { ChangeAuthMode, AuthMode } from '../../auth.actions';
1616
export class LoginComponent {
1717
public infoMsg: String;
1818
public errorMsg: String;
19+
inputType = 'password';
20+
visible = false;
1921
loginForm: FormGroup;
2022

2123
constructor(
2224
fb: FormBuilder,
2325
private store: Store,
26+
private cd: ChangeDetectorRef,
2427
private oauthService: OAuthService,
2528
private ropcService: ROPCService,
2629
private router: Router,
@@ -37,6 +40,18 @@ export class LoginComponent {
3740
});
3841
}
3942

43+
toggleInputType() {
44+
if (this.visible) {
45+
this.inputType = 'password';
46+
this.visible = false;
47+
this.cd.markForCheck();
48+
} else {
49+
this.inputType = 'text';
50+
this.visible = true;
51+
this.cd.markForCheck();
52+
}
53+
}
54+
4055
initSSO() {
4156
this.store.dispatch(new ChangeAuthMode(AuthMode.ImplicitFLow)).subscribe(() => {
4257
this.oauthService.initImplicitFlow();

‎package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@
162162
"filepond-plugin-image-preview": "^2.0.1",
163163
"hammerjs": "^2.0.8",
164164
"helmet": "^3.13.0",
165+
"ionicons": "^4.4.3",
165166
"mongodb": "^3.1.6",
166167
"nest-router": "^1.0.6",
167168
"ngx-filepond": "^3.0.0",

0 commit comments

Comments
 (0)