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

   1 <div class="margin-content">
   2   <div class="title-page title-page-single">
   3     Login
   4   </div>
   5
   6   <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
   7
   8   <form role="form" (ngSubmit)="login()" [formGroup]="form">
   9     <div class="form-group">
  10       <div>
  11         <label for="username">User</label>
  12         <input
  13           type="text" id="username" placeholder="Username or email address" required tabindex="1"
  14           formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
  15         >
  16         <a *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
  17           or create an account
  18         </a>
  19
  20         <a *ngIf="signupAllowed === false" href="https://joinpeertube.org/en/#getting-started" target="_blank" class="create-an-account">
  21           or create an account on another instance
  22         </a>
  23
  24         <my-help
  25           *ngIf="signupAllowed === false" helpType="custom"
  26           customHtml="User registration is not allowed on this instance, but you can register on many others!"
  27         ></my-help>
  28       </div>
  29
  30       <div *ngIf="formErrors.username" class="form-error">
  31         {{ formErrors.username }}
  32       </div>
  33     </div>
  34
  35     <div class="form-group">
  36       <label for="password">Password</label>
  37       <div>
  38         <input
  39           type="password" name="password" id="password" placeholder="Password" required tabindex="2"
  40           formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
  41         >
  42         <div class="forgot-password-button" (click)="openForgotPasswordModal()">I forgot my password</div>
  43       </div>
  44       <div *ngIf="formErrors.password" class="form-error">
  45         {{ formErrors.password }}
  46       </div>
  47     </div>
  48
  49     <input type="submit" value="Login" [disabled]="!form.valid">
  50   </form>
  51 </div>
  52
  53 <div bsModal #forgotPasswordModal="bs-modal" (onShown)="onForgotPasswordModalShown()" class="modal" tabindex="-1">
  54   <div class="modal-dialog">
  55     <div class="modal-content">
  56
  57       <div class="modal-header">
  58         <span class="close" aria-hidden="true" (click)="hideForgotPasswordModal()"></span>
  59         <h4 class="modal-title">Forgot your password</h4>
  60       </div>
  61
  62       <div class="modal-body">
  63         <div class="form-group">
  64           <label for="forgot-password-email">Email</label>
  65           <input
  66             type="email" id="forgot-password-email" placeholder="Email address" required
  67             [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
  68           >
  69         </div>
  70
  71         <div class="form-group inputs">
  72           <span class="action-button action-button-cancel" (click)="hideForgotPasswordModal()">
  73             Cancel
  74           </span>
  75
  76           <input
  77             type="submit" value="Send me an email to reset my password" class="action-button-submit"
  78             (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
  79           >
  80         </div>
  81       </div>
  82     </div>
  83   </div>
  84 </div>