11 files changed, 454 insertions, 0 deletions

diff --git a/client/src/app/+signup/+register/steps/index.ts b/client/src/app/+signup/+register/steps/index.ts
new file mode 100644
index 000000000..b5eae7468
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/index.ts
@@ -0,0 +1,4 @@
+export * from './register-step-about.component'
+export * from './register-step-channel.component'
+export * from './register-step-terms.component'
+export * from './register-step-user.component'
diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.html b/client/src/app/+signup/+register/steps/register-step-about.component.html
new file mode 100644
index 000000000..f93de8ce9
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.html
@@ -0,0 +1,39 @@
+<div class="why">
+  <h3 i18n>Why creating an account?</h3>
+
+  <p i18n>
+    As you probably noticed: creating an account is not necessary to watch video son {{ instanceName }}.
+    <br />
+    However, creating an account on {{ instanceName }} will allow you to:
+  </p>
+
+  <ul>
+    <li i18n><strong>Comment</strong> videos</li>
+    <li i18n><strong>Subscribe</strong> to channels to be notified of new videos</li>
+    <li i18n>Have access to your <strong>watch history</strong></li>
+    <li *ngIf="!videoUploadDisabled" i18n>Create your channel to <strong>publish videos</strong></li>
+  </ul>
+</div>
+
+<div>
+  <h4 i18n>You're using Mastodon, ActivityPub or a RSS feed aggregator?</h4>
+
+  <p i18n>
+    You can already follow {{ instanceName }} using your favorite tool.
+  </p>
+</div>
+
+<div class="callout callout-orange callout-light">
+  <div class="mascot-container" style="min-width: 140px">
+    <img class="mascot" width="140px" height="160px" src="/client/assets/images/mascot/happy.svg" alt="mascot"/>
+  </div>
+
+  <div class="callout-content">
+    <h4 i18>This website is a GAFAM alternative</h4>
+
+    <p i18n>
+      {{ instanceName }} has been created using <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://joinpeertube.org">PeerTube</a>, a video creation platform developed by Framasoft.
+      <a class="link-orange" target="_blank" rel="noopener noreferrer" href="https://framasoft.org">Framasoft</a> is a french non-profit organization that offers alternatives to Big Tech's digital tools
+    </p>
+  </div>
+</div>
diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.scss b/client/src/app/+signup/+register/steps/register-step-about.component.scss
new file mode 100644
index 000000000..ab6d6dd4d
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.scss
@@ -0,0 +1,53 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+h3 {
+  font-weight: $font-bold;
+  font-size: 24px;
+}
+
+h4 {
+  font-size: 18px;
+  font-weight: $font-bold;
+}
+
+.why {
+  margin-bottom: 30px;
+}
+
+.callout {
+  margin: 75px auto 25px;
+  border-width: 2px;
+  display: flex;
+
+  .mascot-container {
+    position: relative;
+
+    .mascot {
+      position: absolute;
+      top: -65px;
+    }
+  }
+
+  .callout-content {
+    margin-left: 30px;
+
+    p {
+      margin: 0;
+    }
+  }
+}
+
+@media screen and (max-width: $small-view) {
+  .callout {
+    margin-top: 20px;
+
+    .mascot-container {
+      display: none;
+    }
+
+    .callout-content {
+      margin-left: 0;
+    }
+  }
+}
diff --git a/client/src/app/+signup/+register/steps/register-step-about.component.ts b/client/src/app/+signup/+register/steps/register-step-about.component.ts
new file mode 100644
index 000000000..9a0941016
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-about.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input } from '@angular/core'
+import { ServerService } from '@app/core'
+
+@Component({
+  selector: 'my-register-step-about',
+  templateUrl: './register-step-about.component.html',
+  styleUrls: [ './register-step-about.component.scss' ]
+})
+export class RegisterStepAboutComponent {
+  @Input() videoUploadDisabled: boolean
+
+  constructor (private serverService: ServerService) {
+
+  }
+
+  get instanceName () {
+    return this.serverService.getHTMLConfig().instance.name
+  }
+}
diff --git a/client/src/app/+signup/+register/steps/register-step-channel.component.html b/client/src/app/+signup/+register/steps/register-step-channel.component.html
new file mode 100644
index 000000000..c79256c68
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-channel.component.html
@@ -0,0 +1,55 @@
+<div class="mb-5">
+  <p i18n>
+    You want to <strong>publish videos</strong> on {{ instanceName }}? Then you need to create your first <strong>channel</strong>.
+  </p>
+
+  <p i18n>
+    You might want to <strong>create a channel by theme:</strong> for example, you can create a channel named "SweetMelodies"
+    to publish your piano concerts and another one "Ecology" in which you publish your videos talking about ecology.
+  </p>
+
+  <p i18n *ngIf="videoQuota !== -1">
+    {{ instanceName }} administrators allow you to publish up to <strong>{{ videoQuota | bytes: 0 }} of videos</strong> on their website.
+  </p>
+</div>
+
+<form role="form" [formGroup]="form">
+
+  <div class="row">
+
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="displayName" i18n>Channel display name</label>
+
+      <div i18n class="form-group-description">This is the name that will be publicly visible by other users.</div>
+
+      <div class="input-group">
+        <input
+          type="text" id="displayName" i18n-placeholder placeholder="Example: Sweet Melodies"
+          formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+        >
+      </div>
+
+      <div *ngIf="formErrors.displayName" class="form-error">{{ formErrors.displayName }}</div>
+    </div>
+
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="name" i18n>Channel identifier</label>
+
+      <div i18n class="form-group-description">This is the name that will be displayed in your profile URL.</div>
+
+      <div class="input-group">
+        <input
+          type="text" id="name" i18n-placeholder placeholder="Example: sweetmelodies24"
+          formControlName="name" [ngClass]="{ 'input-error': formErrors['name'] }"
+        >
+        <div class="input-group-text">@{{ instanceHost }}</div>
+      </div>
+
+      <div *ngIf="formErrors.name" class="form-error">{{ formErrors.name }}</div>
+
+      <div *ngIf="isSameThanUsername()" class="form-error" i18n>
+        Channel identifier cannot be the same as your account name. You can click on the first step to update your account name.
+      </div>
+    </div>
+  </div>
+</form>
diff --git a/client/src/app/+signup/+register/steps/register-step-channel.component.ts b/client/src/app/+signup/+register/steps/register-step-channel.component.ts
new file mode 100644
index 000000000..c10b568ba
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-channel.component.ts
@@ -0,0 +1,57 @@
+import { concat, of } from 'rxjs'
+import { pairwise } from 'rxjs/operators'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { FormGroup } from '@angular/forms'
+import { VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR, VIDEO_CHANNEL_NAME_VALIDATOR } from '@app/shared/form-validators/video-channel-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { UserSignupService } from '@app/shared/shared-users'
+
+@Component({
+  selector: 'my-register-step-channel',
+  templateUrl: './register-step-channel.component.html',
+  styleUrls: [ './step.component.scss' ]
+})
+export class RegisterStepChannelComponent extends FormReactive implements OnInit {
+  @Input() username: string
+  @Input() instanceName: string
+  @Input() videoQuota: number
+
+  @Output() formBuilt = new EventEmitter<FormGroup>()
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private userSignupService: UserSignupService
+  ) {
+    super()
+  }
+
+  get instanceHost () {
+    return window.location.host
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      displayName: VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR,
+      name: VIDEO_CHANNEL_NAME_VALIDATOR
+    })
+
+    setTimeout(() => this.formBuilt.emit(this.form))
+
+    concat(
+      of(''),
+      this.form.get('displayName').valueChanges
+    ).pipe(pairwise())
+     .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
+  }
+
+  isSameThanUsername () {
+    return this.username && this.username === this.form.value['name']
+  }
+
+  private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
+    const name = this.form.value['name'] || ''
+
+    const newName = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, name)
+    this.form.patchValue({ name: newName })
+  }
+}
diff --git a/client/src/app/+signup/+register/steps/register-step-terms.component.html b/client/src/app/+signup/+register/steps/register-step-terms.component.html
new file mode 100644
index 000000000..f54ca77e2
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-terms.component.html
@@ -0,0 +1,16 @@
+<form role="form" [formGroup]="form">
+  <div class="form-group">
+    <my-peertube-checkbox inputName="terms" formControlName="terms">
+      <ng-template ptTemplate="label">
+        <ng-container i18n>
+          I am at least {{ minimumAge }} years old and agree
+          to the <a class="link-orange" (click)="onTermsClick($event)" href='#'>Terms</a>
+          <ng-container *ngIf="hasCodeOfConduct"> and to the <a (click)="onCodeOfConductClick($event)" href='#'>Code of Conduct</a></ng-container>
+          of this instance
+        </ng-container>
+      </ng-template>
+    </my-peertube-checkbox>
+
+    <div *ngIf="formErrors.terms" class="form-error">{{ formErrors.terms }}</div>
+  </div>
+</form>
diff --git a/client/src/app/+signup/+register/steps/register-step-terms.component.ts b/client/src/app/+signup/+register/steps/register-step-terms.component.ts
new file mode 100644
index 000000000..87d16696e
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-terms.component.ts
@@ -0,0 +1,48 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { FormGroup } from '@angular/forms'
+import {
+  USER_TERMS_VALIDATOR
+} from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+
+@Component({
+  selector: 'my-register-step-terms',
+  templateUrl: './register-step-terms.component.html',
+  styleUrls: [ './step.component.scss' ]
+})
+export class RegisterStepTermsComponent extends FormReactive implements OnInit {
+  @Input() hasCodeOfConduct = false
+  @Input() minimumAge = 16
+
+  @Output() formBuilt = new EventEmitter<FormGroup>()
+  @Output() termsClick = new EventEmitter<void>()
+  @Output() codeOfConductClick = new EventEmitter<void>()
+
+  constructor (
+    protected formValidatorService: FormValidatorService
+  ) {
+    super()
+  }
+
+  get instanceHost () {
+    return window.location.host
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      terms: USER_TERMS_VALIDATOR
+    })
+
+    setTimeout(() => this.formBuilt.emit(this.form))
+  }
+
+  onTermsClick (event: Event) {
+    event.preventDefault()
+    this.termsClick.emit()
+  }
+
+  onCodeOfConductClick (event: Event) {
+    event.preventDefault()
+    this.codeOfConductClick.emit()
+  }
+}
diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.html b/client/src/app/+signup/+register/steps/register-step-user.component.html
new file mode 100644
index 000000000..bffcf0346
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.html
@@ -0,0 +1,73 @@
+<div class="alert pt-alert-primary" i18n *ngIf="videoUploadDisabled">
+  Video uploads are disabled on this instance, hence your account won't be able to upload videos.
+</div>
+
+<form role="form" [formGroup]="form">
+  <div class="row">
+
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="displayName" i18n>Public name</label>
+
+      <div class="form-group-description" i18n>
+        This is the name that will be publicly visible by other users.
+      </div>
+
+      <div class="input-group">
+        <input
+          type="text" id="displayName" i18n-placeholder placeholder="Example: John Doe"
+          formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
+        >
+      </div>
+
+      <div *ngIf="formErrors.displayName" class="form-error">{{ formErrors.displayName }}</div>
+    </div>
+
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="username" i18n>Username</label>
+
+      <div class="form-group-description" i18n>
+        This is the name that will be displayed in your profile URL.
+      </div>
+
+      <div class="input-group">
+        <input
+          type="text" id="username" i18n-placeholder placeholder="Example: john_doe58"
+          formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }"
+        >
+        <span class="input-group-text">@{{ instanceHost }}</span>
+      </div>
+
+      <div *ngIf="formErrors.username" class="form-error">{{ formErrors.username }}</div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="email" i18n>Email</label>
+
+      <div *ngIf="requiresEmailVerification" class="form-group-description" i18n>
+        This email address will be used to validate your account.
+      </div>
+
+      <input
+        type="text" id="email" i18n-placeholder placeholder="Example: john@example.com"
+        formControlName="email" class="form-control" [ngClass]="{ 'input-error': formErrors['email'] }"
+      >
+
+      <div *ngIf="formErrors.email" class="form-error">{{ formErrors.email }}</div>
+    </div>
+
+    <div class="col-md-12 col-xl-6 form-group">
+      <label for="password" i18n>Password</label>
+
+      <div class="form-group-description">{{ getMinPasswordLengthMessage() }}</div>
+
+      <my-input-text
+        formControlName="password" inputId="password"
+        [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
+      ></my-input-text>
+
+      <div *ngIf="formErrors.password" class="form-error">{{ formErrors.password }}</div>
+    </div>
+  </div>
+</form>
diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.ts b/client/src/app/+signup/+register/steps/register-step-user.component.ts
new file mode 100644
index 000000000..b89e38a28
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.ts
@@ -0,0 +1,63 @@
+import { concat, of } from 'rxjs'
+import { pairwise } from 'rxjs/operators'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { FormGroup } from '@angular/forms'
+import {
+  USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
+  USER_EMAIL_VALIDATOR,
+  USER_PASSWORD_VALIDATOR,
+  USER_USERNAME_VALIDATOR
+} from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { UserSignupService } from '@app/shared/shared-users'
+
+@Component({
+  selector: 'my-register-step-user',
+  templateUrl: './register-step-user.component.html',
+  styleUrls: [ './step.component.scss' ]
+})
+export class RegisterStepUserComponent extends FormReactive implements OnInit {
+  @Input() videoUploadDisabled = false
+  @Input() requiresEmailVerification = false
+
+  @Output() formBuilt = new EventEmitter<FormGroup>()
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private userSignupService: UserSignupService
+  ) {
+    super()
+  }
+
+  get instanceHost () {
+    return window.location.host
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      displayName: USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
+      username: USER_USERNAME_VALIDATOR,
+      password: USER_PASSWORD_VALIDATOR,
+      email: USER_EMAIL_VALIDATOR
+    })
+
+    setTimeout(() => this.formBuilt.emit(this.form))
+
+    concat(
+      of(''),
+      this.form.get('displayName').valueChanges
+    ).pipe(pairwise())
+     .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
+  }
+
+  getMinPasswordLengthMessage () {
+    return USER_PASSWORD_VALIDATOR.MESSAGES.minlength
+  }
+
+  private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
+    const username = this.form.value['username'] || ''
+
+    const newUsername = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, username)
+    this.form.patchValue({ username: newUsername })
+  }
+}
diff --git a/client/src/app/+signup/+register/steps/step.component.scss b/client/src/app/+signup/+register/steps/step.component.scss
new file mode 100644
index 000000000..35cfdae91
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/step.component.scss
@@ -0,0 +1,27 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+input:not([type=submit]) {
+  @include peertube-input-text(100%);
+  display: block;
+
+  &#username,
+  &#name {
+    width: auto !important;
+    flex-grow: 1;
+  }
+}
+
+input[type=submit],
+button {
+  @include peertube-button;
+}
+
+label {
+  font-size: 18px;
+  margin-bottom: 5px;
+}
+
+.row {
+  margin-bottom: 30px;
+}