Add links to OIDC login

In the login page ,we add button to jump to OIDC login page.

Signed-off-by: Yogi_Wang <yawang@vmware.com>

src/portal/src/app/account/sign-in/sign-in.component.html

@@ -1,42 +1,53 @@
-<div class="login-wrapper" [ngStyle]="{'background-image': customLoginBgImg? 'url(static/images/' + customLoginBgImg + ')': ''}">
+<div class="login-wrapper"
+    [ngStyle]="{'background-image': customLoginBgImg? 'url(static/images/' + customLoginBgImg + ')': ''}">
     <form #signInForm="ngForm" class="login">
         <label class="title"> {{customAppTitle? customAppTitle:(appTitle | translate)}}
-    </label>
+        </label>
+        <a href="/c/oidc/login" class="login-oidc">
+            <button type="button" class="btn btn-primary btn-block">
+                <span>{{'BUTTON.LOG_IN_OIDC' | translate }}</span>
+            </button>
+        </a>
         <div class="login-group">
-            <label for="username" aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left">
+            <label for="username" aria-haspopup="true" role="tooltip"
-                <input class="username" type="text" required
+                class="tooltip tooltip-validation tooltip-md tooltip-top-left">
-                [(ngModel)]="signInCredential.principal" 
+                <input class="username" type="text" required [(ngModel)]="signInCredential.principal"
-                name="login_username" id="login_username" placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}'
+                    name="login_username" id="login_username" placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}'
-                #userNameInput='ngModel'>
+                    #userNameInput='ngModel'>
                 <span class="tooltip-content">
                     {{ 'TOOLTIP.SIGN_IN_USERNAME' | translate }}
                 </span>
             </label>
-            <label for="username" aria-haspopup="true" role="tpopular-repo-wrapperooltip" class="tooltip tooltip-validation tooltip-md tooltip-top-left">
+            <label for="username" aria-haspopup="true" role="tpopular-repo-wrapperooltip"
-                <input class="password" type="password" required 
+                class="tooltip tooltip-validation tooltip-md tooltip-top-left">
-                [(ngModel)]="signInCredential.password" 
+                <input class="password" type="password" required [(ngModel)]="signInCredential.password"
-                name="login_password" id="login_password" placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}'
+                    name="login_password" id="login_password" placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}'
-                #passwordInput="ngModel">
+                    #passwordInput="ngModel">
                 <span class="tooltip-content">
                     {{ 'TOOLTIP.SIGN_IN_PWD' | translate }}
                 </span>
             </label>
             <div class="checkbox">
-                <input type="checkbox" id="rememberme" #rememberMeBox (click)="clickRememberMe($event)" [checked]="rememberMe">
+                <input type="checkbox" id="rememberme" #rememberMeBox (click)="clickRememberMe($event)"
+                    [checked]="rememberMe">
                 <label for="rememberme">{{ 'SIGN_IN.REMEMBER' | translate }}</label>
-                <a *ngIf="showForgetPwd" href="javascript:void(0)" class="forgot-password-link" (click)="forgotPassword()">{{'SIGN_IN.FORGOT_PWD' | translate}}</a>
+                <a *ngIf="showForgetPwd" href="javascript:void(0)" class="forgot-password-link"
+                    (click)="forgotPassword()">{{'SIGN_IN.FORGOT_PWD' | translate}}</a>
             </div>
             <div [class.visibility-hidden]="!isError" class="error active">
                 {{ 'SIGN_IN.INVALID_MSG' | translate }}
             </div>
-            <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary" (click)="signIn()">{{ 'BUTTON.LOG_IN' | translate }}</button>
+            <button [disabled]="isOnGoing || !isValid" type="submit" class="btn btn-primary"
-            <a href="javascript:void(0)" class="signup" (click)="signUp()" *ngIf="selfSignUp">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
+                (click)="signIn()">{{ 'BUTTON.LOG_IN' | translate }}</button>
+            <a href="javascript:void(0)" class="signup" (click)="signUp()"
+                *ngIf="selfSignUp">{{ 'BUTTON.SIGN_UP_LINK' | translate }}</a>
         </div>
         <div>
-            <a href="https://github.com/goharbor/harbor" target="_blank" class="more-info-link">{{ 'BUTTON.MORE_INFO' | translate }}</a>
+            <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" >
+    <div *ngIf="appConfig.show_popular_repo" id="pop_repo" class="popular-repo-wrapper">
         <top-repo class="repo-container"></top-repo>
     </div>
 </div>

src/portal/src/app/account/sign-in/sign-in.component.scss

@@ -59,4 +59,7 @@
     .login {
         background:transparent;
     }
+}
+.title{
+    margin-bottom: 50px;
 }

src/portal/src/i18n/lang/en-us-lang.json

@@ -21,6 +21,7 @@
         "OK": "OK",
         "DELETE": "DELETE",
         "LOG_IN": "LOG IN",
+        "LOG_IN_OIDC": "Login via OIDC provider",
         "SIGN_UP_LINK": "Sign up for an account",
         "SIGN_UP": "SIGN UP",
         "CONFIRM": "CONFIRM",

src/portal/src/i18n/lang/es-es-lang.json

@@ -21,6 +21,7 @@
         "OK": "OK",
         "DELETE": "ELIMINAR",
         "LOG_IN": "IDENTIFICARSE",
+        "LOG_IN_OIDC": "Login Via OIDC proveedor",
         "SIGN_UP_LINK": "Registrar una cuenta",
         "SIGN_UP": "REGISTRARSE",
         "CONFIRM": "CONFIRMAR",

src/portal/src/i18n/lang/fr-fr-lang.json

@@ -21,6 +21,7 @@
         "OK": "OK",
         "DELETE": "SUPPRIMER",
         "LOG_IN": "S'IDENTIFIER",
+        "LOG_IN_OIDC": "Connexion via OIDC fournisseur",
         "SIGN_UP_LINK": "Ouvrir un compte",
         "SIGN_UP": "S'INSCRIRE",
         "CONFIRM": "CONFIRMER",

src/portal/src/i18n/lang/pt-br-lang.json

@@ -21,6 +21,7 @@
         "OK": "OK",
         "DELETE": "DELETAR",
         "LOG_IN": "LOG IN",
+        "LOG_IN_OIDC": "Login via OIDC provedor",
         "SIGN_UP_LINK": "Registre-se para uma conta",
         "SIGN_UP": "REGISTRE-Se",
         "CONFIRM": "CONFIRMAR",

src/portal/src/i18n/lang/zh-cn-lang.json

@@ -21,6 +21,7 @@
         "OK": "确定",
         "DELETE": "删除",
         "LOG_IN": "登录",
+        "LOG_IN_OIDC": "通过OIDC提供商登录",
         "SIGN_UP_LINK": "注册账号",
         "SIGN_UP": "注册",
         "CONFIRM": "确定",