12 files changed, 260 insertions, 12 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
index 9b87daa40..235fbec4a 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
@@ -3,8 +3,8 @@ import { tap } from 'rxjs/operators'
 import { Component, OnInit } from '@angular/core'
 import { AuthService, ServerService, UserService } from '@app/core'
 import { USER_EMAIL_VALIDATOR, USER_PASSWORD_VALIDATOR } from '@app/shared/form-validators/user-validators'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { User } from '@shared/models'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
+import { HttpStatusCode, User } from '@shared/models'
 
 @Component({
   selector: 'my-account-change-email',
@@ -17,7 +17,7 @@ export class MyAccountChangeEmailComponent extends FormReactive implements OnIni
   user: User = null
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private authService: AuthService,
     private userService: UserService,
     private serverService: ServerService
@@ -57,7 +57,7 @@ export class MyAccountChangeEmailComponent extends FormReactive implements OnIni
         },
 
         error: err => {
-          if (err.status === 401) {
+          if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
             this.error = $localize`You current password is invalid.`
             return
           }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
index 47e54dc23..805d50070 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.ts
@@ -6,8 +6,8 @@ import {
   USER_EXISTING_PASSWORD_VALIDATOR,
   USER_PASSWORD_VALIDATOR
 } from '@app/shared/form-validators/user-validators'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
-import { User } from '@shared/models'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
+import { HttpStatusCode, User } from '@shared/models'
 
 @Component({
   selector: 'my-account-change-password',
@@ -19,7 +19,7 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
   user: User = null
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private notifier: Notifier,
     private authService: AuthService,
     private userService: UserService
@@ -57,7 +57,7 @@ export class MyAccountChangePasswordComponent extends FormReactive implements On
         },
 
         error: err => {
-          if (err.status === 401) {
+          if (err.status === HttpStatusCode.UNAUTHORIZED_401) {
             this.error = $localize`You current password is invalid.`
             return
           }
diff --git a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
index 2bae3499e..9619623ee 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.ts
@@ -18,7 +18,7 @@ export class MyAccountDangerZoneComponent {
   ) { }
 
   async deleteMe () {
-    const res = await this.confirmService.confirmWithInput(
+    const res = await this.confirmService.confirmWithExpectedInput(
       $localize`Are you sure you want to delete your account?` +
         '<br /><br />' +
         // eslint-disable-next-line max-len
diff --git a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
index f395ad73f..8621eb7aa 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
+++ b/client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.ts
@@ -2,7 +2,7 @@ import { Subject } from 'rxjs'
 import { Component, Input, OnInit } from '@angular/core'
 import { Notifier, User, UserService } from '@app/core'
 import { USER_DESCRIPTION_VALIDATOR, USER_DISPLAY_NAME_REQUIRED_VALIDATOR } from '@app/shared/form-validators/user-validators'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormReactiveService } from '@app/shared/shared-forms'
 
 @Component({
   selector: 'my-account-profile',
@@ -16,7 +16,7 @@ export class MyAccountProfileComponent extends FormReactive implements OnInit {
   error: string = null
 
   constructor (
-    protected formValidatorService: FormValidatorService,
+    protected formReactiveService: FormReactiveService,
     private notifier: Notifier,
     private userService: UserService
   ) {
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
index 42a8d0856..666205de6 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.html
@@ -62,6 +62,16 @@
   </div>
 </div>
 
+<div class="row mt-5" *ngIf="user.pluginAuth === null"> <!-- two factor auth grid -->
+  <div class="col-12 col-lg-4 col-xl-3">
+    <h2 i18n class="account-title">Two-factor authentication</h2>
+  </div>
+
+  <div class="col-12 col-lg-8 col-xl-9">
+    <my-account-two-factor-button [user]="user"  [userInformationLoaded]="userInformationLoaded"></my-account-two-factor-button>
+  </div>
+</div>
+
 <div class="row mt-5" *ngIf="user.pluginAuth === null"> <!-- email grid -->
   <div class="col-12 col-lg-4 col-xl-3">
     <h2 i18n class="account-title">EMAIL</h2>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
index 8206f4dd8..3d686a146 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
+++ b/client/src/app/+my-account/my-account-settings/my-account-settings.component.scss
@@ -1,6 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
-@use '~bootstrap/scss/functions' as *;
+@use 'bootstrap/scss/functions' as *;
 
 .account-title {
   @include settings-big-title;
diff --git a/client/src/app/+my-account/my-account-settings/my-account-two-factor/index.ts b/client/src/app/+my-account/my-account-settings/my-account-two-factor/index.ts
new file mode 100644
index 000000000..cc774bde3
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/index.ts
@@ -0,0 +1,2 @@
+export * from './my-account-two-factor-button.component'
+export * from './my-account-two-factor.component'
diff --git a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.html b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.html
new file mode 100644
index 000000000..2fcfffbf3
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.html
@@ -0,0 +1,12 @@
+<div class="two-factor">
+  <ng-container *ngIf="!twoFactorEnabled">
+    <p i18n>Two factor authentication adds an additional layer of security to your account by requiring a numeric code from another device (most commonly mobile phones) when you log in.</p>
+
+    <my-button [routerLink]="[ '/my-account/two-factor-auth' ]" className="orange-button-link" i18n>Enable two-factor authentication</my-button>
+  </ng-container>
+
+  <ng-container *ngIf="twoFactorEnabled">
+    <my-button className="orange-button" (click)="disableTwoFactor()" i18n>Disable two-factor authentication</my-button>
+  </ng-container>
+
+</div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.ts b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.ts
new file mode 100644
index 000000000..97ffb6013
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor-button.component.ts
@@ -0,0 +1,49 @@
+import { Subject } from 'rxjs'
+import { Component, Input, OnInit } from '@angular/core'
+import { AuthService, ConfirmService, Notifier, User } from '@app/core'
+import { TwoFactorService } from '@app/shared/shared-users'
+
+@Component({
+  selector: 'my-account-two-factor-button',
+  templateUrl: './my-account-two-factor-button.component.html'
+})
+export class MyAccountTwoFactorButtonComponent implements OnInit {
+  @Input() user: User = null
+  @Input() userInformationLoaded: Subject<any>
+
+  twoFactorEnabled = false
+
+  constructor (
+    private notifier: Notifier,
+    private twoFactorService: TwoFactorService,
+    private confirmService: ConfirmService,
+    private auth: AuthService
+  ) {
+  }
+
+  ngOnInit () {
+    this.userInformationLoaded.subscribe(() => {
+      this.twoFactorEnabled = this.user.twoFactorEnabled
+    })
+  }
+
+  async disableTwoFactor () {
+    const message = $localize`Are you sure you want to disable two factor authentication of your account?`
+
+    const { confirmed, password } = await this.confirmService.confirmWithPassword(message, $localize`Disable two factor`)
+    if (confirmed === false) return
+
+    this.twoFactorService.disableTwoFactor({ userId: this.user.id, currentPassword: password })
+      .subscribe({
+        next: () => {
+          this.twoFactorEnabled = false
+
+          this.auth.refreshUserInformation()
+
+          this.notifier.success($localize`Two factor authentication disabled`)
+        },
+
+        error: err => this.notifier.error(err.message)
+      })
+  }
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
new file mode 100644
index 000000000..16c344e3b
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.html
@@ -0,0 +1,54 @@
+<h1>
+  <my-global-icon iconName="cog" aria-hidden="true"></my-global-icon>
+  <ng-container i18n>Two factor authentication</ng-container>
+</h1>
+
+<div i18n *ngIf="twoFactorAlreadyEnabled === true" class="root already-enabled">
+  Two factor authentication is already enabled.
+</div>
+
+<div class="root" *ngIf="twoFactorAlreadyEnabled === false">
+  <ng-container *ngIf="step === 'request'">
+    <form role="form" (ngSubmit)="requestTwoFactor()" [formGroup]="formPassword">
+
+      <label i18n for="current-password">Your password</label>
+      <div class="form-group-description" i18n>Confirm your password to enable two factor authentication</div>
+
+      <my-input-text
+        formControlName="current-password" inputId="current-password" i18n-placeholder placeholder="Current password"
+        [formError]="formErrorsPassword['current-password']" autocomplete="current-password"
+      ></my-input-text>
+
+      <input class="peertube-button orange-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formPassword.valid">
+    </form>
+  </ng-container>
+
+  <ng-container *ngIf="step === 'confirm'">
+
+    <p i18n>
+      Scan this QR code into a TOTP app on your phone. This app will generate tokens that you will have to enter when logging in.
+    </p>
+
+    <qrcode [qrdata]="twoFactorURI" [width]="256" level="Q"></qrcode>
+
+    <div i18n>
+      If you can't scan the QR code and need to enter it manually, here is the plain-text secret:
+    </div>
+
+    <div class="secret-plain-text">{{ twoFactorSecret }}</div>
+
+    <form class="mt-3" role="form" (ngSubmit)="confirmTwoFactor()" [formGroup]="formOTP">
+
+      <label i18n for="otp-token">Two-factor code</label>
+      <div class="form-group-description" i18n>Enter the code generated by your authenticator app to confirm</div>
+
+      <my-input-text
+        [show]="true" formControlName="otp-token" inputId="otp-token"
+        [formError]="formErrorsOTP['otp-token']" autocomplete="otp-token"
+      ></my-input-text>
+
+      <input class="peertube-button orange-button mt-3" type="submit" i18n-value value="Confirm" [disabled]="!formOTP.valid">
+    </form>
+  </ng-container>
+
+</div>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.scss b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.scss
new file mode 100644
index 000000000..cee016bb8
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.scss
@@ -0,0 +1,16 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+.root {
+  max-width: 600px;
+}
+
+.secret-plain-text {
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+
+qrcode {
+  display: inline-block;
+  margin: auto;
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.ts b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.ts
new file mode 100644
index 000000000..259090d64
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-two-factor/my-account-two-factor.component.ts
@@ -0,0 +1,105 @@
+import { Component, OnInit } from '@angular/core'
+import { FormGroup } from '@angular/forms'
+import { Router } from '@angular/router'
+import { AuthService, Notifier, User } from '@app/core'
+import { USER_EXISTING_PASSWORD_VALIDATOR, USER_OTP_TOKEN_VALIDATOR } from '@app/shared/form-validators/user-validators'
+import { FormReactiveService } from '@app/shared/shared-forms'
+import { TwoFactorService } from '@app/shared/shared-users'
+
+@Component({
+  selector: 'my-account-two-factor',
+  templateUrl: './my-account-two-factor.component.html',
+  styleUrls: [ './my-account-two-factor.component.scss' ]
+})
+export class MyAccountTwoFactorComponent implements OnInit {
+  twoFactorAlreadyEnabled: boolean
+
+  step: 'request' | 'confirm' | 'confirmed' = 'request'
+
+  twoFactorSecret: string
+  twoFactorURI: string
+
+  inPasswordStep = true
+
+  formPassword: FormGroup
+  formErrorsPassword: any
+
+  formOTP: FormGroup
+  formErrorsOTP: any
+
+  private user: User
+  private requestToken: string
+
+  constructor (
+    private notifier: Notifier,
+    private twoFactorService: TwoFactorService,
+    private formReactiveService: FormReactiveService,
+    private auth: AuthService,
+    private router: Router
+  ) {
+  }
+
+  ngOnInit () {
+    this.buildPasswordForm()
+    this.buildOTPForm()
+
+    this.auth.userInformationLoaded.subscribe(() => {
+      this.user = this.auth.getUser()
+
+      this.twoFactorAlreadyEnabled = this.user.twoFactorEnabled
+    })
+  }
+
+  requestTwoFactor () {
+    this.twoFactorService.requestTwoFactor({
+      userId: this.user.id,
+      currentPassword: this.formPassword.value['current-password']
+    }).subscribe({
+      next: ({ otpRequest }) => {
+        this.requestToken = otpRequest.requestToken
+        this.twoFactorURI = otpRequest.uri
+        this.twoFactorSecret = otpRequest.secret.replace(/(.{4})/g, '$1 ').trim()
+
+        this.step = 'confirm'
+      },
+
+      error: err => this.notifier.error(err.message)
+    })
+  }
+
+  confirmTwoFactor () {
+    this.twoFactorService.confirmTwoFactorRequest({
+      userId: this.user.id,
+      requestToken: this.requestToken,
+      otpToken: this.formOTP.value['otp-token']
+    }).subscribe({
+      next: () => {
+        this.notifier.success($localize`Two factor authentication has been enabled.`)
+
+        this.auth.refreshUserInformation()
+
+        this.router.navigateByUrl('/my-account/settings')
+      },
+
+      error: err => this.notifier.error(err.message)
+    })
+  }
+
+  private buildPasswordForm () {
+    const { form, formErrors } = this.formReactiveService.buildForm({
+      'current-password': USER_EXISTING_PASSWORD_VALIDATOR
+    })
+
+    this.formPassword = form
+    this.formErrorsPassword = formErrors
+  }
+
+  private buildOTPForm () {
+    const { form, formErrors } = this.formReactiveService.buildForm({
+      'otp-token': USER_OTP_TOKEN_VALIDATOR
+    })
+
+    this.formOTP = form
+    this.formErrorsOTP = formErrors
+  }
+}