client/src/app/+login/login.component.html

   1 <div class="margin-content">
   2   <div i18n class="title-page title-page-single">
   3     Login
   4   </div>
   5
   6   <div class="alert alert-danger" i18n *ngIf="externalAuthError">
   7     Sorry but there was an issue with the external login process. Please <a routerLink="/about">contact an administrator</a>.
   8   </div>
   9
  10   <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
  11     <div *ngIf="error" class="alert alert-danger">{{ error }}
  12       <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span>
  13     </div>
  14
  15     <div class="wrapper">
  16       <div class="login-form-and-externals">
  17
  18         <form myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
  19           <div class="form-group">
  20             <div>
  21               <label i18n for="username">User</label>
  22               <input
  23                 type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
  24                 formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
  25               >
  26             </div>
  27
  28             <div *ngIf="formErrors.username" class="form-error">
  29               {{ formErrors.username }}
  30             </div>
  31
  32             <div *ngIf="hasUsernameUppercase()" i18n class="form-warning">
  33               ⚠️ Most email addresses do not include capital letters.
  34             </div>
  35           </div>
  36
  37           <div class="form-group">
  38             <label i18n for="password">Password</label>
  39             <my-input-toggle-hidden formControlName="password" inputId="password"
  40                                     i18n-placeholder placeholder="Password"
  41                                     [ngClass]="{ 'input-error': formErrors['password'] }"
  42                                     autocomplete="current-password" [tabindex]="2"></my-input-toggle-hidden>
  43             <div *ngIf="formErrors.password" class="form-error">
  44               {{ formErrors.password }}
  45             </div>
  46           </div>
  47
  48           <input type="submit" class="peertube-button orange-button" i18n-value value="Login" [disabled]="!form.valid">
  49
  50           <div class="additionnal-links">
  51             <a i18n role="button" class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
  52
  53             <div *ngIf="signupAllowed" class="signup-link">
  54               <span>·</span>
  55               <a i18n routerLink="/signup" class="create-an-account">Create an account</a>
  56             </div>
  57           </div>
  58
  59           <div class="looking-for-account alert alert-info"  role="alert">
  60             <h6 class="alert-heading" i18n>
  61               Logging into an account lets you publish content
  62             </h6>
  63
  64             <div *ngIf="signupAllowed" i18n>
  65               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.
  66               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>.
  67             </div>
  68
  69             <div *ngIf="!signupAllowed" i18n>
  70               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.
  71               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>.
  72             </div>
  73           </div>
  74         </form>
  75
  76         <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
  77           <div class="block-title" i18n>Or sign in with</div>
  78
  79           <div>
  80             <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
  81               {{ auth.authDisplayName }}
  82             </a>
  83           </div>
  84         </div>
  85       </div>
  86
  87       <div #instanceInformation class="instance-information">
  88         <my-instance-about-accordion
  89           (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
  90           pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result"
  91         ></my-instance-about-accordion>
  92       </div>
  93     </div>
  94   </ng-container>
  95 </div>
  96
  97 <ng-template #forgotPasswordModal>
  98   <div class="modal-header">
  99     <h4 i18n class="modal-title">Forgot your password</h4>
 100
 101     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
 102   </div>
 103
 104   <div class="modal-body">
 105
 106     <div *ngIf="isEmailDisabled()" class="alert alert-danger" i18n>
 107       We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system.
 108     </div>
 109
 110     <div *ngIf="!isEmailDisabled()" class="forgot-password-instructions" i18n>
 111       Enter your email address and we will send you a link to reset your password.
 112     </div>
 113
 114     <div class="form-group" [hidden]="isEmailDisabled()">
 115       <label i18n for="forgot-password-email">Email</label>
 116       <input
 117         type="email" id="forgot-password-email" i18n-placeholder placeholder="Email address" required
 118         [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
 119       >
 120     </div>
 121   </div>
 122
 123   <div class="modal-footer inputs">
 124     <input
 125       type="button" role="button" i18n-value value="Cancel" class="peertube-button grey-button"
 126       (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
 127     >
 128
 129     <input
 130       type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
 131       (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
 132     >
 133   </div>
 134 </ng-template>