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 | ||