Yavook.de/node-fftcg
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

FormDialog abstract component

Browse source
This commit is contained in:
Jörn-Michael Miehe 2019-05-06 17:02:12 +02:00
parent 0d96ee66e7
commit 0afb906c2d
3 changed files with 146 additions and 148 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
frontend/src/components/forms/FormDialog.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<v-dialog v-model="dialog">
<v-btn slot="activator">
{{ buttonText }}
</v-btn>
<v-card>
<v-form
ref="form"
v-model="valid"
@submit.prevent="validate"
lazy-validation
>
<slot></slot>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="success" type="submit" :disabled="!valid">
{{ buttonText }}
</v-btn>
<v-btn color="error" @click="dialog = false">
Cancel
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: 'FormDialog',
data: () => ({
dialog: false,
valid: true
}),
props: {
buttonText: String
},
methods: {
validate() {
if (this.$refs.form.validate()) {
this.$parent.confirm()
}
}
},
watch: {
dialog(val) {
if (val) {
requestAnimationFrame(() => {
this.$parent.$refs.autofocus.focus()
})
} else {
this.$refs.form.resetValidation()
}
}
}
}
</script>

54
frontend/src/components/forms/Login.vue
View file

@ -1,16 +1,5 @@
<template>
<v-dialog v-model="dialog">
<v-btn slot="activator">
Login
</v-btn>
<v-card>
<v-form
ref="form"
v-model="valid"
@submit.prevent="validate"
lazy-validation
>
<FormDialog buttonText="Login">
<v-card-title class="headline">
Log In
</v-card-title>
@ -35,32 +24,20 @@
counter
></v-text-field>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="success" type="submit" :disabled="!valid">
Login
</v-btn>
<v-btn color="error" @click="dialog = false">
Cancel
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</FormDialog>
</template>
<script>
import FormDialog from './FormDialog.vue'
export default {
name: 'LoginForm',
data: () => ({
dialog: false,
valid: true,
components: {
FormDialog
},
data: () => ({
login: '',
loginRules: [v => !!v || 'User name is required'],
@ -70,8 +47,7 @@ export default {
}),
methods: {
validate() {
if (this.$refs.form.validate()) {
confirm() {
window.pkgs.axios
.post('/user/login', {
login: this.login,
@ -84,15 +60,5 @@ export default {
})
}
}
},
watch: {
dialog(val) {
if (val)
requestAnimationFrame(() => {
this.$refs.autofocus.focus()
})
}
}
}
</script>

54
frontend/src/components/forms/Register.vue
View file

@ -1,16 +1,5 @@
<template>
<v-dialog v-model="dialog">
<v-btn slot="activator">
Register
</v-btn>
<v-card>
<v-form
ref="form"
v-model="valid"
@submit.prevent="validate"
lazy-validation
>
<FormDialog buttonText="Register">
<v-card-title class="headline">
Register
</v-card-title>
@ -35,32 +24,20 @@
counter
></v-text-field>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="success" type="submit" :disabled="!valid">
Register
</v-btn>
<v-btn color="error" @click="dialog = false">
Cancel
</v-btn>
</v-card-actions>
</v-form>
</v-card>
</v-dialog>
</FormDialog>
</template>
<script>
import FormDialog from './FormDialog.vue'
export default {
name: 'RegisterForm',
data: () => ({
dialog: false,
valid: true,
components: {
FormDialog
},
data: () => ({
login: '',
loginRules: [v => !!v || 'User name is required'],
@ -70,8 +47,7 @@ export default {
}),
methods: {
validate() {
if (this.$refs.form.validate()) {
confirm() {
window.pkgs.axios
.post('/user/register', {
login: this.login,
@ -83,15 +59,5 @@ export default {
})
}
}
},
watch: {
dialog(val) {
if (val)
requestAnimationFrame(() => {
this.$refs.autofocus.focus()
})
}
}
}
</script>