WIP: Divide login flow into two steps

related to Chocobozzz#6858

client/src/app/+login/login.component.html

@@ -44,11 +44,10 @@ <h5 class="alert-heading" i18n>
 
         <form class="w-100 m-0" myPluginSelector pluginSelectorId="login-form" (ngSubmit)="login()" [formGroup]="form">
           <ng-container *ngIf="!otpStep">
-            <div class="form-group">
+            <div class="form-group" *ngIf="currentLoginStep == 1">
               <div>
-                <label i18n for="username">Username or email address</label>
                 <input
-                  type="text" id="username" i18n-placeholder placeholder="Example: [email protected]" required
+                  type="text" id="username" i18n-placeholder placeholder="Email or username" required
                   formControlName="username" class="form-control" [ngClass]="{ 'input-error': formErrors['username'] }" myAutofocus
                   autocomplete="username"
                 >
@@ -59,11 +58,9 @@ <h5 class="alert-heading" i18n>
               <ng-template *ngIf="hasUsernameUppercase()" [ngTemplateOutlet]="uppercaseWarning"></ng-template>
             </div>
 
-            <div class="form-group">
-              <label i18n for="password">Password</label>
-
+            <div class="form-group" *ngIf="currentLoginStep == 2">
               <my-input-text
-                formControlName="password" inputId="password" i18n-placeholder placeholder="Password"
+                formControlName="password" inputId="password" i18n-placeholder placeholder="Password" [autofocus]="true"
                 [formError]="formErrors['password']" autocomplete="current-password"
               ></my-input-text>
             </div>
@@ -81,7 +78,7 @@ <h5 class="alert-heading" i18n>
             ></my-input-text>
           </div>
 
-          <input type="submit" class="peertube-button primary-button w-100" i18n-value value="Login" [disabled]="!form.valid">
+          <input type="submit" class="peertube-button primary-button w-100" i18n-value [value]="currentLoginStep === 1 ? 'Next' : 'Login'" [disabled]="!isFormValid()">
 
           <div *ngIf="!otpStep" class="additional-links d-flex justify-content-center mt-4 mb-5 text-center">
             <button type="button" i18n class="button-unstyle link-primary mx-3" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">

client/src/app/+login/login.component.ts

@@ -1,7 +1,7 @@
 import { NgClass, NgFor, NgIf, NgTemplateOutlet } from '@angular/common'
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
+import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { ActivatedRoute, Router, RouterLink } from '@angular/router'
+import { ActivatedRoute, NavigationEnd, Router, RouterLink } from '@angular/router'
 import { AuthService, Notifier, RedirectService, SessionStorageService, UserService } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/form-validators/login-validators'
@@ -19,6 +19,7 @@ import { GlobalIconComponent } from '../shared/shared-icons/global-icon.componen
 import { InstanceBannerComponent } from '../shared/shared-instance/instance-banner.component'
 import { AutofocusDirective } from '../shared/shared-main/common/autofocus.directive'
 import { PluginSelectorDirective } from '../shared/shared-main/plugins/plugin-selector.directive'
+import { filter, Subscription } from 'rxjs'
 
 @Component({
   selector: 'my-login',
@@ -43,14 +44,15 @@ import { PluginSelectorDirective } from '../shared/shared-main/plugins/plugin-se
   ]
 })
 
-export class LoginComponent extends FormReactive implements OnInit, AfterViewInit {
+export class LoginComponent extends FormReactive implements OnInit, AfterViewInit, OnDestroy {
   private static SESSION_STORAGE_REDIRECT_URL_KEY = 'login-previous-url'
 
   @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef
   @ViewChild('otpTokenInput') otpTokenInput: InputTextComponent
   @ViewChild('instanceAboutAccordion') instanceAboutAccordion: InstanceAboutAccordionComponent
 
   accordion: NgbAccordionDirective
+  currentLoginStep = 1
   error: string = null
   forgotPasswordEmail = ''
 
@@ -72,6 +74,7 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
 
   private openedForgotPasswordModal: NgbModalRef
   private serverConfig: ServerConfig
+  private routeSub: Subscription
 
   constructor (
     protected formReactiveService: FormReactiveService,
@@ -122,6 +125,15 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
       }
     })
 
+    this.routeSub = this.route.queryParams
+                        .subscribe((event) => {
+                          if (this.form.controls.username.invalid) {
+                            this.goToLoginStep(1)
+                          } else {
+                            this.currentLoginStep = !isNaN(event.step) ? +event.step : 1
+                          }
+                        })
+
     this.serverConfig = snapshot.data.serverConfig
 
     if (snapshot.queryParams.externalAuthToken) {
@@ -144,6 +156,10 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
     this.hooks.runAction('action:login.init', 'login')
   }
 
+  ngOnDestroy () {
+    if (this.routeSub) this.routeSub.unsubscribe()
+  }
+
   getExternalLogins () {
     return this.serverConfig.plugin.registeredExternalAuths
   }
@@ -156,7 +172,23 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni
     return getExternalAuthHref(environment.apiUrl, auth)
   }
 
+  isFormValid () {
+    if (this.currentLoginStep === 1) return this.form.controls.username.valid
+
+    return this.form.valid
+  }
+
+  goToLoginStep (step: number) {
+    this.router.navigate([], { relativeTo: this.route, queryParams: { step }, queryParamsHandling: 'merge' })
+  }
+
   login () {
+    if (this.currentLoginStep === 1) {
+      this.goToLoginStep(2)
+
+      return
+    }
+
     this.error = null
 
     const options = {