diff --git a/client/components/nav-header.vue b/client/components/nav-header.vue
index e84fbf12..5d033e62 100644
--- a/client/components/nav-header.vue
+++ b/client/components/nav-header.vue
@@ -58,7 +58,7 @@
color='blue'
)
v-spacer
- v-progress-circular.mr-3(indeterminate, color='blue', v-show='isLoading')
+ v-progress-circular.mr-3(indeterminate, color='blue', :size='22', :width='2' v-show='isLoading')
slot(name='actions')
transition(name='navHeaderSearch')
v-btn(icon, @click='searchToggle', v-if='!searchIsShown')
diff --git a/client/components/profile.vue b/client/components/profile.vue
index 9e3ae15c..df30f1c6 100644
--- a/client/components/profile.vue
+++ b/client/components/profile.vue
@@ -41,6 +41,8 @@
import VueRouter from 'vue-router'
import { mapState } from 'vuex'
+/* global WIKI */
+
const router = new VueRouter({
mode: 'history',
base: '/p',
@@ -53,6 +55,15 @@ const router = new VueRouter({
]
})
+router.beforeEach((to, from, next) => {
+ WIKI.$store.commit('loadingStart', 'profile')
+ next()
+})
+
+router.afterEach((to, from) => {
+ WIKI.$store.commit('loadingStop', 'profile')
+})
+
export default {
data() {
return {
diff --git a/client/components/profile/preferences.vue b/client/components/profile/preferences.vue
index c20ce0f1..9a9103bc 100644
--- a/client/components/profile/preferences.vue
+++ b/client/components/profile/preferences.vue
@@ -12,13 +12,32 @@
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Display
- v-subheader Locale
+ v-card-text
+ v-subheader.pl-0 Locale
+ v-select.grey.lighten-5(solo, flat)
+ v-divider
+ v-subheader.pl-0 Timezone
+ v-select.grey.lighten-5(solo, flat)
+ v-divider.my-0
+ v-card-actions.grey.lighten-4
+ v-spacer
+ v-btn(color='primary')
+ v-icon(left) chevron_right
+ span Save
v-flex(lg6 xs12)
v-card
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
- .subheading ---
- v-card-text ---
+ .subheading Editing
+ v-card-text
+ v-subheader.pl-0 Default Editor
+ v-select.grey.lighten-5(solo, flat)
+ v-divider.my-0
+ v-card-actions.grey.lighten-4
+ v-spacer
+ v-btn(color='primary')
+ v-icon(left) chevron_right
+ span Save
diff --git a/client/components/profile/profile.vue b/client/components/profile/profile.vue
index 83b252c6..621a5a50 100644
--- a/client/components/profile/profile.vue
+++ b/client/components/profile/profile.vue
@@ -1,40 +1,74 @@
- v-container(fluid, fill-height, grid-list-lg)
+ v-container(fluid, grid-list-lg)
v-layout(row wrap)
- v-flex(xs12)
+ v-flex(xs6)
.headline.primary--text Profile
.subheading.grey--text Personal profile
- v-form.pt-3
- v-layout(row wrap)
- v-flex(lg6 xs12)
- v-form
- v-card
- v-toolbar(color='primary', dark, dense, flat)
- v-toolbar-title
- .subheading User Details
- v-card-text
- v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='person')
- v-divider
- v-text-field(label='Email', :counter='255', prepend-icon='email')
- v-divider.my-0
- v-card-actions.grey.lighten-4
- v-spacer
- v-btn(color='primary')
- v-icon(left) chevron_right
- span Save
- v-flex(lg6 xs12)
- v-card
- v-toolbar(color='primary', dark, dense, flat)
- v-toolbar-title
- .subheading Picture
- v-card-text ---
- v-card.mt-3
- v-toolbar(color='teal', dark, dense, flat)
- v-toolbar-title
- .subheading Activity
- v-card-text.grey--text.text--darken-2
- .body-1 Joined #[strong January 1st, 2010]
- .body-1 Last login on #[strong January 2nd, 2010]
+ v-flex(xs6).text-xs-right
+ v-btn(outline, color='primary').mr-0
+ v-icon(left) public
+ span View Public Profile
+ v-flex(lg6 xs12)
+ v-card
+ v-toolbar(color='primary', dark, dense, flat)
+ v-toolbar-title
+ .subheading User Details
+ v-card-text
+ v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='person')
+ v-text-field(label='Job Title', :counter='255', prepend-icon='accessibility')
+ v-text-field(label='Location / Office', :counter='255', prepend-icon='location_on')
+ v-divider.my-0
+ v-card-actions.grey.lighten-4
+ v-spacer
+ v-btn(color='primary')
+ v-icon(left) chevron_right
+ span Save
+ v-card.mt-3
+ v-toolbar(color='purple darken-4', dark, dense, flat)
+ v-toolbar-title
+ .subheading Authentication
+ v-card-text
+ v-subheader.pl-0 Provider
+ v-toolbar(flat, color='purple lighten-5', dense).purple--text.text--darken-4
+ v-icon(color='purple darken-4') supervised_user_circle
+ .subheading.ml-3 Local
+ v-divider
+ v-subheader.pl-0 Two-Factor Authentication (2FA)
+ .caption.mb-2 2FA adds an extra layer of security by requiring a unique code generated on your smartphone when signing in.
+ v-btn(color='purple darken-4', dark, depressed).ml-0 Enable 2FA
+ v-btn(color='purple darken-4', dark, depressed, disabled).ml-0 Disable 2FA
+ v-divider
+ v-subheader.pl-0 Change Password
+ v-text-field(label='Current Password', prepend-icon='last_page')
+ v-text-field(label='New Password', prepend-icon='last_page')
+ v-text-field(label='Confirm New Password', prepend-icon='last_page')
+ v-btn(color='purple darken-4', dark, depressed).ml-0 Change Password
+ v-flex(lg6 xs12)
+ v-card
+ v-toolbar(color='primary', dark, dense, flat)
+ v-toolbar-title
+ .subheading Picture
+ v-card-title
+ v-avatar(size='64', color='grey')
+ v-icon(size='64', color='grey lighten-2') account_circle
+ v-btn(depressed).ml-4.elevation-1 Upload Picture
+ v-btn(depressed, disabled).elevation-1 Remove Picture
+ v-card.mt-3
+ v-toolbar(color='teal', dark, dense, flat)
+ v-toolbar-title
+ .subheading Activity
+ v-card-text.grey--text.text--darken-2
+ .body-2.grey--text Joined on
+ .body-1: strong January 1st, 2018 at 12:00 AM
+ .body-2.grey--text.mt-3 Profile last updated on
+ .body-1: strong January 1st, 2018 at 12:00 AM
+ .body-2.grey--text.mt-3 Last login on
+ .body-1: strong January 1st, 2018 at 12:00 AM
+ v-divider
+ .body-2.grey--text.mt-3 Pages created
+ .body-1: strong 0
+ .body-2.grey--text.mt-3 Comments posted
+ .body-1: strong 0