9 files changed, 122 insertions, 69 deletions

diff --git a/client/src/app/+signup/shared/shared-signup.module.ts b/client/src/app/+signup/shared/shared-signup.module.ts
index f8b224c71..0aa08f3e2 100644
--- a/client/src/app/+signup/shared/shared-signup.module.ts
+++ b/client/src/app/+signup/shared/shared-signup.module.ts
@@ -3,6 +3,8 @@ import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedGlobalIconModule } from '@app/shared/shared-icons'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedUsersModule } from '@app/shared/shared-users'
+import { SignupMascotComponent } from './signup-mascot.component'
+import { SignupStepTitleComponent } from './signup-step-title.component'
 import { SignupSuccessComponent } from './signup-success.component'
 
 @NgModule({
@@ -14,7 +16,9 @@ import { SignupSuccessComponent } from './signup-success.component'
   ],
 
   declarations: [
-    SignupSuccessComponent
+    SignupSuccessComponent,
+    SignupStepTitleComponent,
+    SignupMascotComponent
   ],
 
   exports: [
@@ -22,7 +26,9 @@ import { SignupSuccessComponent } from './signup-success.component'
     SharedFormModule,
     SharedGlobalIconModule,
 
-    SignupSuccessComponent
+    SignupSuccessComponent,
+    SignupStepTitleComponent,
+    SignupMascotComponent
   ],
 
   providers: [
diff --git a/client/src/app/+signup/shared/signup-mascot.component.scss b/client/src/app/+signup/shared/signup-mascot.component.scss
new file mode 100644
index 000000000..5eebfb014
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-mascot.component.scss
@@ -0,0 +1,11 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.root {
+  display: inline-block;
+  width: 270px;
+}
+
+div ::ng-deep svg {
+  color: pvar(--mainColor);
+}
diff --git a/client/src/app/+signup/shared/signup-mascot.component.ts b/client/src/app/+signup/shared/signup-mascot.component.ts
new file mode 100644
index 000000000..a96ccffee
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-mascot.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core'
+import { DomSanitizer } from '@angular/platform-browser'
+
+const images = {
+  about: require('!!raw-loader?!../../../assets/images/mascot/register/about.svg').default,
+  terms: require('!!raw-loader?!../../../assets/images/mascot/register/terms.svg').default,
+  success: require('!!raw-loader?!../../../assets/images/mascot/register/success.svg').default,
+  channel: require('!!raw-loader?!../../../assets/images/mascot/register/channel.svg').default,
+  account: require('!!raw-loader?!../../../assets/images/mascot/register/account.svg').default
+}
+
+export type MascotImageName = keyof typeof images
+
+@Component({
+  selector: 'my-signup-mascot',
+  styleUrls: [ './signup-mascot.component.scss' ],
+  template: `<div class="root" [innerHTML]="html"></div>`
+})
+export class SignupMascotComponent {
+  @Input() imageName: MascotImageName
+
+  constructor (private sanitize: DomSanitizer) {
+
+  }
+
+  get html () {
+    return this.sanitize.bypassSecurityTrustHtml(images[this.imageName])
+  }
+}
diff --git a/client/src/app/+signup/shared/signup-step-title.component.html b/client/src/app/+signup/shared/signup-step-title.component.html
new file mode 100644
index 000000000..9cf4c4826
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-step-title.component.html
@@ -0,0 +1,9 @@
+<div class="step-content-title">
+  <my-signup-mascot [imageName]="mascotImageName"></my-signup-mascot>
+
+  <h2>
+    <ng-content></ng-content>
+  </h2>
+
+  <div class="step-content-title-separator"></div>
+</div>
diff --git a/client/src/app/+signup/shared/signup-step-title.component.scss b/client/src/app/+signup/shared/signup-step-title.component.scss
new file mode 100644
index 000000000..1e0cb2440
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-step-title.component.scss
@@ -0,0 +1,23 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.step-content-title {
+  text-align: center;
+  margin: auto;
+  margin-bottom: 45px;
+
+  h2 {
+    font-size: 32px;
+    font-weight: normal;
+    max-width: 300px;
+    margin: 15px auto 0;
+  }
+}
+
+.step-content-title-separator {
+  height: 6px;
+  width: 60px;
+  border-radius: 4px;
+  background-color: pvar(--mainColor);
+  margin: 5px auto 0;
+}
diff --git a/client/src/app/+signup/shared/signup-step-title.component.ts b/client/src/app/+signup/shared/signup-step-title.component.ts
new file mode 100644
index 000000000..9664eb7f3
--- /dev/null
+++ b/client/src/app/+signup/shared/signup-step-title.component.ts
@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core'
+import { MascotImageName } from './signup-mascot.component'
+
+@Component({
+  selector: 'my-signup-step-title',
+  templateUrl: './signup-step-title.component.html',
+  styleUrls: [ './signup-step-title.component.scss' ]
+})
+export class SignupStepTitleComponent {
+  @Input() mascotImageName: MascotImageName
+
+}
diff --git a/client/src/app/+signup/shared/signup-success.component.html b/client/src/app/+signup/shared/signup-success.component.html
index d66e8b568..c14889c72 100644
--- a/client/src/app/+signup/shared/signup-success.component.html
+++ b/client/src/app/+signup/shared/signup-success.component.html
@@ -1,20 +1,22 @@
-<!-- Thanks: Amit Singh Sansoya from https://codepen.io/amit3200/pen/zWMJOO -->
+<my-signup-step-title mascotImageName="success" i18n>
+  <strong>Welcome</strong>
+  <div>on {{ instanceName }}</div>
+</my-signup-step-title>
 
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
-  <circle class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
-  <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
-</svg>
+<div class="alert pt-alert-primary">
+  <p i18n>Your account has been created!</p>
 
-<p i18n class="bottom-message">Welcome to PeerTube!</p>
-
-<div *ngIf="message" class="alert alert-success">
-  <p>{{ message }}</p>
-
-  <p i18n>
-    If you need help to use PeerTube, you can have a look at the <a href="https://docs.joinpeertube.org/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
+  <p i18n *ngIf="requiresEmailVerification">
+    <strong>Check your emails</strong> to validate your account and complete your inscription.
   </p>
 
-  <p i18n>
-    To help moderators and other users to know <strong>who you are</strong>, don't forget to <a routerLink="/my-account/settings">set up your account profile</a> by adding an <strong>avatar</strong> and a <strong>description</strong>.
-  </p>
+  <ng-container *ngIf="!requiresEmailVerification">
+    <p i18n>
+      If you need help to use PeerTube, you can have a look at the <a class="link-orange" href="https://docs.joinpeertube.org/use-setup-account" target="_blank" rel="noopener noreferrer">documentation</a>.
+    </p>
+
+    <p i18n>
+      To help moderators and other users to know <strong>who you are</strong>, don't forget to <a class="link-orange" routerLink="/my-account/settings">set up your account profile</a> by adding an <strong>avatar</strong> and a <strong>description</strong>.
+    </p>
+  </ng-container>
 </div>
diff --git a/client/src/app/+signup/shared/signup-success.component.scss b/client/src/app/+signup/shared/signup-success.component.scss
index b302366e2..918349ba0 100644
--- a/client/src/app/+signup/shared/signup-success.component.scss
+++ b/client/src/app/+signup/shared/signup-success.component.scss
@@ -1,54 +1,6 @@
-svg {
-  width: 100px;
-  display: block;
-  margin: 40px auto 0;
-}
-
-.path {
-  stroke-dasharray: 1000;
-  stroke-dashoffset: 0;
-
-  &.circle {
-    animation: dash .9s ease-in-out;
-  }
-
-  &.line {
-    stroke-dashoffset: 1000;
-    animation: dash .9s .35s ease-in-out forwards;
-  }
-
-  &.check {
-    stroke-dashoffset: -100;
-    animation: dash-check .9s .35s ease-in-out forwards;
-  }
-}
-
-.bottom-message {
-  text-align: center;
-  margin: 20px 0 60px;
-  font-size: 1.25em;
-  color: #73AF55;
-}
-
 .alert {
-  font-size: 15px;
+  font-size: 18px;
+  max-width: 900px;
   text-align: center;
-}
-
-@keyframes dash {
-  0% {
-    stroke-dashoffset: 1000;
-  }
-  100% {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes dash-check {
-  0% {
-    stroke-dashoffset: -100;
-  }
-  100% {
-    stroke-dashoffset: 900;
-  }
+  margin: auto;
 }
diff --git a/client/src/app/+signup/shared/signup-success.component.ts b/client/src/app/+signup/shared/signup-success.component.ts
index 19fb5922a..a03f3819d 100644
--- a/client/src/app/+signup/shared/signup-success.component.ts
+++ b/client/src/app/+signup/shared/signup-success.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core'
+import { ServerService } from '@app/core'
 
 @Component({
   selector: 'my-signup-success',
@@ -6,5 +7,13 @@ import { Component, Input } from '@angular/core'
   styleUrls: [ './signup-success.component.scss' ]
 })
 export class SignupSuccessComponent {
-  @Input() message: string
+  @Input() requiresEmailVerification: boolean
+
+  constructor (private serverService: ServerService) {
+
+  }
+
+  get instanceName () {
+    return this.serverService.getHTMLConfig().instance.name
+  }
 }