index.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
  1. <template>
  2. <div>
  3. <metadata title="Settings" />
  4. <main-header />
  5. <div class="container">
  6. <h1 id="page-title">Settings</h1>
  7. <div id="sidebar-with-content">
  8. <div class="nav-links">
  9. <a
  10. :class="{ active: tab === 'profile' }"
  11. @click="showTab('profile')"
  12. >
  13. Profile
  14. </a>
  15. <a
  16. :class="{ active: tab === 'account' }"
  17. @click="showTab('account')"
  18. >
  19. Account
  20. </a>
  21. <a
  22. :class="{ active: tab === 'security' }"
  23. @click="showTab('security')"
  24. >
  25. Security
  26. </a>
  27. <a
  28. :class="{ active: tab === 'preferences' }"
  29. @click="showTab('preferences')"
  30. >
  31. Preferences
  32. </a>
  33. </div>
  34. <profile-settings v-if="tab === 'profile'"></profile-settings>
  35. <account-settings v-if="tab === 'account'"></account-settings>
  36. <security-settings
  37. v-if="tab === 'security'"
  38. ></security-settings>
  39. <preferences-settings
  40. v-if="tab === 'preferences'"
  41. ></preferences-settings>
  42. </div>
  43. </div>
  44. <main-footer />
  45. <remove-account v-if="modals.removeAccount" />
  46. </div>
  47. </template>
  48. <script>
  49. import { mapActions, mapGetters, mapState } from "vuex";
  50. import { defineAsyncComponent } from "vue";
  51. import Toast from "toasters";
  52. import TabQueryHandler from "@/mixins/TabQueryHandler.vue";
  53. import MainHeader from "@/components/layout/MainHeader.vue";
  54. import MainFooter from "@/components/layout/MainFooter.vue";
  55. export default {
  56. components: {
  57. MainHeader,
  58. MainFooter,
  59. SecuritySettings: defineAsyncComponent(() =>
  60. import("./Tabs/Security.vue")
  61. ),
  62. AccountSettings: defineAsyncComponent(() =>
  63. import("./Tabs/Account.vue")
  64. ),
  65. ProfileSettings: defineAsyncComponent(() =>
  66. import("./Tabs/Profile.vue")
  67. ),
  68. PreferencesSettings: defineAsyncComponent(() =>
  69. import("./Tabs/Preferences.vue")
  70. ),
  71. RemoveAccount: defineAsyncComponent(() =>
  72. import("@/components/modals/RemoveAccount.vue")
  73. )
  74. },
  75. mixins: [TabQueryHandler],
  76. data() {
  77. return {
  78. tab: ""
  79. };
  80. },
  81. computed: {
  82. ...mapGetters({
  83. socket: "websockets/getSocket"
  84. }),
  85. ...mapState("modalVisibility", {
  86. modals: state => state.modals
  87. })
  88. },
  89. mounted() {
  90. if (
  91. this.$route.query.tab === "profile" ||
  92. this.$route.query.tab === "security" ||
  93. this.$route.query.tab === "account" ||
  94. this.$route.query.tab === "preferences"
  95. )
  96. this.tab = this.$route.query.tab;
  97. else this.tab = "profile";
  98. this.localNightmode = this.nightmode;
  99. this.socket.dispatch("users.findBySession", res => {
  100. if (res.status === "success") this.setUser(res.data.user);
  101. else new Toast("You're not currently signed in.");
  102. });
  103. this.socket.on("event:user.password.linked", () =>
  104. this.updateOriginalUser({
  105. property: "password",
  106. value: true
  107. })
  108. );
  109. this.socket.on("event:user.password.unlinked", () =>
  110. this.updateOriginalUser({
  111. property: "password",
  112. value: false
  113. })
  114. );
  115. this.socket.on("event:user.github.linked", () =>
  116. this.updateOriginalUser({
  117. property: "github",
  118. value: true
  119. })
  120. );
  121. this.socket.on("event:user.github.unlinked", () =>
  122. this.updateOriginalUser({
  123. property: "github",
  124. value: false
  125. })
  126. );
  127. },
  128. methods: mapActions("settings", ["updateOriginalUser", "setUser"])
  129. };
  130. </script>
  131. <style lang="scss" scoped>
  132. /deep/ .character-counter {
  133. display: flex;
  134. justify-content: flex-end;
  135. height: 0;
  136. }
  137. .container {
  138. margin-top: 32px;
  139. padding: 24px;
  140. /deep/ .row {
  141. *:not(:last-child) {
  142. margin-right: 5px;
  143. }
  144. }
  145. .content {
  146. background-color: var(--white);
  147. padding: 30px 50px;
  148. border-radius: 3px;
  149. }
  150. #sidebar-with-content {
  151. display: flex;
  152. flex-direction: column;
  153. }
  154. @media only screen and (min-width: 700px) {
  155. #sidebar-with-content {
  156. width: 962px;
  157. max-width: 100%;
  158. margin: 0 auto;
  159. flex-direction: row;
  160. .nav-links {
  161. margin-left: 0;
  162. margin-right: 64px;
  163. }
  164. .content {
  165. width: 600px;
  166. margin-top: 0px !important;
  167. }
  168. }
  169. }
  170. .nav-links {
  171. width: 250px;
  172. margin-left: auto;
  173. margin-right: auto;
  174. a {
  175. outline: none;
  176. border: none;
  177. box-shadow: none;
  178. color: var(--primary-color);
  179. font-size: 22px;
  180. line-height: 26px;
  181. padding: 7px 0 7px 12px;
  182. width: 100%;
  183. text-align: left;
  184. cursor: pointer;
  185. border-radius: 5px;
  186. background-color: transparent;
  187. display: inline-block;
  188. &.active {
  189. color: var(--white);
  190. background-color: var(--primary-color);
  191. }
  192. }
  193. }
  194. /deep/ .content {
  195. margin: 24px 0;
  196. height: fit-content;
  197. .control:not(:first-of-type) {
  198. margin: 10px 0;
  199. }
  200. label {
  201. font-size: 14px;
  202. color: var(--dark-grey-2);
  203. }
  204. textarea {
  205. height: 96px;
  206. }
  207. button {
  208. width: 100%;
  209. margin-top: 30px;
  210. }
  211. }
  212. }
  213. </style>