|
|
|
@ -5,40 +5,73 @@ |
|
|
|
<form class="w-100" (ngSubmit)="onLoginWithAccessToken()"> |
|
|
|
<mat-form-field appearance="outline" class="without-hint w-100"> |
|
|
|
<mat-label i18n>Security Token</mat-label> |
|
|
|
<input matInput [formControl]="accessTokenFormControl" [type]="isAccessTokenHidden ? 'password' : 'text'" |
|
|
|
(keydown.enter)="onLoginWithAccessToken(); $event.preventDefault()" /> |
|
|
|
<button mat-button matSuffix type="button" (click)="isAccessTokenHidden = !isAccessTokenHidden"> |
|
|
|
<ion-icon [name]="isAccessTokenHidden ? 'eye-outline' : 'eye-off-outline'" /> |
|
|
|
<input |
|
|
|
matInput |
|
|
|
[formControl]="accessTokenFormControl" |
|
|
|
[type]="isAccessTokenHidden ? 'password' : 'text'" |
|
|
|
(keydown.enter)="onLoginWithAccessToken(); $event.preventDefault()" |
|
|
|
/> |
|
|
|
<button |
|
|
|
mat-button |
|
|
|
matSuffix |
|
|
|
type="button" |
|
|
|
(click)="isAccessTokenHidden = !isAccessTokenHidden" |
|
|
|
> |
|
|
|
<ion-icon |
|
|
|
[name]="isAccessTokenHidden ? 'eye-outline' : 'eye-off-outline'" |
|
|
|
/> |
|
|
|
</button> |
|
|
|
</mat-form-field> |
|
|
|
|
|
|
|
<!-- Hidden submit button to enable form submission with Enter key --> |
|
|
|
<button type="submit" style="display: none">Submit</button> |
|
|
|
<button style="display: none" type="submit">Submit</button> |
|
|
|
</form> |
|
|
|
|
|
|
|
@if (data.hasPermissionToUseSocialLogin) { |
|
|
|
<div class="my-3 text-center text-muted" i18n>or</div> |
|
|
|
<div class="d-flex flex-column"> |
|
|
|
<button class="mb-2 px-4 rounded-pill" mat-stroked-button (click)="onLoginWithInternetIdentity()"> |
|
|
|
<img class="mr-2" src="../assets/icons/internet-computer.svg" style="height: 0.75rem" /><span i18n>Sign in with |
|
|
|
Internet Identity</span> |
|
|
|
</button> |
|
|
|
<a class="px-4 rounded-pill" href="../api/v1/auth/google" mat-stroked-button><img class="mr-2" |
|
|
|
src="../assets/icons/google.svg" style="height: 1rem" /><span i18n>Sign in with Google</span></a> |
|
|
|
</div> |
|
|
|
<div class="my-3 text-center text-muted" i18n>or</div> |
|
|
|
<div class="d-flex flex-column"> |
|
|
|
<button |
|
|
|
class="mb-2 px-4 rounded-pill" |
|
|
|
mat-stroked-button |
|
|
|
(click)="onLoginWithInternetIdentity()" |
|
|
|
> |
|
|
|
<img |
|
|
|
class="mr-2" |
|
|
|
src="../assets/icons/internet-computer.svg" |
|
|
|
style="height: 0.75rem" |
|
|
|
/><span i18n>Sign in with Internet Identity</span> |
|
|
|
</button> |
|
|
|
<a |
|
|
|
class="px-4 rounded-pill" |
|
|
|
href="../api/v1/auth/google" |
|
|
|
mat-stroked-button |
|
|
|
><img |
|
|
|
class="mr-2" |
|
|
|
src="../assets/icons/google.svg" |
|
|
|
style="height: 1rem" |
|
|
|
/><span i18n>Sign in with Google</span></a |
|
|
|
> |
|
|
|
</div> |
|
|
|
} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div mat-dialog-actions> |
|
|
|
<div class="flex-grow-1"> |
|
|
|
<mat-checkbox color="primary" i18n (change)="onChangeStaySignedIn($event)">Stay signed in</mat-checkbox> |
|
|
|
<mat-checkbox color="primary" i18n (change)="onChangeStaySignedIn($event)" |
|
|
|
>Stay signed in</mat-checkbox |
|
|
|
> |
|
|
|
</div> |
|
|
|
<div> |
|
|
|
<button color="primary" mat-flat-button [disabled]=" |
|
|
|
<button |
|
|
|
color="primary" |
|
|
|
mat-flat-button |
|
|
|
[disabled]=" |
|
|
|
!(accessTokenFormControl.dirty && accessTokenFormControl.valid) |
|
|
|
" (click)="onLoginWithAccessToken()"> |
|
|
|
" |
|
|
|
(click)="onLoginWithAccessToken()" |
|
|
|
> |
|
|
|
<ng-container i18n>Sign in</ng-container> |
|
|
|
</button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|