Implement two factor in client

8 files changed, 133 insertions, 15 deletions

diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts
index 3262853d8..b93de75ea 100644
--- a/client/src/app/shared/form-validators/user-validators.ts
+++ b/client/src/app/shared/form-validators/user-validators.ts
@@ -61,6 +61,15 @@ export const USER_EXISTING_PASSWORD_VALIDATOR: BuildFormValidator = {
   }
 }
 
+export const USER_OTP_TOKEN_VALIDATOR: BuildFormValidator = {
+  VALIDATORS: [
+    Validators.required
+  ],
+  MESSAGES: {
+    required: $localize`OTP token is required.`
+  }
+}
+
 export const USER_PASSWORD_VALIDATOR = {
   VALIDATORS: [
     Validators.required,
diff --git a/client/src/app/shared/shared-forms/form-reactive.service.ts b/client/src/app/shared/shared-forms/form-reactive.service.ts
new file mode 100644
index 000000000..69077eb07
--- /dev/null
+++ b/client/src/app/shared/shared-forms/form-reactive.service.ts
@@ -0,0 +1,101 @@
+import { Injectable } from '@angular/core'
+import { AbstractControl, FormGroup } from '@angular/forms'
+import { wait } from '@root-helpers/utils'
+import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
+import { FormValidatorService } from './form-validator.service'
+
+export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
+export type FormReactiveValidationMessages = {
+  [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
+}
+
+@Injectable()
+export class FormReactiveService {
+
+  constructor (private formValidatorService: FormValidatorService) {
+
+  }
+
+  buildForm (obj: BuildFormArgument, defaultValues: BuildFormDefaultValues = {}) {
+    const { formErrors, validationMessages, form } = this.formValidatorService.buildForm(obj, defaultValues)
+
+    form.statusChanges.subscribe(async () => {
+      // FIXME: remove when https://github.com/angular/angular/issues/41519 is fixed
+      await this.waitPendingCheck(form)
+
+      this.onStatusChanged({ form, formErrors, validationMessages })
+    })
+
+    return { form, formErrors, validationMessages }
+  }
+
+  async waitPendingCheck (form: FormGroup) {
+    if (form.status !== 'PENDING') return
+
+    // FIXME: the following line does not work: https://github.com/angular/angular/issues/41519
+    // return firstValueFrom(form.statusChanges.pipe(filter(status => status !== 'PENDING')))
+    // So we have to fallback to active wait :/
+
+    do {
+      await wait(10)
+    } while (form.status === 'PENDING')
+  }
+
+  markAllAsDirty (controlsArg: { [ key: string ]: AbstractControl }) {
+    const controls = controlsArg
+
+    for (const key of Object.keys(controls)) {
+      const control = controls[key]
+
+      if (control instanceof FormGroup) {
+        this.markAllAsDirty(control.controls)
+        continue
+      }
+
+      control.markAsDirty()
+    }
+  }
+
+  protected forceCheck (form: FormGroup, formErrors: any, validationMessages: FormReactiveValidationMessages) {
+    this.onStatusChanged({ form, formErrors, validationMessages, onlyDirty: false })
+  }
+
+  private onStatusChanged (options: {
+    form: FormGroup
+    formErrors: FormReactiveErrors
+    validationMessages: FormReactiveValidationMessages
+    onlyDirty?: boolean // default true
+  }) {
+    const { form, formErrors, validationMessages, onlyDirty = true } = options
+
+    for (const field of Object.keys(formErrors)) {
+      if (formErrors[field] && typeof formErrors[field] === 'object') {
+        this.onStatusChanged({
+          form: form.controls[field] as FormGroup,
+          formErrors: formErrors[field] as FormReactiveErrors,
+          validationMessages: validationMessages[field] as FormReactiveValidationMessages,
+          onlyDirty
+        })
+
+        continue
+      }
+
+      // clear previous error message (if any)
+      formErrors[field] = ''
+      const control = form.get(field)
+
+      if (!control || (onlyDirty && !control.dirty) || !control.enabled || !control.errors) continue
+
+      const staticMessages = validationMessages[field]
+      for (const key of Object.keys(control.errors)) {
+        const formErrorValue = control.errors[key]
+
+        // Try to find error message in static validation messages first
+        // Then check if the validator returns a string that is the error
+        if (staticMessages[key]) formErrors[field] += staticMessages[key] + ' '
+        else if (typeof formErrorValue === 'string') formErrors[field] += control.errors[key]
+        else throw new Error('Form error value of ' + field + ' is invalid')
+      }
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-forms/form-reactive.ts b/client/src/app/shared/shared-forms/form-reactive.ts
index a19ffdd82..acaeaba33 100644
--- a/client/src/app/shared/shared-forms/form-reactive.ts
+++ b/client/src/app/shared/shared-forms/form-reactive.ts
@@ -1,14 +1,9 @@
-
 import { AbstractControl, FormGroup } from '@angular/forms'
 import { wait } from '@root-helpers/utils'
 import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
+import { FormReactiveErrors, FormReactiveValidationMessages } from './form-reactive.service'
 import { FormValidatorService } from './form-validator.service'
 
-export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors }
-export type FormReactiveValidationMessages = {
-  [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages
-}
-
 export abstract class FormReactive {
   protected abstract formValidatorService: FormValidatorService
   protected formChanged = false
diff --git a/client/src/app/shared/shared-forms/form-validator.service.ts b/client/src/app/shared/shared-forms/form-validator.service.ts
index f67d5bb33..897008242 100644
--- a/client/src/app/shared/shared-forms/form-validator.service.ts
+++ b/client/src/app/shared/shared-forms/form-validator.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core'
 import { AsyncValidatorFn, FormArray, FormBuilder, FormControl, FormGroup, ValidatorFn } from '@angular/forms'
 import { BuildFormArgument, BuildFormDefaultValues } from '../form-validators/form-validator.model'
-import { FormReactiveErrors, FormReactiveValidationMessages } from './form-reactive'
+import { FormReactiveErrors, FormReactiveValidationMessages } from './form-reactive.service'
 
 @Injectable()
 export class FormValidatorService {
diff --git a/client/src/app/shared/shared-forms/index.ts b/client/src/app/shared/shared-forms/index.ts
index 495785e7b..bff9862f2 100644
--- a/client/src/app/shared/shared-forms/index.ts
+++ b/client/src/app/shared/shared-forms/index.ts
@@ -1,4 +1,5 @@
 export * from './advanced-input-filter.component'
+export * from './form-reactive.service'
 export * from './form-reactive'
 export * from './form-validator.service'
 export * from './form-validator.service'
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index d667ed663..aa4a1cba8 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -1,4 +1,4 @@
-import { Component, forwardRef, Input } from '@angular/core'
+import { Component, ElementRef, forwardRef, Input, ViewChild } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 import { Notifier } from '@app/core'
 
@@ -15,6 +15,8 @@ import { Notifier } from '@app/core'
   ]
 })
 export class InputTextComponent implements ControlValueAccessor {
+  @ViewChild('input') inputElement: ElementRef
+
   @Input() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
   @Input() value = ''
   @Input() autocomplete = 'off'
@@ -65,4 +67,10 @@ export class InputTextComponent implements ControlValueAccessor {
   update () {
     this.propagateChange(this.value)
   }
+
+  focus () {
+    const el: HTMLElement = this.inputElement.nativeElement
+
+    el.focus({ preventScroll: true })
+  }
 }
diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts
index 81f076db6..628affb56 100644
--- a/client/src/app/shared/shared-forms/shared-form.module.ts
+++ b/client/src/app/shared/shared-forms/shared-form.module.ts
@@ -1,4 +1,3 @@
-
 import { InputMaskModule } from 'primeng/inputmask'
 import { NgModule } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
@@ -7,6 +6,7 @@ import { SharedGlobalIconModule } from '../shared-icons'
 import { SharedMainModule } from '../shared-main/shared-main.module'
 import { AdvancedInputFilterComponent } from './advanced-input-filter.component'
 import { DynamicFormFieldComponent } from './dynamic-form-field.component'
+import { FormReactiveService } from './form-reactive.service'
 import { FormValidatorService } from './form-validator.service'
 import { InputSwitchComponent } from './input-switch.component'
 import { InputTextComponent } from './input-text.component'
@@ -96,7 +96,8 @@ import { TimestampInputComponent } from './timestamp-input.component'
   ],
 
   providers: [
-    FormValidatorService
+    FormValidatorService,
+    FormReactiveService
   ]
 })
 export class SharedFormModule { }
diff --git a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
index e4b74f3ad..93b3a93d6 100644
--- a/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
+++ b/client/src/app/shared/shared-main/auth/auth-interceptor.service.ts
@@ -27,13 +27,16 @@ export class AuthInterceptor implements HttpInterceptor {
                .pipe(
                  catchError((err: HttpErrorResponse) => {
                    const error = err.error as PeerTubeProblemDocument
+                   const isOTPMissingError = this.authService.isOTPMissingError(err)
 
-                   if (err.status === HttpStatusCode.UNAUTHORIZED_401 && error && error.code === OAuth2ErrorCode.INVALID_TOKEN) {
-                     return this.handleTokenExpired(req, next)
-                   }
+                   if (!isOTPMissingError) {
+                     if (err.status === HttpStatusCode.UNAUTHORIZED_401 && error && error.code === OAuth2ErrorCode.INVALID_TOKEN) {
+                       return this.handleTokenExpired(req, next)
+                     }
 
-                   if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
-                     return this.handleNotAuthenticated(err)
+                     if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
+                       return this.handleNotAuthenticated(err)
+                     }
                    }
 
                    return observableThrowError(() => err)