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

   1 <form role="form" [formGroup]="form">
   2
   3   <div class="form-group">
   4     <label for="displayName" i18n>Display name</label>
   5
   6     <div class="input-group">
   7       <input
   8         type="text" id="displayName" placeholder="John Doe"
   9         formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
  10       >
  11     </div>
  12
  13     <div *ngIf="formErrors.displayName" class="form-error">
  14       {{ formErrors.displayName }}
  15     </div>
  16   </div>
  17
  18   <div class="form-group">
  19     <label for="username" i18n>Username</label>
  20
  21     <div class="input-group">
  22       <input
  23         type="text" id="username" i18n-placeholder placeholder="Example: jane_doe"
  24         formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
  25       >
  26       <div class="input-group-append">
  27         <span class="input-group-text">@{{ instanceHost }}</span>
  28       </div>
  29     </div>
  30
  31     <div class="name-information" i18n>
  32       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.
  33     </div>
  34
  35     <div *ngIf="formErrors.username" class="form-error">
  36       {{ formErrors.username }}
  37     </div>
  38   </div>
  39
  40   <div class="form-group">
  41     <label for="email" i18n>Email</label>
  42     <input
  43       type="text" id="email" i18n-placeholder placeholder="Email"
  44       formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
  45     >
  46     <div *ngIf="formErrors.email" class="form-error">
  47       {{ formErrors.email }}
  48     </div>
  49   </div>
  50
  51   <div class="form-group">
  52     <label for="password" i18n>Password</label>
  53     <input
  54       type="password" id="password" i18n-placeholder placeholder="Password" autocomplete="new-password"
  55       formControlName="password" class="form-control" [ngClass]="{ 'input-error': formErrors['password'] }"
  56     >
  57     <div *ngIf="formErrors.password" class="form-error">
  58       {{ formErrors.password }}
  59     </div>
  60   </div>
  61
  62   <div class="form-group form-group-terms">
  63     <my-peertube-checkbox inputName="terms" formControlName="terms">
  64       <ng-template ptTemplate="label">
  65         <ng-container i18n>
  66           I am at least 16 years old and agree
  67           to the <a (click)="onTermsClick($event)" href='#'>Terms</a>
  68           <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
  69           of this instance
  70         </ng-container>
  71       </ng-template>
  72     </my-peertube-checkbox>
  73
  74     <div *ngIf="formErrors.terms" class="form-error">
  75       {{ formErrors.terms }}
  76     </div>
  77   </div>
  78 </form>