client/src/app/+signup/+register/steps/register-step-user.component.html

   1 <div class="alert pt-alert-primary" i18n *ngIf="videoUploadDisabled">
   2   Video uploads are disabled on this instance, hence your account won't be able to upload videos.
   3 </div>
   4
   5 <form role="form" [formGroup]="form">
   6   <div class="row">
   7
   8     <div class="col-md-12 col-xl-6 form-group">
   9       <label for="displayName" i18n>Public name</label>
  10
  11       <div class="form-group-description" i18n>
  12         This is the name that will be publicly visible by other users.
  13       </div>
  14
  15       <div class="input-group">
  16         <input
  17           type="text" id="displayName" i18n-placeholder placeholder="Example: John Doe"
  18           formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
  19         >
  20       </div>
  21
  22       <div *ngIf="formErrors.displayName" class="form-error">{{ formErrors.displayName }}</div>
  23     </div>
  24
  25     <div class="col-md-12 col-xl-6 form-group">
  26       <label for="username" i18n>Username</label>
  27
  28       <div class="form-group-description" i18n>
  29         This is the name that will be displayed in your profile URL.
  30       </div>
  31
  32       <div class="input-group">
  33         <input
  34           type="text" id="username" i18n-placeholder placeholder="Example: john_doe58"
  35           formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
  36         >
  37         <span class="input-group-text">@{{ instanceHost }}</span>
  38       </div>
  39
  40       <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div>
  41     </div>
  42   </div>
  43
  44   <div class="row">
  45     <div class="col-md-12 col-xl-6 form-group">
  46       <label for="email" i18n>Email</label>
  47
  48       <div *ngIf="requiresEmailVerification" class="form-group-description" i18n>
  49         This email address will be used to validate your account.
  50       </div>
  51
  52       <input
  53         type="text" id="email" i18n-placeholder placeholder="Example: john@example.com"
  54         formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
  55       >
  56
  57       <div *ngIf="formErrors.email" class="form-error">{{ formErrors.email }}</div>
  58     </div>
  59
  60     <div class="col-md-12 col-xl-6 form-group">
  61       <label for="password" i18n>Password</label>
  62
  63       <div class="form-group-description">{{ getMinPasswordLengthMessage() }}</div>
  64
  65       <my-input-text
  66         formControlName="password" inputId="password"
  67         [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
  68       ></my-input-text>
  69
  70       <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
  71     </div>
  72   </div>
  73 </form>