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

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

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