From 14927c3e7ebff2d2935f50b1a70625520706e9a1 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Mon, 11 Jun 2018 22:36:43 -0700
Subject: [PATCH] Add base UI for account management

---
 package.json                                  |  2 +-
 .../scripts/components/dashboard/Account.vue  | 50 +++++++++--
 .../dashboard/account/UpdateEmail.vue         | 88 +++++++++++++++++++
 .../assets/scripts/store/modules/auth.js      | 50 ++++++++++-
 .../assets/styles/components/buttons.css      | 12 +++
 resources/assets/styles/components/forms.css  | 21 +++++
 routes/api-client.php                         |  1 +
 routes/base.php                               | 10 +--
 8 files changed, 220 insertions(+), 14 deletions(-)
 create mode 100644 resources/assets/scripts/components/dashboard/account/UpdateEmail.vue

diff --git a/package.json b/package.json
index 45f995c34..a11bf7ee6 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
         "watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
         "build": "NODE_ENV=development ./node_modules/.bin/webpack --progress",
         "build:production": "NODE_ENV=production ./node_modules/.bin/webpack",
-        "serve": "webpack-serve --hot --config ./webpack.config.js",
+        "serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js",
         "v:serve": "PUBLIC_PATH=http://192.168.50.2:8080 NODE_ENV=development webpack-serve --hot --config ./webpack.config.js --host 192.168.50.2 --no-clipboard"
     }
 }
diff --git a/resources/assets/scripts/components/dashboard/Account.vue b/resources/assets/scripts/components/dashboard/Account.vue
index 281ce77b9..655acfb63 100644
--- a/resources/assets/scripts/components/dashboard/Account.vue
+++ b/resources/assets/scripts/components/dashboard/Account.vue
@@ -1,13 +1,51 @@
 <template>
-
+    <div>
+        <navigation/>
+        <div class="container animate fadein mt-6">
+            <flash container="mt-6 mb-2 mx-4"/>
+            <div class="flex">
+                <update-email class="flex-1 m-4"/>
+                <div class="flex-1 m-4">
+                    <form action="" method="post">
+                        <div class="bg-white p-6 border border-grey-light rounded rounded-1">
+                            <h2 class="mb-6 text-grey-darkest font-medium">Change your password</h2>
+                            <div class="mt-6">
+                                <label for="grid-password-current" class="input-label">Current password</label>
+                                <input id="grid-password-current" name="password" type="password" class="input" required>
+                            </div>
+                            <div class="mt-6">
+                                <label for="grid-password-new" class="input-label">New password</label>
+                                <input id="grid-password-new" name="password" type="password" class="input" required>
+                                <p class="input-help">Your new password should be at least 8 characters in length, contain one number, and be mixed case.</p>
+                            </div>
+                            <div class="mt-6">
+                                <label for="grid-password-new-confirm" class="input-label">Confirm new password</label>
+                                <input id="grid-password-new-confirm" name="password_confirmation" type="password" class="input" required>
+                            </div>
+                            <div class="mt-6 text-right">
+                                <button class="btn btn-blue btn-sm text-right" type="submit">Save</button>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
+    import Navigation from '../core/Navigation';
+    import Flash from '../Flash';
+    import { mapState } from 'vuex';
+    import UpdateEmail from './account/UpdateEmail';
+
     export default {
-        name: 'account'
+        name: 'account',
+        components: {UpdateEmail, Flash, Navigation},
+        computed: {
+            ...mapState({
+                user: state => state.auth.user,
+            })
+        },
     };
 </script>
