diff options
Diffstat (limited to 'client/src/app/+login/login.component.html')
-rw-r--r-- | client/src/app/+login/login.component.html | 108 |
1 files changed, 58 insertions, 50 deletions
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html index 390d77dd7..a2362d978 100644 --- a/client/src/app/+login/login.component.html +++ b/client/src/app/+login/login.component.html | |||
@@ -8,73 +8,81 @@ | |||
8 | </div> | 8 | </div> |
9 | 9 | ||
10 | <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth"> | 10 | <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth"> |
11 | <div class="looking-for-account alert alert-info" *ngIf="signupAllowed === false" role="alert"> | ||
12 | <h6 class="alert-heading" i18n> | ||
13 | If you are looking for an account… | ||
14 | </h6> | ||
15 | |||
16 | <div i18n> | ||
17 | Currently this instance doesn't allow for user registration, but you can find an instance | ||
18 | that gives you the possibility to sign up for an account and upload your videos there. | ||
19 | |||
20 | <br /> | ||
21 | |||
22 | Find yours among multiple instances at <a class="alert-link" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>. | ||
23 | </div> | ||
24 | </div> | ||
25 | |||
26 | <div *ngIf="error" class="alert alert-danger">{{ error }} | 11 | <div *ngIf="error" class="alert alert-danger">{{ error }} |
27 | <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span> | 12 | <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span> |
28 | </div> | 13 | </div> |
29 | 14 | ||
30 | <div class="login-form-and-externals"> | 15 | <div class="wrapper"> |
31 | 16 | <div class="login-form-and-externals"> | |
32 | <form role="form" (ngSubmit)="login()" [formGroup]="form"> | 17 | |
33 | <div class="form-group"> | 18 | <form role="form" (ngSubmit)="login()" [formGroup]="form"> |
34 | <div> | 19 | <div class="form-group"> |
35 | <label i18n for="username">User</label> | 20 | <div> |
36 | <input | 21 | <label i18n for="username">User</label> |
37 | type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1" | 22 | <input |
38 | formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" #usernameInput | 23 | type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1" |
39 | > | 24 | formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" #usernameInput |
40 | <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account"> | 25 | > |
41 | or create an account | 26 | </div> |
42 | </a> | 27 | |
28 | <div *ngIf="formErrors.username" class="form-error"> | ||
29 | {{ formErrors.username }} | ||
30 | </div> | ||
43 | </div> | 31 | </div> |
44 | 32 | ||
45 | <div *ngIf="formErrors.username" class="form-error"> | 33 | <div class="form-group"> |
46 | {{ formErrors.username }} | 34 | <label i18n for="password">Password</label> |
47 | </div> | ||
48 | </div> | ||
49 | |||
50 | <div class="form-group"> | ||
51 | <label i18n for="password">Password</label> | ||
52 | <div> | ||
53 | <my-input-toggle-hidden formControlName="password" id="password" | 35 | <my-input-toggle-hidden formControlName="password" id="password" |
54 | i18n-placeholder placeholder="Password" | 36 | i18n-placeholder placeholder="Password" |
55 | [ngClass]="{ 'input-error': formErrors['password'] }" | 37 | [ngClass]="{ 'input-error': formErrors['password'] }" |
56 | autocomplete="current-password"></my-input-toggle-hidden> | 38 | autocomplete="current-password" tabindex="2"></my-input-toggle-hidden> |
57 | <a i18n-title class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a> | 39 | <div *ngIf="formErrors.password" class="form-error"> |
40 | {{ formErrors.password }} | ||
41 | </div> | ||
58 | </div> | 42 | </div> |
59 | <div *ngIf="formErrors.password" class="form-error"> | 43 | |
60 | {{ formErrors.password }} | 44 | <input type="submit" i18n-value value="Login" [disabled]="!form.valid"> |
45 | |||
46 | <div class="additionnal-links"> | ||
47 | <a class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a> | ||
48 | <div *ngIf="signupAllowed" class="signup-link"> | ||
49 | <span>·</span> | ||
50 | <a i18n routerLink="/signup" class="create-an-account">Create an account</a> | ||
51 | </div> | ||
61 | </div> | 52 | </div> |
62 | </div> | ||
63 | 53 | ||
64 | <input type="submit" i18n-value value="Login" [disabled]="!form.valid"> | 54 | <div class="looking-for-account alert alert-info" role="alert"> |
65 | </form> | 55 | <h6 class="alert-heading" i18n> |
56 | Logging into an account lets you publish content | ||
57 | </h6> | ||
58 | |||
59 | <div *ngIf="signupAllowed" i18n> | ||
60 | This instance allows registration. However, be careful to check the <a class="terms-anchor" (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a><a class="terms-link" target="_blank" routerLink="/about/instance" fragment="terms">Terms</a> before creating an account. | ||
61 | You may also search for another instance to match your exact needs at: <br /><a class="alert-link" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>. | ||
62 | </div> | ||
63 | |||
64 | <div *ngIf="!signupAllowed" i18n> | ||
65 | Currently this instance doesn't allow for user registration, you may check the <a (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a> for more details or find an instance that gives you the possibility to sign up for an account and upload your videos there. | ||
66 | Find yours among multiple instances at: <br /> <a class="alert-link" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>. | ||
67 | </div> | ||
68 | </div> | ||
69 | </form> | ||
66 | 70 | ||
67 | <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0"> | 71 | <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0"> |
68 | <div class="block-title" i18n>Or sign in with</div> | 72 | <div class="block-title" i18n>Or sign in with</div> |
69 | 73 | ||
70 | <div> | 74 | <div> |
71 | <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button"> | 75 | <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button"> |
72 | {{ auth.authDisplayName }} | 76 | {{ auth.authDisplayName }} |
73 | </a> | 77 | </a> |
78 | </div> | ||
74 | </div> | 79 | </div> |
75 | </div> | 80 | </div> |
76 | </div> | ||
77 | 81 | ||
82 | <div #instanceInformation class="instance-information"> | ||
83 | <my-instance-about-accordion (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"></my-instance-about-accordion> | ||
84 | </div> | ||
85 | </div> | ||
78 | </ng-container> | 86 | </ng-container> |
79 | </div> | 87 | </div> |
80 | 88 | ||