Refactor: pull out Settings form into its own component

parent 5ad57917
<template>
<form @submit.prevent='submit'>
<label for='password'>Password</label>
<div class='control'>
<no-ssr>
<vue-password v-model='password' classes='input'>
<template slot="password-toggle" slot-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>
</template>
<script>
export default {
data () {
return {
password: ''
}
},
methods: {
submit () {
console.log('⚠️ Settings form submit is currently unimplemented.')
}
}
}
</script>
<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;
}
</style>
......@@ -55,25 +55,10 @@
<!-- 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" slot-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>
<settings />
</b-tab-item>
<!-- “More” tab: other features will go here. -->
<b-tab-item label="…"></b-tab-item>
</b-tabs>
......@@ -90,20 +75,20 @@ import 'font-awesome/css/font-awesome.min.css'
import indieHeader from '~/components/indieHeader'
import followModal from '~/components/followModal'
import contentTypeFilter from '~/components/contentTypeFilter'
import settings from '~/components/settings'
export default {
components: {
indieHeader,
followModal,
contentTypeFilter
contentTypeFilter,
settings
},
computed: {
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
......@@ -131,8 +116,6 @@ export default {
searchTerm: '',
selectedMockSearchResult: null,
password: '',
followModalActive: false,
editorContent: '',
......@@ -161,15 +144,6 @@ 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;
......
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