-
-<style scoped>
-
-</style>
diff --git a/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue b/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
new file mode 100644
index 000000000..5f06ac77c
--- /dev/null
+++ b/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
@@ -0,0 +1,88 @@
+<template>
+    <div :class>
+        <form method="post" v-on:submit.prevent="submitForm">
+            <div class="bg-white p-6 border border-grey-light rounded rounded-1">
+                <h2 class="mb-6 text-grey-darkest font-medium">Update your email</h2>
+                <div>
+                    <label for="grid-email" class="input-label">Email address</label>
+                    <input id="grid-email" name="email" type="email" class="input" required
+                        v-model="email"
+                    >
+                    <p class="input-help">If your email is no longer {{ user.email }} enter a new email in the field above.</p>
+                </div>
+                <div class="mt-6">
+                    <label for="grid-password" class="input-label">Password</label>
+                    <input id="grid-password" name="password" type="password" class="input" required
+                        v-model="password"
+                    >
+                </div>
+                <div class="mt-6">
+                    <label for="grid-password-confirm" class="input-label">Confirm password</label>
+                    <input id="grid-password-confirm" name="password_confirmation" type="password" class="input" required
+                        v-model="confirm"
+                    >
+                </div>
+                <div class="mt-6 text-right">
+                    <button class="btn btn-blue btn-sm text-right" type="submit">Save</button>
+                </div>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script>
+    import { mapState, mapActions } from 'vuex';
+
+    export default {
+        name: 'update-email',
+        data: function () {
+            return {
+                email: '',
+                password: '',
+                confirm: '',
+            };
+        },
+        computed: {
+            ...mapState({
+                user: state => state.auth.user,
+            })
+        },
+
+        methods: {
+            /**
+             * Update a user's email address on the Panel.
+             */
+            submitForm: function () {
+                this.clearFlashes();
+                this.updateEmail({
+                    email: this.$data.email,
+                    password: this.$data.password,
+                    confirm: this.$data.confirm,
+                })
+                    .then(() => {
+                        this.success('Your email address has been updated.');
+                    })
+                    .catch(error => {
+                        if (!error.response) {
+                            return console.error(error);
+                        }
+
+                        const response = error.response;
+                        if (response.data && _.isObject(response.data.errors)) {
+                            response.data.errors.forEach(e => {
+                                this.error(e.detail);
+                            });
+                        }
+                    });
+            },
+
+            ...mapActions('auth', [
+                'updateEmail',
+            ])
+        }
+    };
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/assets/scripts/store/modules/auth.js b/resources/assets/scripts/store/modules/auth.js
index 7ccd43721..6999f652f 100644
--- a/resources/assets/scripts/store/modules/auth.js
+++ b/resources/assets/scripts/store/modules/auth.js
@@ -13,12 +13,20 @@ export default {
          * @param state
          * @returns {User|null}
          */
-        currentUser: function (state) {
+        getUser: function (state) {
             return state.user;
-        }
+        },
     },
     setters: {},
     actions: {
+        /**
+         * Log a user into the Panel.
+         *
+         * @param commit
+         * @param {String} user
+         * @param {String} password
+         * @returns {Promise<any>}
+         */
         login: ({commit}, {user, password}) => {
             return new Promise((resolve, reject) => {
                 window.axios.post(route('auth.login'), {user, password})
@@ -47,6 +55,13 @@ export default {
                     .catch(reject);
             });
         },
+
+        /**
+         * Log a user out of the Panel.
+         *
+         * @param commit
+         * @returns {Promise<any>}
+         */
         logout: function ({commit}) {
             return new Promise((resolve, reject) => {
                 window.axios.get(route('auth.logout'))
@@ -57,8 +72,39 @@ export default {
                     .catch(reject);
             })
         },
+
+        /**
+         * Update a user's email address on the Panel and store the updated result in Vuex.
+         *
+         * @param commit
+         * @param {String} email
+         * @param {String} password
+         * @param {String} confirm
+         * @return {Promise<any>}
+         */
+        updateEmail: function ({commit}, {email, password, confirm}) {
+            return new Promise((resolve, reject) => {
+                window.axios.put(route('api.client.account.update-email'), {
+                    email, password, password_confirmation: confirm
+                })
+                    .then(response => {
+                        // If there is a 302 redirect or some other odd behavior (basically, response that isnt
+                        // in JSON format) throw an error and don't try to continue with the login.
+                        if (!(response.data instanceof Object)) {
+                            return reject(new Error('An error was encountered while processing this request.'));
+                        }
+
+                        commit('setEmail', response.data.email);
+                        return resolve();
+                    })
+                    .catch(reject);
+            });
+        },
     },
     mutations: {
+        setEmail: function (state, email) {
+            state.user.email = email;
+        },
         login: function (state, {jwt}) {
             localStorage.setItem('token', jwt);
             state.user = User.fromToken(jwt);
diff --git a/resources/assets/styles/components/buttons.css b/resources/assets/styles/components/buttons.css
index d2721777f..bc14f09d4 100644
--- a/resources/assets/styles/components/buttons.css
+++ b/resources/assets/styles/components/buttons.css
@@ -12,6 +12,14 @@
     }
   }
 
+  &.btn-secondary {
+    @apply .border .border-grey-light .text-grey-dark;
+
+    &:hover:enabled {
+      @apply .border-grey .text-grey-darker;
+    }
+  }
+
   /**
    * Button Sizes
    */
@@ -19,6 +27,10 @@
     @apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
   }
 
+  &.btn-sm {
+    @apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
+  }
+
   &:disabled, &.disabled {
     opacity: 0.55;
     cursor: default;
diff --git a/resources/assets/styles/components/forms.css b/resources/assets/styles/components/forms.css
index f9de27916..9d87c79a7 100644
--- a/resources/assets/styles/components/forms.css
+++ b/resources/assets/styles/components/forms.css
@@ -30,3 +30,24 @@
     top: 14px;
     transition: transform 200ms ease-out;
 }
+
+.input {
+    @apply .appearance-none .p-3 .rounded .border .text-grey-darker .w-full;
+    transition: all 100ms linear;
+
+    &:focus {
+        @apply .border-blue-light;
+    }
+
+    &:required, &:invalid {
+        box-shadow: none;
+    }
+}
+
+.input-label {
+    @apply .block .uppercase .tracking-wide .text-grey-darkest .text-xs .font-bold .mb-1;
+}
+
+.input-help {
+    @apply .text-xs .text-grey .pt-2;
+}
diff --git a/routes/api-client.php b/routes/api-client.php
index 72be367f7..afee2defd 100644
--- a/routes/api-client.php
+++ b/routes/api-client.php
@@ -14,6 +14,7 @@ Route::get('/', 'ClientController@index')->name('api.client.index');
 
 Route::group(['prefix' => '/account'], function () {
     Route::get('/', 'AccountController@index')->name('api.client.account');
+    Route::put('/email', 'AccountController@updateEmail')->name('api.client.account.update-email');
 });
 
 /*
diff --git a/routes/base.php b/routes/base.php
index 4d86bada9..4c8faa333 100644
--- a/routes/base.php
+++ b/routes/base.php
@@ -16,11 +16,11 @@ Route::get('/', 'IndexController@index')->name('index');
 | Endpoint: /account
 |
 */
-Route::group(['prefix' => 'account'], function () {
-    Route::get('/', 'AccountController@index')->name('account');
-
-    Route::post('/', 'AccountController@update');
-});
+//Route::group(['prefix' => 'account'], function () {
+//    Route::get('/', 'AccountController@index')->name('account');
+//
+//    Route::post('/', 'AccountController@update');
+//});
 
 /*
 |--------------------------------------------------------------------------