Improve login page for OIDC (#15214)

Signed-off-by: AllForNothing <sshijun@vmware.com>
2024-11-26 12:15:20 +01:00 · 2021-07-02 09:42:04 +08:00 · 2021-07-02 09:42:04 +08:00 · bb57264f11
commit bb57264f11
parent 29ccdff766
11 changed files with 137 additions and 98 deletions
--- a/src/portal/src/app/account/sign-in/sign-in.component.html
+++ b/src/portal/src/app/account/sign-in/sign-in.component.html
@ -2,55 +2,80 @@
    <global-message [isAppLevel]="true"></global-message>
    <navigator (showDialogModalAction)="openModal($event)"></navigator>
    <search-result></search-result>
-    <div class="login-wrapper" [ngStyle]="{'background-image': customLoginBgImg? 'url(/images/' + customLoginBgImg + ')': ''}">
+    <div class="login-wrapper"
+         [ngStyle]="{'background-image': customLoginBgImg? 'url(/images/' + customLoginBgImg + ')': ''}">
        <form #signInForm="ngForm" class="login">
-            <label class="title"> {{customAppTitle? customAppTitle:(appTitle | translate)}}
+                <span *ngIf="isOidcLoginMode && steps===2" (click)="steps=1" class="back-icon">
+                <clr-icon shape="angle left"></clr-icon>
+                <div class="margin-left-3">{{'SEARCH.BACK' | translate }}</div>
+            </span>
+            <label class="title"> {{customAppTitle ? customAppTitle : (appTitle | translate)}}
            </label>
-            <a href="/c/oidc/login" class="login-oidc" *ngIf="isOidcLoginMode">
+            <div class="login-group">
+                <ng-container *ngIf="isOidcLoginMode && steps ===1">
+                    <a href="/c/oidc/login">
                        <button type="button" id="log_oidc" class="btn btn-primary btn-block">
                            <span>{{'BUTTON.LOG_IN_OIDC' | translate }}</span>
                        </button>
                    </a>
-            <div class="login-group">
-                <clr-input-container>
-                    <input clrInput class="username" type="text" required [(ngModel)]="signInCredential.principal" name="login_username" id="login_username"
+                    <div class="divider-container mt-1 mb-1">
+                        <hr class="divider" size="1" noshade/>
+                        <h4 class="m-0"><span>{{'SIGN_IN.OR' | translate }}</span></h4>
+                        <hr class="divider" size="1" noshade/>
+                    </div>
+                    <a href="javascript:void(0)" (click)="steps=2">
+                        <button type="button" id="login-db" class="btn btn-primary btn-block mt-0">
+                            <span>{{'SIGN_IN.VIA_LOCAL_DB' | translate }}</span>
+                        </button>
+                    </a>
+                </ng-container>
+                <ng-container  *ngIf="(!isOidcLoginMode && steps === 1) || (isOidcLoginMode && steps ===2)">
+                    <clr-input-container class="mt-3">
+                        <input clrInput class="username" type="text" required [(ngModel)]="signInCredential.principal"
+                               name="login_username" id="login_username"
                               placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}' #userNameInput='ngModel'>
                        <clr-control-error>{{ 'TOOLTIP.SIGN_IN_USERNAME' | translate }}</clr-control-error>
                    </clr-input-container>
                    <div class="clr-form-control">
-                    <div class="clr-control-container" [class.clr-error] ="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)">
+                        <div class="clr-control-container"
+                             [class.clr-error]="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)">
                            <div class="clr-input-wrapper">
-                            <input class="clr-input pwd-input" [type]="showPwd?'text':'password'" required [(ngModel)]="signInCredential.password" name="login_password" id="login_password"
+                                <input class="clr-input pwd-input" [type]="showPwd?'text':'password'" required
+                                       [(ngModel)]="signInCredential.password" name="login_password" id="login_password"
                                       placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}' #passwordInput="ngModel">
-                            <clr-icon *ngIf="!showPwd" shape="eye" class="pw-eye" (click)="showPwd =!showPwd"></clr-icon>
-                            <clr-icon *ngIf="showPwd" shape="eye-hide" class="pw-eye" (click)="showPwd =!showPwd"></clr-icon>
+                                <clr-icon *ngIf="!showPwd" shape="eye" class="pw-eye"
+                                          (click)="showPwd =!showPwd"></clr-icon>
+                                <clr-icon *ngIf="showPwd" shape="eye-hide" class="pw-eye"
+                                          (click)="showPwd =!showPwd"></clr-icon>
                                <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
                            </div>
-                        <clr-control-error *ngIf="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)">
+                            <clr-control-error
+                                    *ngIf="passwordInput.invalid && (passwordInput.dirty || passwordInput.touched)">
                                {{ 'TOOLTIP.SIGN_IN_PWD' | translate }}
                            </clr-control-error>
                        </div>
                    </div>
                    <div class="display-flex">
                        <clr-checkbox-wrapper>
-                        <input clrCheckbox type="checkbox" id="rememberme" #rememberMeBox (click)="clickRememberMe($event)" [checked]="rememberMe">
+                            <input clrCheckbox type="checkbox" id="rememberme" #rememberMeBox
+                                   (click)="clickRememberMe($event)" [checked]="rememberMe">
                            <label class="reset-label" for="rememberme">{{ 'SIGN_IN.REMEMBER' | translate }}</label>
                        </clr-checkbox-wrapper>
                    </div>
-                <div [class.visibility-hidden]="!isError" class="error active">
+                    <div *ngIf="isError" class="error active">
                        <span *ngIf="isCoreServiceAvailable">{{ 'SIGN_IN.INVALID_MSG' | translate }}</span>
                        <span *ngIf="!isCoreServiceAvailable">{{ 'SIGN_IN.CORE_SERVICE_NOT_AVAILABLE' | translate }}</span>
                    </div>
-                <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary" (click)="signIn()" id="log_in">{{ 'BUTTON.LOG_IN' | translate }}</button>
-                <a href="javascript:void(0)" class="signup" (click)="signUp()" *ngIf="selfSignUp">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
+                    <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary mt-2" (click)="signIn()"
+                            id="log_in">{{ 'BUTTON.LOG_IN' | translate }}</button>
+                    <a href="javascript:void(0)" class="signup" (click)="signUp()"
+                       *ngIf="selfSignUp">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
+                </ng-container>
+                <div class="more-info" [ngClass]="{'pt-1': (!isOidcLoginMode && steps === 1) || (isOidcLoginMode && steps ===2)}">
+                    <a href="https://github.com/goharbor/harbor" target="_blank">{{ 'BUTTON.MORE_INFO' | translate }}</a>
                </div>
-            <div>
-                <a href="https://github.com/goharbor/harbor" target="_blank" class="more-info-link">{{ 'BUTTON.MORE_INFO' | translate }}</a>
            </div>
        </form>
-        <div *ngIf="appConfig.show_popular_repo" id="pop_repo" class="popular-repo-wrapper">
-            <top-repo class="repo-container"></top-repo>
-        </div>
    </div>
 </clr-main-container>
 <sign-up #signupDialog (userCreation)="handleUserCreation($event)"></sign-up>
--- a/src/portal/src/app/account/sign-in/sign-in.component.scss
+++ b/src/portal/src/app/account/sign-in/sign-in.component.scss
@ -14,31 +14,6 @@
    top: -5px;
 }

-.popular-repo-wrapper {
-    background-color: white;
-    min-height: 100vh;
-    display: flex;
-    flex-grow: 1;
-    margin-top: 24px;
-    justify-content: center;
-    flex-direction: column;
-    height: auto;
-    position: relative;
-    border-left: 1px solid #eee;
-}
-
-.repo-container {
-    width: 100%;
-    margin-top: -210px;
-}
-
-.more-info-link {
-    position: relative;
-    top: 80px;
-    left: 294px;
-    padding-right: 36px;
-}
-
 .tm-font {
    font-size: 14px !important;
    position: relative;
@ -59,10 +34,6 @@
        background:transparent;
    }
 }
