6 files changed, 238 insertions, 0 deletions

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
+  }
+}