Added email change flow for logged-in member (#33)

refs https://github.com/TryGhost/members.js/issues/30
Depends on https://github.com/TryGhost/Members/pull/161

- Calls send magic link API with old email option when a member updates their email address
- Allows member to update their email address by clicking on magic link on new email address

ghost/portal/src/components/ParentContainer.js

@@ -166,6 +166,11 @@ export default class ParentContainer extends React.Component {
                     action: 'signup:success',
                     page: 'magiclink'
                 });
+            } else if (action === 'updateEmail') {
+                await this.GhostApi.member.sendMagicLink(data);
+                this.setState({
+                    action: 'updateEmail:success'
+                });
             } else if (action === 'checkoutPlan') {
                 const {plan} = data;
                 await this.GhostApi.member.checkoutPlan({

ghost/portal/src/components/pages/AccountProfilePage.js

@@ -11,9 +11,10 @@ export default class AccountProfilePage extends React.Component {
 
     constructor(props, context) {
         super(props, context);
+        const {name = '', email = ''} = context.member;
         this.state = {
-            name: this.context.member.name || '',
-            email: this.context.member.email || ''
+            name,
+            email
         };
     }
 
@@ -28,6 +29,10 @@ export default class AccountProfilePage extends React.Component {
 
     onProfileSave(e) {
         const {email, name} = this.state;
+        const originalEmail = this.context.member.email;
+        if (email !== originalEmail) {
+            this.context.onAction('updateEmail', {email, oldEmail: originalEmail, emailType: 'updateEmail'});
+        }
         this.context.onAction('updateMember', {email, name});
     }
 
@@ -115,8 +120,7 @@ export default class AccountProfilePage extends React.Component {
                 value: this.state.email,
                 placeholder: 'Email...',
                 label: 'Email',
-                name: 'email',
-                disabled: true
+                name: 'email'
             }
         };
         const field = fields[fieldName];

ghost/portal/src/utils/api.js

@@ -67,7 +67,7 @@ function setupGhostApi() {
             });
         },
 
-        update({email, name, subscribed}) {
+        update({name, subscribed}) {
             const url = endpointFor({type: 'members', resource: 'member'});
             return makeRequest({
                 url,
@@ -77,7 +77,6 @@ function setupGhostApi() {
                 },
                 credentials: 'same-origin',
                 body: JSON.stringify({
-                    email,
                     name,
                     subscribed
                 })
@@ -89,7 +88,7 @@ function setupGhostApi() {
             });
         },
 
-        sendMagicLink({email, emailType, labels, name}) {
+        sendMagicLink({email, emailType, labels, name, oldEmail}) {
             const url = endpointFor({type: 'members', resource: 'send-magic-link'});
             return makeRequest({
                 url,
@@ -100,6 +99,7 @@ function setupGhostApi() {
                 body: JSON.stringify({
                     name,
                     email,
+                    oldEmail,
                     emailType,
                     labels
                 })