-.login-oidc{
-    margin-top: 50px;
-}
-
 .reset-label {
    font-size:inherit;
    color:inherit;
@ -82,3 +53,41 @@
 .pwd-input {
    padding-right: 26px;
 }
+
+.divider-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.divider {
+    margin: 0;
+    width: 8.5rem;
+}
+.login {
+    padding-bottom: 180px;
+}
+.back-icon {
+    position: absolute;
+    top: 1rem;
+    display: flex;
+    align-items: center;
+    color: #007cbb;
+    font-size: 16px;
+    cursor: pointer;
+}
+.margin-left-3 {
+    margin-left: 3px;
+}
+.title {
+    position: absolute;
+    top: 10rem
+}
+.login-group {
+    width: 70%;
+    position: absolute;
+    top: 10rem
+}
+.more-info {
+    text-align: right;
+    padding-top: 2rem;
+}
--- a/src/portal/src/app/account/sign-in/sign-in.component.ts
+++ b/src/portal/src/app/account/sign-in/sign-in.component.ts
@ -28,6 +28,7 @@ import { AboutDialogComponent } from "../../shared/components/about-dialog/about
 import { CommonRoutes, CONFIG_AUTH_MODE } from "../../shared/entities/shared.const";
 import { SignInCredential } from "./sign-in-credential";
 import { UserPermissionService } from "../../shared/services";
+import {finalize} from "rxjs/operators";

 // Define status flags for signing in states
 export const signInStatusNormal = 0;
@ -45,7 +46,6 @@ const expireDays = 10;
 export class SignInComponent implements AfterViewChecked, OnInit {
    showPwd: boolean = false;
    redirectUrl: string = "";
-    appConfig: AppConfig = new AppConfig();
    // Remeber me indicator
    rememberMe: boolean = false;
    rememberedName: string = "";
@ -68,6 +68,8 @@ export class SignInComponent implements AfterViewChecked, OnInit {
        password: ""
    };
    isCoreServiceAvailable: boolean = true;
+    steps: number = 1;
+    hasLoadedAppConfig: boolean = false;
    constructor(
        private router: Router,
        private session: SessionService,
@ -88,15 +90,6 @@ export class SignInComponent implements AfterViewChecked, OnInit {
                this.customAppTitle = customSkinObj.loginTitle;
            }
        }
-
-        // Before login: Make sure the updated configuration can be loaded
-        this.appConfigService.load()
-            .subscribe(updatedConfig => this.appConfig = updatedConfig
-                , error => {
-                    // Catch the error
-                    console.error("Failed to load bootstrap options with error: ", error);
-                });
-
        this.route.queryParams
            .subscribe(params => {
                this.redirectUrl = params["redirect_url"] || "";
@ -117,7 +110,7 @@ export class SignInComponent implements AfterViewChecked, OnInit {

    // App title
    public get appTitle(): string {
-        if (this.appConfig && this.appConfig.with_admiral) {
+        if (this.appConfigService.getConfig() && this.appConfigService.getConfig().with_admiral) {
            return "APP_TITLE.VIC";
        }

@ -140,11 +133,11 @@ export class SignInComponent implements AfterViewChecked, OnInit {

    // Whether show the 'sign up' link
    public get selfSignUp(): boolean {
-        return this.appConfig.auth_mode === CONFIG_AUTH_MODE.DB_AUTH
-            && this.appConfig.self_registration;
+        return this.appConfigService.getConfig() && this.appConfigService.getConfig().auth_mode === CONFIG_AUTH_MODE.DB_AUTH
+            && this.appConfigService.getConfig().self_registration;
    }
    public get isOidcLoginMode(): boolean {
-        return this.appConfig.auth_mode === CONFIG_AUTH_MODE.OIDC_AUTH;
+        return this.appConfigService.getConfig() && this.appConfigService.getConfig().auth_mode === CONFIG_AUTH_MODE.OIDC_AUTH;
    }
    clickRememberMe($event: any): void {
        if ($event && $event.target) {
@ -261,11 +254,7 @@ export class SignInComponent implements AfterViewChecked, OnInit {

                // after login successfully: Make sure the updated configuration can be loaded
                this.appConfigService.load()
-                    .subscribe(updatedConfig => this.appConfig = updatedConfig
-                        , error => {
-                            // Catch the error
-                            console.error("Failed to load bootstrap options with error: ", error);
-                        });
+                    .subscribe();
            }, error => {
                // 403 oidc login no body;
                if (this.isOidcLoginMode && error && error.status === 403) {
--- a/src/portal/src/i18n/lang/de-de-lang.json
+++ b/src/portal/src/i18n/lang/de-de-lang.json
@ -14,6 +14,8 @@
        "INVALID_MSG": "Falscher Nutzername oder Passwort.",
        "FORGOT_PWD": "Passwort vergessen",
        "HEADER_LINK": "Einloggen",
+        "OR": "OR",
+        "VIA_LOCAL_DB": "LOGIN VIA LOCAL DB",
 	"CORE_SERVICE_NOT_AVAILABLE": "Core Service ist nicht verfügbar"
    },
    "SIGN_UP": {
--- a/src/portal/src/i18n/lang/en-us-lang.json
+++ b/src/portal/src/i18n/lang/en-us-lang.json
@ -14,7 +14,9 @@
        "INVALID_MSG": "Invalid user name or password.",
        "FORGOT_PWD": "Forgot password",
        "HEADER_LINK": "Sign In",
-        "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available."
+        "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available.",
+        "OR": "OR",
+        "VIA_LOCAL_DB": "LOGIN VIA LOCAL DB"
    },
    "SIGN_UP": {
        "TITLE": "Sign Up"
--- a/src/portal/src/i18n/lang/es-es-lang.json
+++ b/src/portal/src/i18n/lang/es-es-lang.json
@ -14,7 +14,9 @@
        "INVALID_MSG": "Nombre o contraseña no válidos.",
        "FORGOT_PWD": "Olvidé mi contraseña",
        "HEADER_LINK": "Identificarse",
-        "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available."
+        "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available.",
+        "OR": "OR",
+        "VIA_LOCAL_DB": "LOGIN VIA LOCAL DB"
    },
    "SIGN_UP": {
        "TITLE": "Registrarse"
--- a/src/portal/src/i18n/lang/fr-fr-lang.json
+++ b/src/portal/src/i18n/lang/fr-fr-lang.json
@ -14,7 +14,9 @@
        "INVALID_MSG": "Nom d'utilisateur ou mot de passe invalide.",
        "FORGOT_PWD": "Mot de passe oublié",
        "HEADER_LINK": "S'identifier",
-        "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available."
+        "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available.",
+        "OR": "OR",
+        "VIA_LOCAL_DB": "LOGIN VIA LOCAL DB"
    },
    "SIGN_UP": {
        "TITLE": "S'inscrire"
--- a/src/portal/src/i18n/lang/pt-br-lang.json
+++ b/src/portal/src/i18n/lang/pt-br-lang.json
@ -14,7 +14,9 @@
        "INVALID_MSG": "Usuário ou senha inválidos",
        "FORGOT_PWD": "Esqueci a senha",
        "HEADER_LINK": "Logar-se",
-        "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available."
+        "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available.",
+        "OR": "OR",
+        "VIA_LOCAL_DB": "LOGIN VIA LOCAL DB"
    },
    "SIGN_UP": {
        "TITLE": "Registrar-se"
--- a/src/portal/src/i18n/lang/tr-tr-lang.json
+++ b/src/portal/src/i18n/lang/tr-tr-lang.json
@ -14,7 +14,9 @@
        "INVALID_MSG": "Geçersiz kullanıcı adı veya şifre.",
        "FORGOT_PWD": "Parolamı Unuttum",
        "HEADER_LINK": "Oturum aç",
-        "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available."
+        "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available.",
+        "OR": "OR",
+        "VIA_LOCAL_DB": "LOGIN VIA LOCAL DB"
    },
    "SIGN_UP": {
        "TITLE": "Kayıt ol"
--- a/src/portal/src/i18n/lang/zh-cn-lang.json
+++ b/src/portal/src/i18n/lang/zh-cn-lang.json
@ -14,7 +14,9 @@
        "INVALID_MSG": "用户名或者密码不正确。",
        "FORGOT_PWD": "忘记密码",
        "HEADER_LINK": "登录",
-        "CORE_SERVICE_NOT_AVAILABLE": "核心服务不可用。"
+        "CORE_SERVICE_NOT_AVAILABLE": "核心服务不可用。",
+        "OR": "或",
+        "VIA_LOCAL_DB": "通过本地数据库登录"
    },
    "SIGN_UP": {
        "TITLE": "注册"
--- a/src/portal/src/i18n/lang/zh-tw-lang.json
+++ b/src/portal/src/i18n/lang/zh-tw-lang.json
@ -14,7 +14,9 @@
    "INVALID_MSG": "用戶名或者密碼不正確。",
    "FORGOT_PWD": "忘記密碼",
    "HEADER_LINK": "登錄",
-    "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available."
+    "CORE_SERVICE_NOT_AVAILABLE": "Core service is not available.",
+    "OR": "OR",
+    "VIA_LOCAL_DB": "LOGIN VIA LOCAL DB"
  },
  "SIGN_UP": {
    "TITLE": "註冊"