add previous button to registration form, with alignment

3 files changed, 16 insertions, 6 deletions

diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index bebc5d926..dc1c7496f 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -26,15 +26,15 @@
         <cdk-step [stepControl]="formStepUser" i18n-label="Stepper label for the registration page asking user informations" label="User">
           <my-register-step-user (formBuilt)="onUserFormBuilt($event)" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-user>
 
+          <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
           <button cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid" (click)="videoUploadDisabled && signup()">{{ stepUserButtonLabel }}</button>
         </cdk-step>
 
         <cdk-step [stepControl]="formStepChannel" i18n-label="Stepper label for the registration page asking information about the default channel" label="Channel" *ngIf="!videoUploadDisabled">
           <my-register-step-channel (formBuilt)="onChannelFormBuilt($event)" [username]="getUsername()"></my-register-step-channel>
 
-          <button i18n cdkStepperNext (click)="signup()"
-                  [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()"
-          >
+          <button cdkStepperPrevious>{{ defaultPreviousStepButtonLabel }}</button>
+          <button cdkStepperNext [disabled]="!formStepChannel || !formStepChannel.valid || hasSameChannelAndAccountNames()" (click)="signup()" i18n>
             Create my account
           </button>
         </cdk-step>
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index d22d58c4a..16ba9e2c0 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -55,7 +55,16 @@ input:not([type=submit]) {
 input[type=submit],
 button {
   @include peertube-button;
-  @include orange-button;
+
+  &[cdkStepperNext] {
+    @include orange-button;
+    float: inline-end;
+  }
+
+  &[cdkStepperPrevious] {
+    @include grey-button;
+    float: inline-start;
+  }
 }
 
 .name-information {
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts
index b1f5d8e93..8e89bb01a 100644
--- a/client/src/app/+signup/+register/register.component.ts
+++ b/client/src/app/+signup/+register/register.component.ts
@@ -38,7 +38,8 @@ export class RegisterComponent implements OnInit {
     moderation: false
   }
 
-  defaultNextStepButtonLabel = $localize`Next`
+  defaultPreviousStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Back`
+  defaultNextStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Next`
   stepUserButtonLabel = this.defaultNextStepButtonLabel
 
   private serverConfig: ServerConfig
@@ -60,7 +61,7 @@ export class RegisterComponent implements OnInit {
 
     this.videoUploadDisabled = this.serverConfig.user.videoQuota === 0
     this.stepUserButtonLabel = this.videoUploadDisabled
-      ? $localize`Signup`
+      ? $localize`:Button on the registration form to finalize the account and channel creation:Signup`
       : this.defaultNextStepButtonLabel
 
     this.hooks.runAction('action:signup.register.init', 'signup')