bitwarden-estensione-browser/apps/web/src/app/auth/login/login.component.html

138 lines
4.4 KiB
HTML

<form
#form
(ngSubmit)="submit()"
[appApiAction]="formPromise"
class="tw-container tw-mx-auto"
[formGroup]="formGroup"
>
<div
class="tw-mx-auto tw-mt-5 tw-flex tw-max-w-lg tw-flex-col tw-items-center tw-justify-center tw-p-8"
>
<div>
<img class="logo logo-themed" alt="Bitwarden" />
<p class="tw-mx-4 tw-mb-4 tw-mt-3 tw-text-center tw-text-xl">
{{ "loginOrCreateNewAccount" | i18n }}
</p>
<div
class="tw-mt-3 tw-rounded-md tw-border tw-border-solid tw-border-secondary-300 tw-bg-background tw-p-6"
>
<ng-container *ngIf="!validatedEmail">
<div class="tw-mb-3">
<bit-form-field>
<bit-label>{{ "emailAddress" | i18n }}</bit-label>
<input
id="login_input_email"
bitInput
type="email"
formControlName="email"
appAutofocus
(keyup.enter)="validateEmail()"
/>
</bit-form-field>
</div>
<div class="tw-mb-3 tw-flex tw-items-start">
<bit-form-control class="tw-mb-0">
<input type="checkbox" bitCheckbox formControlName="rememberEmail" />
<bit-label>{{ "rememberEmail" | i18n }}</bit-label>
</bit-form-control>
</div>
<div class="tw-mb-3">
<button
bitButton
type="button"
buttonType="primary"
class="tw-w-full"
[disabled]="form.loading"
(click)="validateEmail()"
>
<span> {{ "continue" | i18n }} </span>
</button>
</div>
<hr />
<p class="tw-m-0 tw-text-sm">
{{ "newAroundHere" | i18n }}
<!--mousedown event is used over click because it prevents the validation from firing -->
<a routerLink="/register" (mousedown)="goToRegister()">{{ "createAccount" | i18n }}</a>
</p>
</ng-container>
<div [ngClass]="{ 'tw-hidden': !validatedEmail }">
<div class="tw-mb-6 tw-h-28">
<bit-form-field class="!tw-mb-1">
<bit-label>{{ "masterPass" | i18n }}</bit-label>
<input
id="login_input_master-password"
type="password"
bitInput
#masterPasswordInput
formControlName="masterPassword"
/>
<button type="button" bitSuffix bitIconButton bitPasswordInputToggle></button>
</bit-form-field>
<a
class="-tw-mt-2"
routerLink="/hint"
(mousedown)="goToHint()"
(click)="setFormValues()"
>{{ "getMasterPasswordHint" | i18n }}</a
>
</div>
<div [hidden]="!showCaptcha()">
<iframe id="hcaptcha_iframe" height="80"></iframe>
</div>
<div class="tw-mb-3 tw-flex tw-space-x-4">
<button
bitButton
buttonType="primary"
type="submit"
[block]="true"
[loading]="form.loading"
>
<span> {{ "loginWithMasterPassword" | i18n }} </span>
</button>
</div>
<div class="tw-mb-3" *ngIf="showLoginWithDevice && showPasswordless">
<button
bitButton
type="button"
[block]="true"
buttonType="secondary"
(click)="startPasswordlessLogin()"
>
<span> <i class="bwi bwi-mobile"></i> {{ "loginWithDevice" | i18n }} </span>
</button>
</div>
<div class="tw-mb-3">
<a
routerLink="/sso"
[queryParams]="{ email: formGroup.value.email }"
(click)="saveEmailSettings()"
bitButton
buttonType="secondary"
class="tw-w-full"
>
<i class="bwi bwi-provider tw-mr-2"></i>
{{ "enterpriseSingleSignOn" | i18n }}
</a>
</div>
<hr />
<div class="tw-m-0 tw-text-sm">
<p class="tw-mb-1">{{ "loggingInAs" | i18n }} {{ loggedEmail }}</p>
<a [routerLink]="[]" (click)="toggleValidateEmail(false)">{{ "notYou" | i18n }}</a>
</div>
</div>
</div>
</div>
</div>
</form>