Add ability to change email in client

11 files changed, 185 insertions, 14 deletions

diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/index.ts b/client/src/app/+my-account/my-account-settings/my-account-change-email/index.ts
new file mode 100644
index 000000000..f42af361e
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/index.ts
@@ -0,0 +1 @@
+export * from './my-account-change-email.component'
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
new file mode 100644
index 000000000..ebfe3126d
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -0,0 +1,36 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+<div *ngIf="success" class="alert alert-success">{{ success }}</div>
+
+<div i18n class="current-email">
+  Your current email is <span class="email">{{ user.email }}</span>
+</div>
+
+<div i18n class="pending-email" *ngIf="user.pendingEmail">
+  <span class="email">{{ user.pendingEmail }}</span> is awaiting email verification
+</div>
+
+<form role="form" (ngSubmit)="changeEmail()" [formGroup]="form">
+
+  <div class="form-group">
+    <label i18n for="new-email">New email</label>
+    <input
+      type="email" id="new-email" i18n-placeholder placeholder="Your new email"
+      formControlName="new-email" [ngClass]="{ 'input-error': formErrors['new-email'] }"
+    >
+    <div *ngIf="formErrors['new-email']" class="form-error">
+      {{ formErrors['new-email'] }}
+    </div>
+  </div>
+
+  <div class="form-group">
+    <input
+      type="password" id="password" i18n-placeholder placeholder="Your password"
+      formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
+    >
+    <div *ngIf="formErrors['password']" class="form-error">
+      {{ formErrors['password'] }}
+    </div>
+  </div>
+
+  <input type="submit" i18n-value value="Change email" [disabled]="!form.valid">
+</form>
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
new file mode 100644
index 000000000..81eba3ec9
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss
@@ -0,0 +1,24 @@
+@import '_variables';
+@import '_mixins';
+
+input[type=password],
+input[type=email] {
+  @include peertube-input-text(340px);
+
+  display: block;
+}
+
+input[type=submit] {
+  @include peertube-button;
+  @include orange-button;
+}
+
+.current-email,
+.pending-email {
+  font-size: 16px;
+  margin: 15px 0;
+
+  .email {
+    font-weight: $font-semibold;
+  }
+}
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
new file mode 100644
index 000000000..577c5b102
--- /dev/null
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.ts
@@ -0,0 +1,73 @@
+import { Component, OnInit } from '@angular/core'
+import { AuthService, Notifier, ServerService } from '@app/core'
+import { FormReactive, UserService } from '../../../shared'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { UserValidatorsService } from '@app/shared/forms/form-validators/user-validators.service'
+import { User } from '../../../../../../shared'
+import { switchMap, tap } from 'rxjs/operators'
+
+@Component({
+  selector: 'my-account-change-email',
+  templateUrl: './my-account-change-email.component.html',
+  styleUrls: [ './my-account-change-email.component.scss' ]
+})
+export class MyAccountChangeEmailComponent extends FormReactive implements OnInit {
+  error: string = null
+  success: string = null
+  user: User = null
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private userValidatorsService: UserValidatorsService,
+    private notifier: Notifier,
+    private authService: AuthService,
+    private userService: UserService,
+    private serverService: ServerService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      'new-email': this.userValidatorsService.USER_EMAIL,
+      'password': this.userValidatorsService.USER_PASSWORD
+    })
+
+    this.user = this.authService.getUser()
+  }
+
+  changeEmail () {
+    this.error = null
+    this.success = null
+
+    const password = this.form.value[ 'password' ]
+    const email = this.form.value[ 'new-email' ]
+
+    this.userService.changeEmail(password, email)
+        .pipe(
+          tap(() => this.authService.refreshUserInformation())
+        )
+        .subscribe(
+          () => {
+            this.form.reset()
+
+            if (this.serverService.getConfig().signup.requiresEmailVerification) {
+              this.success = this.i18n('Please check your emails to verify your new email.')
+            } else {
+              this.success = this.i18n('Email updated.')
+            }
+          },
+
+          err => {
+            if (err.status === 401) {
+              this.error = this.i18n('You current password is invalid.')
+              return
+            }
+
+            this.error = err.message
+          }
+        )
+  }
+}
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index ae797d1bc..a39061ee3 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -2,7 +2,7 @@
 
 <form role="form" (ngSubmit)="changePassword()" [formGroup]="form">
 
-  <label i18n for="new-password">Change password</label>
+  <label i18n for="current-password">Change password</label>
   <input
     type="password" id="current-password" i18n-placeholder placeholder="Current password"
     formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }"
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 ad64f28fe..f93d41110 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
@@ -13,6 +13,9 @@
 <div i18n class="account-title">Password</div>
 <my-account-change-password></my-account-change-password>
 
+<div i18n class="account-title">Email</div>
+<my-account-change-email></my-account-change-email>
+
 <div i18n class="account-title">Video settings</div>
 <my-account-video-settings [user]="user" [userInformationLoaded]="userInformationLoaded"></my-account-video-settings>
 
diff --git a/client/src/app/+my-account/my-account.module.ts b/client/src/app/+my-account/my-account.module.ts
index 4a18a9968..ca5b1f7cb 100644
--- a/client/src/app/+my-account/my-account.module.ts
+++ b/client/src/app/+my-account/my-account.module.ts
@@ -36,6 +36,7 @@ import {
   MyAccountVideoPlaylistElementsComponent
 } from '@app/+my-account/my-account-video-playlists/my-account-video-playlist-elements.component'
 import { DragDropModule } from '@angular/cdk/drag-drop'
