Skip to content

Commit 14927c3

Browse files
DaneEverittDaneEveritt
committed
Add base UI for account management
1 parent e5e66fd commit 14927c3

8 files changed

Lines changed: 220 additions & 14 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
5858
"build": "NODE_ENV=development ./node_modules/.bin/webpack --progress",
5959
"build:production": "NODE_ENV=production ./node_modules/.bin/webpack",
60-
"serve": "webpack-serve --hot --config ./webpack.config.js",
60+
"serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js",
6161
"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"
6262
}
6363
}

‎resources/assets/scripts/components/dashboard/Account.vue‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,51 @@
11
<template>
2-
2+
<div>
3+
<navigation/>
4+
<div class="container animate fadein mt-6">
5+
<flash container="mt-6 mb-2 mx-4"/>
6+
<div class="flex">
7+
<update-email class="flex-1 m-4"/>
8+
<div class="flex-1 m-4">
9+
<form action="" method="post">
10+
<div class="bg-white p-6 border border-grey-light rounded rounded-1">
11+
<h2 class="mb-6 text-grey-darkest font-medium">Change your password</h2>
12+
<div class="mt-6">
13+
<label for="grid-password-current" class="input-label">Current password</label>
14+
<input id="grid-password-current" name="password" type="password" class="input" required>
15+
</div>
16+
<div class="mt-6">
17+
<label for="grid-password-new" class="input-label">New password</label>
18+
<input id="grid-password-new" name="password" type="password" class="input" required>
19+
<p class="input-help">Your new password should be at least 8 characters in length, contain one number, and be mixed case.</p>
20+
</div>
21+
<div class="mt-6">
22+
<label for="grid-password-new-confirm" class="input-label">Confirm new password</label>
23+
<input id="grid-password-new-confirm" name="password_confirmation" type="password" class="input" required>
24+
</div>
25+
<div class="mt-6 text-right">
26+
<button class="btn btn-blue btn-sm text-right" type="submit">Save</button>
27+
</div>
28+
</div>
29+
</form>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
334
</template>
435

536
<script>
37+
import Navigation from '../core/Navigation';
38+
import Flash from '../Flash';
39+
import { mapState } from 'vuex';
40+
import UpdateEmail from './account/UpdateEmail';
41+
642
export default {
7-
name: 'account'
43+
name: 'account',
44+
components: {UpdateEmail, Flash, Navigation},
45+
computed: {
46+
...mapState({
47+
user: state => state.auth.user,
48+
})
49+
},
850
};
951
</script>
10-
11-
<style scoped>
12-
13-
</style>

‎resources/assets/scripts/components/dashboard/account/UpdateEmail.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<div :class>
3+
<form method="post" v-on:submit.prevent="submitForm">
4+
<div class="bg-white p-6 border border-grey-light rounded rounded-1">
5+
<h2 class="mb-6 text-grey-darkest font-medium">Update your email</h2>
6+
<div>
7+
<label for="grid-email" class="input-label">Email address</label>
8+
<input id="grid-email" name="email" type="email" class="input" required
9+
v-model="email"
10+
>
11+
<p class="input-help">If your email is no longer {{ user.email }} enter a new email in the field above.</p>
12+
</div>
13+
<div class="mt-6">
14+
<label for="grid-password" class="input-label">Password</label>
15+
<input id="grid-password" name="password" type="password" class="input" required
16+
v-model="password"
17+
>
18+
</div>
19+
<div class="mt-6">
20+
<label for="grid-password-confirm" class="input-label">Confirm password</label>
21+
<input id="grid-password-confirm" name="password_confirmation" type="password" class="input" required
22+
v-model="confirm"
23+
>
24+
</div>
25+
<div class="mt-6 text-right">
26+
<button class="btn btn-blue btn-sm text-right" type="submit">Save</button>
27+
</div>
28+
</div>
29+
</form>
30+
</div>
31+
</template>
32+
33+
<script>
34+
import { mapState, mapActions } from 'vuex';
35+
36+
export default {
37+
name: 'update-email',
38+
data: function () {
39+
return {
40+
email: '',
41+
password: '',
42+
confirm: '',
43+
};
44+
},
45+
computed: {
46+
...mapState({
47+
user: state => state.auth.user,
48+
})
49+
},
50+
51+
methods: {
52+
/**
53+
* Update a user's email address on the Panel.
54+
*/
55+
submitForm: function () {
56+
this.clearFlashes();
57+
this.updateEmail({
58+
email: this.$data.email,
59+
password: this.$data.password,
60+
confirm: this.$data.confirm,
61+
})
62+
.then(() => {
63+
this.success('Your email address has been updated.');
64+
})
65+
.catch(error => {
66+
if (!error.response) {
67+
return console.error(error);
68+
}
69+
70+
const response = error.response;
71+
if (response.data && _.isObject(response.data.errors)) {
72+
response.data.errors.forEach(e => {
73+
this.error(e.detail);
74+
});
75+
}
76+
});
77+
},
78+
79+
...mapActions('auth', [
80+
'updateEmail',
81+
])
82+
}
83+
};
84+
</script>
85+
86+
<style scoped>
87+
88+
</style>

