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   <ng-container *ngIf="!isAuthenticatedWithExternalAuth">
   7     <div class="alert alert-info" *ngIf="signupAllowed === false" role="alert">
   8       <h6 class="alert-heading" i18n>
   9         If you are looking for an account…
  10       </h6>
  11
  12       <div i18n>
  13         Currently this instance doesn't allow for user registration, but you can find an instance
  14         that gives you the possibility to sign up for an account and upload your videos there.
  15
  16         <br />
  17
  18         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>.
  19       </div>
  20     </div>
  21
  22     <div *ngIf="error" class="alert alert-danger">{{ error }}
  23       <span *ngIf="error === 'User email is not verified.'"> <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a></span>
  24     </div>
  25
  26     <div class="login-form-and-externals">
  27
  28       <form role="form" (ngSubmit)="login()" [formGroup]="form">
  29         <div class="form-group">
  30           <div>
  31             <label i18n for="username">User</label>
  32             <input
  33               type="text" id="username" i18n-placeholder placeholder="Username or email address" required tabindex="1"
  34               formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" #usernameInput
  35             >
  36             <a i18n *ngIf="signupAllowed === true" routerLink="/signup" class="create-an-account">
  37               or create an account
  38             </a>
  39           </div>
  40
  41           <div *ngIf="formErrors.username" class="form-error">
  42             {{ formErrors.username }}
  43           </div>
  44         </div>
  45
  46         <div class="form-group">
  47           <label i18n for="password">Password</label>
  48           <div>
  49             <input
  50               type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2" autocomplete="current-password"
  51               formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
  52             >
  53             <a i18n-title class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
  54           </div>
  55           <div *ngIf="formErrors.password" class="form-error">
  56             {{ formErrors.password }}
  57           </div>
  58         </div>
  59
  60         <input type="submit" i18n-value value="Login" [disabled]="!form.valid">
  61       </form>
  62
  63       <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
  64         <div class="block-title" i18n>Or sign in with</div>
  65
  66         <div class="external-login-block">
  67           <a *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
  68             {{ auth.authDisplayName }}
  69           </a>
  70         </div>
  71       </div>
  72     </div>
  73
  74   </ng-container>
  75 </div>
  76
  77 <ng-template #forgotPasswordModal>
  78   <div class="modal-header">
  79     <h4 i18n class="modal-title">Forgot your password</h4>
  80
  81     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
  82   </div>
  83
  84   <div class="modal-body">
  85
  86     <div *ngIf="isEmailDisabled()" class="alert alert-danger" i18n>
  87       We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system.
  88     </div>
  89
  90     <div class="form-group" [hidden]="isEmailDisabled()">
  91       <label i18n for="forgot-password-email">Email</label>
  92       <input
  93         type="email" id="forgot-password-email" i18n-placeholder placeholder="Email address" required
  94         [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
  95       >
  96     </div>
  97   </div>
  98
  99   <div class="modal-footer inputs">
 100     <input
 101       type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
 102       (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
 103     >
 104
 105     <input
 106       type="submit" i18n-value value="Send me an email to reset my password" class="action-button-submit"
 107       (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
 108     >
 109   </div>
 110 </ng-template>