+import { MyAccountChangeEmailComponent } from '@app/+my-account/my-account-settings/my-account-change-email'
 
 @NgModule({
   imports: [
@@ -54,7 +55,10 @@ import { DragDropModule } from '@angular/cdk/drag-drop'
     MyAccountChangePasswordComponent,
     MyAccountVideoSettingsComponent,
     MyAccountProfileComponent,
+    MyAccountChangeEmailComponent,
+
     MyAccountVideosComponent,
+
     VideoChangeOwnershipComponent,
     MyAccountOwnershipComponent,
     MyAccountAcceptOwnershipComponent,
diff --git a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
index 728709ca6..47519c943 100644
--- a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.html
@@ -3,13 +3,16 @@
     Verify account email confirmation
   </div>
 
-  <my-signup-success i18n *ngIf="success; else verificationError" message="Your email has been verified and you may now login.">
+  <my-signup-success i18n *ngIf="!isPendingEmail && success" message="Your email has been verified and you may now login.">
   </my-signup-success>
 
-  <ng-template #verificationError>
-    <div>
-      <span i18n>An error occurred. </span>
-      <a i18n routerLink="/verify-account/ask-send-email">Request new verification email.</a>
-    </div>
-  </ng-template>
+  <div i18n class="alert alert-success" *ngIf="isPendingEmail && success">
+    Email updated.
+  </div>
+
+  <div *ngIf="failed">
+    <span i18n>An error occurred.</span>
+
+    <a i18n routerLink="/verify-account/ask-send-email" [queryParams]="{ isPendingEmail: isPendingEmail }">Request new verification email.</a>
+  </div>
 </div>
diff --git a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
index 3fb2d1cd8..054f04310 100644
--- a/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
+++ b/client/src/app/+signup/+verify-account/verify-account-email/verify-account-email.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Notifier } from '@app/core'
+import { AuthService, Notifier } from '@app/core'
 import { UserService } from '@app/shared'
 
 @Component({
@@ -11,12 +11,15 @@ import { UserService } from '@app/shared'
 
 export class VerifyAccountEmailComponent implements OnInit {
   success = false
+  failed = false
+  isPendingEmail = false
 
   private userId: number
   private verificationString: string
 
   constructor (
     private userService: UserService,
+    private authService: AuthService,
     private notifier: Notifier,
     private router: Router,
     private route: ActivatedRoute,
@@ -25,8 +28,12 @@ export class VerifyAccountEmailComponent implements OnInit {
   }
 
   ngOnInit () {
-    this.userId = this.route.snapshot.queryParams['userId']
-    this.verificationString = this.route.snapshot.queryParams['verificationString']
+    const queryParams = this.route.snapshot.queryParams
+    this.userId = queryParams['userId']
+    this.verificationString = queryParams['verificationString']
+    this.isPendingEmail = queryParams['isPendingEmail'] === 'true'
+
+    console.log(this.isPendingEmail)
 
     if (!this.userId || !this.verificationString) {
       this.notifier.error(this.i18n('Unable to find user id or verification string.'))
@@ -36,13 +43,17 @@ export class VerifyAccountEmailComponent implements OnInit {
   }
 
   verifyEmail () {
-    this.userService.verifyEmail(this.userId, this.verificationString)
+    this.userService.verifyEmail(this.userId, this.verificationString, this.isPendingEmail)
       .subscribe(
         () => {
+          this.authService.refreshUserInformation()
+
           this.success = true
         },
 
         err => {
+          this.failed = true
+
           this.notifier.error(err.message)
         }
       )
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index e3ed2dfbd..14d13959a 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -8,6 +8,7 @@ export class User implements UserServerModel {
   id: number
   username: string
   email: string
+  pendingEmail: string | null
   emailVerified: boolean
   nsfwPolicy: NSFWPolicyType
 
diff --git a/client/src/app/shared/users/user.service.ts b/client/src/app/shared/users/user.service.ts
index 70ff9a058..41ee87197 100644
--- a/client/src/app/shared/users/user.service.ts
+++ b/client/src/app/shared/users/user.service.ts
@@ -38,6 +38,20 @@ export class UserService {
                )
   }
 
+  changeEmail (password: string, newEmail: string) {
+    const url = UserService.BASE_USERS_URL + 'me'
+    const body: UserUpdateMe = {
+      currentPassword: password,
+      email: newEmail
+    }
+
+    return this.authHttp.put(url, body)
+               .pipe(
+                 map(this.restExtractor.extractDataBool),
+                 catchError(err => this.restExtractor.handleError(err))
+               )
+  }
+
   updateMyProfile (profile: UserUpdateMe) {
     const url = UserService.BASE_USERS_URL + 'me'
 
@@ -104,10 +118,11 @@ export class UserService {
                )
   }
 
-  verifyEmail (userId: number, verificationString: string) {
+  verifyEmail (userId: number, verificationString: string, isPendingEmail: boolean) {
     const url = `${UserService.BASE_USERS_URL}/${userId}/verify-email`
     const body = {
-      verificationString
+      verificationString,
+      isPendingEmail
     }
 
     return this.authHttp.post(url, body)