Commit 718fae2f authored by Aral Balkan's avatar Aral Balkan

Add settings screen with password entry

parent c8ef0cf4
......@@ -26,6 +26,7 @@ module.exports = {
plugins: [
'~plugins/buefy',
{ src: '~plugins/vue-password', ssr: false },
{ src: '~plugins/vue-quill-editor', ssr: false }
],
......
......@@ -13565,6 +13565,15 @@
"object-assign": "4.1.1"
}
},
"vue-password": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vue-password/-/vue-password-1.1.2.tgz",
"integrity": "sha512-IVouoqvgXnXxFaAu9ej0K0uRr8z7yVvtJhbtiaGpE5+5O18zlvH/wHSIDAEHt2l8RKoFivzYPj/HiQJeMH0xCQ==",
"requires": {
"vue": "2.5.13",
"zxcvbn": "4.4.2"
}
},
"vue-quill-editor": {
"version": "3.0.5",
"resolved": "https://registry.npmjs.org/vue-quill-editor/-/vue-quill-editor-3.0.5.tgz",
......@@ -14208,6 +14217,11 @@
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
"integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
},
"zxcvbn": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
"integrity": "sha1-KOwXzwl0PtyrBW3dixsGJizHPDA="
}
}
}
......@@ -4,7 +4,6 @@
<div class='header-material'>
<button id='follow-button' @click='followModalActive = !followModalActive' class='button'>Follow</button>
<img class='profile-image' src='/profile-image.jpg' alt='Profile image'>
<img class='settings-button' src='/settings.svg' alt='Settings button'>
<h1>{{name}}</h1>
<h2>{{bio}}</h2>
</div>
......@@ -76,8 +75,29 @@
<li>Anything (e.g., a great restaurant)</li>
</ul>
</b-tab-item>
<!-- <b-tab-item label="Private"></b-tab-item> -->
<!-- <b-tab-item label="…"></b-tab-item> -->
<!-- Settings tab -->
<b-tab-item label="Settings">
<form>
<label for='password'>Password</label>
<div class='control'>
<no-ssr>
<vue-password v-model='password' classes='input'>
<template slot="password-toggle" scope="props">
<button class="button VuePassword__Toggle"
type="button"
v-on:click = "props.toggle"
v-text="props.type === 'password' ? 'Show' : 'Hide'"
>
</button>
</template>
</vue-password>
</no-ssr>
</div>
</form>
</b-tab-item>
<b-tab-item label="…"></b-tab-item>
</b-tabs>
<!-- Follow modal -->
......@@ -116,6 +136,8 @@ export default {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio },
passwordFieldType () { return this.$data.showPassword ? "text" : "password"},
filteredMockSearchData () {
return this.mockSearchData.filter( (option) => {
return option
......@@ -143,6 +165,8 @@ export default {
searchTerm: '',
selectedMockSearchResult: null,
password: '',
followModalActive: false,
editorContent: '',
......@@ -171,6 +195,15 @@ export default {
<style>
/* Put a min-width on the Show/Hide password toggle button in the Settings
tab so that it doesn’t jump around due to the differing amount of space
taken up by the different labels. */
button.button.VuePassword__Toggle {
min-width: 80px;
}
/* Older styles: being refactored */
#follow-button {
position: absolute;
top: 1vmax;
......
import Vue from 'vue'
import VuePassword from 'vue-password'
Vue.component('vue-password', VuePassword)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment