wikijs-fork/client/components/profile/profile.vue

88 lines
3.3 KiB
Vue
Raw Normal View History

2018-05-21 03:27:06 +00:00
<template lang='pug'>
2018-05-28 18:46:55 +00:00
v-container(fluid, grid-list-lg)
2018-05-21 03:27:06 +00:00
v-layout(row wrap)
2018-05-28 18:46:55 +00:00
v-flex(xs6)
2018-05-21 03:27:06 +00:00
.headline.primary--text Profile
.subheading.grey--text Personal profile
2018-05-28 18:46:55 +00:00
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
2018-05-21 03:27:06 +00:00
</template>
<script>
export default {
data() {
return {
name: 'John Doe'
}
}
}
</script>
<style lang='scss'>
</style>