| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 |
- <template lang='pug'>
- v-container(fluid, grid-list-lg)
- v-layout(row wrap)
- v-flex(xs6)
- .headline.primary--text Profile
- .subheading.grey--text Personal profile
- 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
- </template>
- <script>
- export default {
- data() {
- return {
- name: 'John Doe'
- }
- }
- }
- </script>
- <style lang='scss'>
- </style>
|
