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