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>

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

@ -1,66 +1,43 @@
<template>
<v-dialog v-model="dialog">
<v-btn slot="activator">
Login
</v-btn>
<FormDialog buttonText="Login">
<v-card-title class="headline">
Log In
</v-card-title>
<v-card>
<v-form
ref="form"
v-model="valid"
@submit.prevent="validate"
lazy-validation
>
<v-card-title class="headline">
Log In
</v-card-title>
<v-card-text>
<v-text-field
ref="autofocus"
v-model="login"
:rules="loginRules"
label="User name"
required
></v-text-field>
<v-card-text>
<v-text-field
ref="autofocus"
v-model="login"
:rules="loginRules"
label="User name"
required
></v-text-field>
<v-text-field
v-model="password"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
@click:append="showPassword = !showPassword"
:rules="passwordRules"
:type="showPassword ? 'text' : 'password'"
label="Password"
required
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>
<v-text-field
v-model="password"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
@click:append="showPassword = !showPassword"
:rules="passwordRules"
:type="showPassword ? 'text' : 'password'"
label="Password"
required
counter
></v-text-field>
</v-card-text>
</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,27 +47,16 @@ export default {
}),
methods: {
validate() {
if (this.$refs.form.validate()) {
window.pkgs.axios
.post('/user/login', {
login: this.login,
password: this.password
})
.then(response => {
// this.$refs.form.reset()
console.log('login', response.data)
console.log('cookie', document.cookie)
})
}
}
},
watch: {
dialog(val) {
if (val)
requestAnimationFrame(() => {
this.$refs.autofocus.focus()
confirm() {
window.pkgs.axios
.post('/user/login', {
login: this.login,
password: this.password
})
.then(response => {
// this.$refs.form.reset()
console.log('login', response.data)
console.log('cookie', document.cookie)
})
}
}

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

@ -1,66 +1,43 @@
<template>
<v-dialog v-model="dialog">
<v-btn slot="activator">
<FormDialog buttonText="Register">
<v-card-title class="headline">
Register
</v-btn>
</v-card-title>
<v-card>
<v-form
ref="form"
v-model="valid"
@submit.prevent="validate"
lazy-validation
>
<v-card-title class="headline">
Register
</v-card-title>
<v-card-text>
<v-text-field
ref="autofocus"
v-model="login"
:rules="loginRules"
label="User name"
required
></v-text-field>
<v-card-text>
<v-text-field
ref="autofocus"
v-model="login"
:rules="loginRules"
label="User name"
required
></v-text-field>
<v-text-field
v-model="password"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
@click:append="showPassword = !showPassword"
:rules="passwordRules"
:type="showPassword ? 'text' : 'password'"
label="Password"
required
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>
<v-text-field
v-model="password"
:append-icon="showPassword ? 'visibility' : 'visibility_off'"
@click:append="showPassword = !showPassword"
:rules="passwordRules"
:type="showPassword ? 'text' : 'password'"
label="Password"
required
counter
></v-text-field>
</v-card-text>
</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,26 +47,15 @@ export default {
}),
methods: {
validate() {
if (this.$refs.form.validate()) {
window.pkgs.axios
.post('/user/register', {
login: this.login,
password: this.password
})
.then(response => {
// this.$refs.form.reset()
console.log('register', response.data)
})
}
}
},
watch: {
dialog(val) {
if (val)
requestAnimationFrame(() => {
this.$refs.autofocus.focus()
confirm() {
window.pkgs.axios
.post('/user/register', {
login: this.login,
password: this.password
})
.then(response => {
// this.$refs.form.reset()
console.log('register', response.data)
})
}
}