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

   1 <form role="form" [formGroup]="form">
   2
   3   <div class="capability-information alert alert-info" i18n *ngIf="videoUploadDisabled">
   4     Video uploads are disabled on this instance, hence your account won't be able to upload videos.
   5   </div>
   6
   7   <div class="form-group">
   8     <label for="displayName" i18n>Display name</label>
   9
  10     <div class="input-group">
  11       <input
  12         type="text" id="displayName" placeholder="John Doe"
  13         formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
  14       >
  15     </div>
  16
  17     <div *ngIf="formErrors.displayName" class="form-error">
  18       {{ formErrors.displayName }}
  19     </div>
  20   </div>
  21
  22   <div class="form-group">
  23     <label for="username" i18n>Username</label>
  24
  25     <div class="input-group">
  26       <input
  27         type="text" id="username" i18n-placeholder="Username choice placeholder in the registration form" placeholder="e.g. jane_doe"
  28         formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
  29       >
  30       <div class="input-group-append">
  31         <span class="input-group-text">@{{ instanceHost }}</span>
  32       </div>
  33     </div>
  34
  35     <div class="name-information" i18n>
  36       The username is a unique identifier of your account on this and all the other instances. It's as unique as an email address, which makes it easy for other people to interact with it.
  37     </div>
  38
  39     <div *ngIf="formErrors.username" class="form-error">
  40       {{ formErrors.username }}
  41     </div>
  42   </div>
  43
  44   <div class="form-group">
  45     <label for="email" i18n>Email</label>
  46     <input
  47       type="text" id="email" i18n-placeholder placeholder="Email"
  48       formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
  49     >
  50     <div *ngIf="formErrors.email" class="form-error">
  51       {{ formErrors.email }}
  52     </div>
  53   </div>
  54
  55   <div class="form-group">
  56     <label for="password" i18n>Password</label>
  57     <my-input-toggle-hidden formControlName="password" id="password"
  58                             i18n-placeholder placeholder="Password"
  59                             [ngClass]="{ 'input-error': formErrors['password'] }"
  60                             autocomplete="new-password"></my-input-toggle-hidden>
  61     <div *ngIf="formErrors.password" class="form-error">
  62       {{ formErrors.password }}
  63     </div>
  64   </div>
  65
  66   <div class="form-group form-group-terms">
  67     <my-peertube-checkbox inputName="terms" formControlName="terms">
  68       <ng-template ptTemplate="label">
  69         <ng-container i18n>
  70           I am at least 16 years old and agree
  71           to the <a (click)="onTermsClick($event)" href='#'>Terms</a>
  72           <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
  73           of this instance
  74         </ng-container>
  75       </ng-template>
  76     </my-peertube-checkbox>
  77
  78     <div *ngIf="formErrors.terms" class="form-error">
  79       {{ formErrors.terms }}
  80     </div>
  81   </div>
  82 </form>