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 *ngIf="error" class="alert alert-danger">{{ error }}
   7     <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span>
   8   </div>
   9
  10   <form role="form" (ngSubmit)="login()" [formGroup]="form">
  11     <div class="form-group">
  12       <div>
  13         <label i18n for="username">User</label>
  14         <input
  15           type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
  16           formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" #emailInput
  17         >
  18         <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
  19           or create an account
  20         </a>
  21
  22         <a i18n *ngIf="signupAllowed === false" href="https://joinpeertube.org/en/#instances-list" target="_blank" title="Click here to see a list of instances where to register" class="create-an-account">
  23           or create an account on another instance
  24         </a>
  25
  26         <my-help *ngIf="signupAllowed === false">
  27           <ng-template ptTemplate="customHtml">
  28             <ng-container i18n>User registration is not allowed on this instance, but you can register on many others!</ng-container>
  29           </ng-template>
  30         </my-help>
  31       </div>
  32
  33       <div *ngIf="formErrors.username" class="form-error">
  34         {{ formErrors.username }}
  35       </div>
  36     </div>
  37
  38     <div class="form-group">
  39       <label i18n for="password">Password</label>
  40       <div>
  41         <input
  42           type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2"
  43           formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
  44         >
  45         <a i18n class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
  46       </div>
  47       <div *ngIf="formErrors.password" class="form-error">
  48         {{ formErrors.password }}
  49       </div>
  50     </div>
  51
  52     <input type="submit" i18n-value value="Login" [disabled]="!form.valid">
  53   </form>
  54 </div>
  55
  56 <ng-template #forgotPasswordModal>
  57   <div class="modal-header">
  58     <h4 i18n class="modal-title">Forgot your password</h4>
  59
  60     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
  61   </div>
  62
  63   <div class="modal-body">
  64
  65     <div *ngIf="isEmailDisabled()" class="alert alert-danger" i18n>
  66       We are sorry, you cannot recover you password because your instance administrator did not configure the PeerTube email system.
  67     </div>
  68
  69     <div class="form-group" [hidden]="isEmailDisabled()">
  70       <label i18n for="forgot-password-email">Email</label>
  71       <input
  72         type="email" id="forgot-password-email" i18n-placeholder placeholder="Email address" required
  73         [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
  74       >
  75     </div>
  76   </div>
  77
  78   <div class="modal-footer inputs">
  79     <span i18n class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">Cancel</span>
  80
  81     <input
  82       type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"
  83       (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
  84     >
  85   </div>
  86 </ng-template>