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>
This commit is contained in:
Yogi_Wang 2019-04-01 18:07:34 +08:00
parent a06d711edd
commit da3620816f
7 changed files with 37 additions and 18 deletions

View File

@ -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">
<input class="username" type="text" required
[(ngModel)]="signInCredential.principal"
name="login_username" id="login_username" placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}'
#userNameInput='ngModel'>
<label for="username" aria-haspopup="true" role="tooltip"
class="tooltip tooltip-validation tooltip-md tooltip-top-left">
<input class="username" type="text" required [(ngModel)]="signInCredential.principal"
name="login_username" id="login_username" placeholder='{{"PLACEHOLDER.SIGN_IN_NAME" | translate}}'
#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">
<input class="password" type="password" required
[(ngModel)]="signInCredential.password"
name="login_password" id="login_password" placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}'
#passwordInput="ngModel">
<label for="username" aria-haspopup="true" role="tpopular-repo-wrapperooltip"
class="tooltip tooltip-validation tooltip-md tooltip-top-left">
<input class="password" type="password" required [(ngModel)]="signInCredential.password"
name="login_password" id="login_password" placeholder='{{"PLACEHOLDER.SIGN_IN_PWD" | translate}}'
#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>
<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"
(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>

View File

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

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

@ -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",

View File

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