‎resources/assets/scripts/store/modules/auth.js‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,20 @@ export default {
1313
* @param state
1414
* @returns {User|null}
1515
*/
16-
currentUser: function (state) {
16+
getUser: function (state) {
1717
return state.user;
18-
}
18+
},
1919
},
2020
setters: {},
2121
actions: {
22+
/**
23+
* Log a user into the Panel.
24+
*
25+
* @param commit
26+
* @param {String} user
27+
* @param {String} password
28+
* @returns {Promise<any>}
29+
*/
2230
login: ({commit}, {user, password}) => {
2331
return new Promise((resolve, reject) => {
2432
window.axios.post(route('auth.login'), {user, password})
@@ -47,6 +55,13 @@ export default {
4755
.catch(reject);
4856
});
4957
},
58+
59+
/**
60+
* Log a user out of the Panel.
61+
*
62+
* @param commit
63+
* @returns {Promise<any>}
64+
*/
5065
logout: function ({commit}) {
5166
return new Promise((resolve, reject) => {
5267
window.axios.get(route('auth.logout'))
@@ -57,8 +72,39 @@ export default {
5772
.catch(reject);
5873
})
5974
},
75+
76+
/**
77+
* Update a user's email address on the Panel and store the updated result in Vuex.
78+
*
79+
* @param commit
80+
* @param {String} email
81+
* @param {String} password
82+
* @param {String} confirm
83+
* @return {Promise<any>}
84+
*/
85+
updateEmail: function ({commit}, {email, password, confirm}) {
86+
return new Promise((resolve, reject) => {
87+
window.axios.put(route('api.client.account.update-email'), {
88+
email, password, password_confirmation: confirm
89+
})
90+
.then(response => {
91+
// If there is a 302 redirect or some other odd behavior (basically, response that isnt
92+
// in JSON format) throw an error and don't try to continue with the login.
93+
if (!(response.data instanceof Object)) {
94+
return reject(new Error('An error was encountered while processing this request.'));
95+
}
96+
97+
commit('setEmail', response.data.email);
98+
return resolve();
99+
})
100+
.catch(reject);
101+
});
102+
},
60103
},
61104
mutations: {
105+
setEmail: function (state, email) {
106+
state.user.email = email;
107+
},
62108
login: function (state, {jwt}) {
63109
localStorage.setItem('token', jwt);
64110
state.user = User.fromToken(jwt);

‎resources/assets/styles/components/buttons.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,25 @@
1212
}
1313
}
1414

15+
&.btn-secondary {
16+
@apply .border .border-grey-light .text-grey-dark;
17+
18+
&:hover:enabled {
19+
@apply .border-grey .text-grey-darker;
20+
}
21+
}
22+
1523
/**
1624
* Button Sizes
1725
*/
1826
&.btn-jumbo {
1927
@apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
2028
}
2129

30+
&.btn-sm {
31+
@apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
32+
}
33+
2234
&:disabled, &.disabled {
2335
opacity: 0.55;
2436
cursor: default;

‎resources/assets/styles/components/forms.css‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,24 @@
3030
top: 14px;
3131
transition: transform 200ms ease-out;
3232
}
33+
34+
.input {
35+
@apply .appearance-none .p-3 .rounded .border .text-grey-darker .w-full;
36+
transition: all 100ms linear;
37+
38+
&:focus {
39+
@apply .border-blue-light;
40+
}
41+
42+
&:required, &:invalid {
43+
box-shadow: none;
44+
}
45+
}
46+
47+
.input-label {
48+
@apply .block .uppercase .tracking-wide .text-grey-darkest .text-xs .font-bold .mb-1;
49+
}
50+
51+
.input-help {
52+
@apply .text-xs .text-grey .pt-2;
53+
}

‎routes/api-client.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414

1515
Route::group(['prefix' => '/account'], function () {
1616
Route::get('/', 'AccountController@index')->name('api.client.account');
17+
Route::put('/email', 'AccountController@updateEmail')->name('api.client.account.update-email');
1718
});
1819

1920
/*

‎routes/base.php‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@
1616
| Endpoint: /account
1717
|
1818
*/
19-
Route::group(['prefix' => 'account'], function () {
20-
Route::get('/', 'AccountController@index')->name('account');
21-
22-
Route::post('/', 'AccountController@update');
23-
});
19+
//Route::group(['prefix' => 'account'], function () {
20+
// Route::get('/', 'AccountController@index')->name('account');
21+
//
22+
// Route::post('/', 'AccountController@update');
23+
//});
2424

2525
/*
2626
|--------------------------------------------------------------------------

0 commit comments

Comments
 (0)