diff options
Diffstat (limited to 'client/src/app/+login/login.component.html')
-rw-r--r-- | client/src/app/+login/login.component.html | 46 |
1 files changed, 30 insertions, 16 deletions
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html index f3a2476f9..49b443a20 100644 --- a/client/src/app/+login/login.component.html +++ b/client/src/app/+login/login.component.html | |||
@@ -39,34 +39,48 @@ | |||
39 | <div class="login-form-and-externals"> | 39 | <div class="login-form-and-externals"> |
40 | 40 | ||
41 | <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form"> | 41 | <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form"> |
42 | <div class="form-group"> | 42 | <ng-container *ngIf="!otpStep"> |
43 | <div> | 43 | <div class="form-group"> |
44 | <label i18n for="username">Username or email address</label> | 44 | <div> |
45 | <input | 45 | <label i18n for="username">Username or email address</label> |
46 | type="text" id="username" i18n-placeholder placeholder="Example: john@example.com" required tabindex="1" | 46 | <input |
47 | formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus | 47 | type="text" id="username" i18n-placeholder placeholder="Example: john@example.com" required tabindex="1" |
48 | > | 48 | formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus |
49 | > | ||
50 | </div> | ||
51 | |||
52 | <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div> | ||
53 | |||
54 | <div *ngIf="hasUsernameUppercase()" i18n class="form-warning"> | ||
55 | ⚠️ Most email addresses do not include capital letters. | ||
56 | </div> | ||
49 | </div> | 57 | </div> |
50 | 58 | ||
51 | <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div> | 59 | <div class="form-group"> |
60 | <label i18n for="password">Password</label> | ||
52 | 61 | ||
53 | <div *ngIf="hasUsernameUppercase()" i18n class="form-warning"> | 62 | <my-input-text |
54 | ⚠️ Most email addresses do not include capital letters. | 63 | formControlName="password" inputId="password" i18n-placeholder placeholder="Password" |
64 | [formError]="formErrors['password']" autocomplete="current-password" [tabindex]="2" | ||
65 | ></my-input-text> | ||
55 | </div> | 66 | </div> |
56 | </div> | 67 | </ng-container> |
68 | |||
69 | <div *ngIf="otpStep" class="form-group"> | ||
70 | <p i18n>Enter the two-factor code generated by your phone app:</p> | ||
57 | 71 | ||
58 | <div class="form-group"> | 72 | <label i18n for="otp-token">Two factor authentication token</label> |
59 | <label i18n for="password">Password</label> | ||
60 | 73 | ||
61 | <my-input-text | 74 | <my-input-text |
62 | formControlName="password" inputId="password" i18n-placeholder placeholder="Password" | 75 | #otpTokenInput |
63 | [formError]="formErrors['password']" autocomplete="current-password" [tabindex]="2" | 76 | [show]="true" formControlName="otp-token" inputId="otp-token" |
77 | [formError]="formErrors['otp-token']" autocomplete="otp-token" | ||
64 | ></my-input-text> | 78 | ></my-input-text> |
65 | </div> | 79 | </div> |
66 | 80 | ||
67 | <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid"> | 81 | <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid"> |
68 | 82 | ||
69 | <div class="additional-links"> | 83 | <div *ngIf="!otpStep" class="additional-links"> |
70 | <a i18n role="button" class="link-orange" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a> | 84 | <a i18n role="button" class="link-orange" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a> |
71 | 85 | ||
72 | <ng-container *ngIf="signupAllowed"> | 86 | <ng-container *ngIf="signupAllowed"> |