You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

95 lines
3.6 KiB

  1. <template lang='pug'>
  2. v-container(fluid, grid-list-lg)
  3. v-layout(row wrap)
  4. v-flex(xs6)
  5. .headline.primary--text Profile
  6. .subheading.grey--text Personal profile
  7. v-flex(xs6).text-xs-right
  8. v-btn(outline, color='primary').mr-0
  9. v-icon(left) public
  10. span View Public Profile
  11. v-flex(lg6 xs12)
  12. v-card
  13. v-toolbar(color='primary', dark, dense, flat)
  14. v-toolbar-title
  15. .subheading User Details
  16. v-card-text
  17. v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='person')
  18. v-text-field(label='Job Title', :counter='255', prepend-icon='accessibility')
  19. v-text-field(label='Location / Office', :counter='255', prepend-icon='location_on')
  20. v-card-chin
  21. v-spacer
  22. v-btn(color='primary')
  23. v-icon(left) chevron_right
  24. span Save
  25. v-card.mt-3
  26. v-toolbar(color='purple darken-4', dark, dense, flat)
  27. v-toolbar-title
  28. .subheading Authentication
  29. v-card-text
  30. v-subheader.pl-0 Provider
  31. v-toolbar(
  32. flat
  33. :color='darkMode ? "grey darken-2" : "purple lighten-5"'
  34. dense
  35. :class='darkMode ? "grey--text text--lighten-1" : "purple--text text--darken-4"'
  36. )
  37. v-icon(:color='darkMode ? "grey lighten-1" : "purple darken-4"') supervised_user_circle
  38. .subheading.ml-3 Local
  39. v-divider.mt-3
  40. v-subheader.pl-0 Two-Factor Authentication (2FA)
  41. .caption.mb-2 2FA adds an extra layer of security by requiring a unique code generated on your smartphone when signing in.
  42. v-btn(color='purple darken-4', dark, depressed).ml-0 Enable 2FA
  43. v-btn(color='purple darken-4', dark, depressed, disabled).ml-0 Disable 2FA
  44. v-divider.mt-3
  45. v-subheader.pl-0 Change Password
  46. v-text-field(label='Current Password', prepend-icon='last_page')
  47. v-text-field(label='New Password', prepend-icon='last_page')
  48. v-text-field(label='Confirm New Password', prepend-icon='last_page')
  49. v-btn(color='purple darken-4', dark, depressed).ml-0 Change Password
  50. v-flex(lg6 xs12)
  51. v-card
  52. v-toolbar(color='primary', dark, dense, flat)
  53. v-toolbar-title
  54. .subheading Picture
  55. v-card-title
  56. v-avatar(size='64', color='grey')
  57. v-icon(size='64', color='grey lighten-2') account_circle
  58. v-btn(depressed).ml-4.elevation-1 Upload Picture
  59. v-btn(depressed, disabled).elevation-1 Remove Picture
  60. v-card.mt-3
  61. v-toolbar(color='teal', dark, dense, flat)
  62. v-toolbar-title
  63. .subheading Activity
  64. v-card-text.grey--text.text--darken-2
  65. .body-2.grey--text Joined on
  66. .body-1: strong January 1st, 2018 at 12:00 AM
  67. .body-2.grey--text.mt-3 Profile last updated on
  68. .body-1: strong January 1st, 2018 at 12:00 AM
  69. .body-2.grey--text.mt-3 Last login on
  70. .body-1: strong January 1st, 2018 at 12:00 AM
  71. v-divider.mt-3
  72. .body-2.grey--text.mt-3 Pages created
  73. .body-1: strong 0
  74. .body-2.grey--text.mt-3 Comments posted
  75. .body-1: strong 0
  76. </template>
  77. <script>
  78. /* global siteConfig */
  79. export default {
  80. data() {
  81. return {
  82. name: 'John Doe'
  83. }
  84. },
  85. computed: {
  86. darkMode() { return siteConfig.darkMode }
  87. }
  88. }
  89. </script>
  90. <style lang='scss'>
  91. </style>