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

   1 <h1 i18n class="title-page-v2">
   2   <strong class="underline-orange">{{ instanceName }}</strong>
   3   >
   4   Login
   5 </h1>
   6
   7 <div class="margin-content">
   8   <ng-container *ngIf="!externalAuthError && !isAuthenticatedWithExternalAuth">
   9
  10     <div class="alert pt-alert-primary" role="alert">
  11       <h5 class="alert-heading" i18n>
  12         Logging into an account lets you publish content
  13       </h5>
  14
  15       <p *ngIf="signupAllowed" i18n>
  16         This instance allows registration. However, be careful to check the <a class="link-orange terms-anchor d-inline" (click)="onTermsClick($event, instanceInformation)" href='#'>Terms</a><a class="terms-link" target="_blank" routerLink="/about/instance" fragment="terms">Terms</a> before creating an account.
  17         You may also search for another instance to match your exact needs at: <a class="link-orange" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
  18       </p>
  19
  20       <p *ngIf="!signupAllowed" i18n>
  21         Currently this instance doesn't allow for user registration, you may check the <a class="link-orange" (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.
  22         Find yours among multiple instances at: <a class="link-orange" href="https://joinpeertube.org/instances" target="_blank" rel="noopener noreferrer">https://joinpeertube.org/instances</a>.
  23       </p>
  24     </div>
  25
  26     <div class="alert alert-danger" i18n *ngIf="externalAuthError">
  27       Sorry but there was an issue with the external login process. Please <a class="link-orange" routerLink="/about">contact an administrator</a>.
  28     </div>
  29
  30     <div *ngIf="error" class="alert alert-danger">
  31       {{ error }}
  32
  33       <a *ngIf="error === 'User email is not verified.'" class="ms-1 link-orange" i18n routerLink="/verify-account/ask-send-email">
  34         Request new verification email
  35       </a>
  36     </div>
  37
  38     <div class="wrapper">
  39       <div class="login-form-and-externals">
  40
  41         <form class="w-100 m-0" myPluginSelector pluginSelectorId="login-form" role="form" (ngSubmit)="login()" [formGroup]="form">
  42           <ng-container *ngIf="!otpStep">
  43             <div class="form-group">
  44               <div>
  45                 <label i18n for="username">Username or email address</label>
  46                 <input
  47                   type="text" id="username" i18n-placeholder placeholder="Example: john@example.com" required tabindex="1"
  48                   formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
  49                 >
  50               </div>
  51
  52               <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div>
  53
  54               <div *ngIf="hasUsernameUppercase()" i18n class="form-warning">
  55                 ⚠️ Most email addresses do not include capital letters.
  56               </div>
  57             </div>
  58
  59             <div class="form-group">
  60               <label i18n for="password">Password</label>
  61
  62               <my-input-text
  63                 formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
  64                 [formError]="formErrors['password']" autocomplete="current-password" [tabindex]="2"
  65               ></my-input-text>
  66             </div>
  67           </ng-container>
  68
  69           <div *ngIf="otpStep" class="form-group">
  70             <p i18n>Enter the two-factor code generated by your phone app:</p>
  71
  72             <label i18n for="otp-token">Two factor authentication token</label>
  73
  74             <my-input-text
  75               #otpTokenInput
  76               [show]="true" formControlName="otp-token" inputId="otp-token"
  77               [formError]="formErrors['otp-token']" autocomplete="otp-token"
  78             ></my-input-text>
  79           </div>
  80
  81           <input type="submit" class="peertube-button orange-button w-100" i18n-value value="Login" [disabled]="!form.valid">
  82
  83           <div *ngIf="!otpStep" class="additional-links d-flex justify-content-center mt-4 mb-5">
  84             <button i18n class="button-unstyle link-orange mx-3" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">
  85               I forgot my password
  86             </button>
  87
  88             <ng-container *ngIf="signupAllowed">
  89               <span class="lh-1">·</span>
  90               <a i18n routerLink="/signup" class="link-orange mx-3">Create an account</a>
  91             </ng-container>
  92           </div>
  93         </form>
  94
  95         <div class="external-login-blocks" *ngIf="getExternalLogins().length !== 0">
  96           <div class="fw-semibold" i18n>Or sign in with</div>
  97
  98           <div>
  99             <a class="external-login-block" *ngFor="let auth of getExternalLogins()" [href]="getAuthHref(auth)" role="button">
 100               {{ auth.authDisplayName }}
 101             </a>
 102           </div>
 103         </div>
 104       </div>
 105
 106       <div #instanceInformation class="instance-information">
 107         <my-instance-about-accordion
 108           #instanceAboutAccordion
 109           [displayInstanceName]="false"
 110           (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"
 111           pluginScope="login" pluginHook="filter:login.instance-about-plugin-panels.create.result"
 112         ></my-instance-about-accordion>
 113       </div>
 114     </div>
 115   </ng-container>
 116 </div>
 117
 118 <ng-template #forgotPasswordModal>
 119   <div class="modal-header">
 120     <h4 i18n class="modal-title">Forgot your password</h4>
 121
 122     <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hideForgotPasswordModal()"></my-global-icon>
 123   </div>
 124
 125   <div class="modal-body text-start">
 126
 127     <div *ngIf="isEmailDisabled()" class="alert alert-danger" i18n>
 128       We are sorry, you cannot recover your password because your instance administrator did not configure the PeerTube email system.
 129     </div>
 130
 131     <div *ngIf="!isEmailDisabled()" class="mb-4" i18n>
 132       Enter your email address and we will send you a link to reset your password.
 133     </div>
 134
 135     <div class="form-group" [hidden]="isEmailDisabled()">
 136       <label i18n for="forgot-password-email">Email</label>
 137       <input
 138         type="email" id="forgot-password-email" i18n-placeholder placeholder="Email address" required
 139         [(ngModel)]="forgotPasswordEmail" #forgotPasswordEmailInput
 140       >
 141     </div>
 142   </div>
 143
 144   <div class="modal-footer inputs">
 145     <input
 146       type="button" role="button" i18n-value value="Cancel" class="peertube-button d-none d-sm-block"
 147       (click)="hideForgotPasswordModal()" (key.enter)="hideForgotPasswordModal()"
 148     >
 149
 150     <input
 151       type="submit" i18n-value="Password reset button" value="Reset" class="peertube-button orange-button"
 152       (click)="askResetPassword()" [disabled]="!forgotPasswordEmailInput.validity.valid"
 153     >
 154   </div>
 155 </ng-template>