web-development/savvy-firebase
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

adding latest completed form

Browse Source
This commit is contained in:
dtomlinson
2020-03-30 22:55:04 +01:00
parent 9da6579cba
commit 52a1d9fe4a
3 changed files with 212 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
firebase.md
View File

@@ -605,3 +605,144 @@ An example of passing a prepend icon to a `<v-text-field>`:
Expects the v-img component. Scoped props should be applied with
v-bind="props".
## Forms
Forms should be done dynamically - creating a `v-for` on a text field input. You should create all the props values in an object in `data`.
The `<v-form>` should specify a `v-model` prop, which should reference a boolean on whether the form is valid or not. You should set a `ref` prop, which is the name you will refer to the form.
```html
<v-form
v-model="valid"
ref="form"
class="pt-4 d-flex flex-column align-center full-width"
></v-form>
```
You would refer to this form with `this.$refs.form`.
```html
<v-text-field
v-for="field in formFields"
:key="field.name"
outlined
rounded
required
:type="field.password ? 'password' : 'text'"
background-color="rgb(100%, 100%, 100%, 10%)"
color="rgb(100%, 100%, 100%, 20%)"
class="white-placeholder full-width"
v-model="field.value"
:rules="field.rules"
:placeholder="field.placeholder"
:success="!!field.value"
@click:append="field.showIconData = !field.showIconData"
>
<template #prepend-inner>
<v-icon color="white" class="pr-3">
{{ field.prependIcon }}
</v-icon>
</template>
<template #append>
<div class="innerIcon">
<v-btn
v-if="field.appendIconShow"
flat
icon
text
x-small
@click="
() => {
field.showIconData = !field.showIconData;
field.password = !field.password;
}
"
>
<v-icon color="white">
{{
field.showIconData
? field.appendIconShow
: field.appendIconHide
}}
</v-icon>
</v-btn>
</div>
</template>
</v-text-field>
```
Here we have created the text fields we want to render and we are looping over `formFields` to fill in the props and slots.
```javascript
{
valid: false,
load: false,
formFields: [
{
name: "Email",
rules: [
v => !!v || "You must enter an email address.",
v => /.+@.+/.test(v) || "Email is not valid."
],
placeholder: "Email",
successmessage: "Email is valid.",
prependIcon: "mdi-at",
value: ""
},
{
name: "Password",
rules: [
v => !!v || "You must enter a password.",
v => (v && v.length >= 8) || "Minimum 8 characters."
],
placeholder: "Password",
successmessage: "Password is valid.",
prependIcon: "mdi-lock",
appendIconShow: "mdi-eye",
appendIconHide: "mdi-eye-off",
showIconData: false,
value: "",
password: true
}
]
}
```
This is the data object in the `<script>`. Here we define everything we need for the form, and specify all props needed for the form to work.
### Validation
Validating a form is done on the inputs that make up the form with the `rules` prop.
This prop takes an array where each one of them must resolve to `true` in order for the form to be valid. We use arrow functions as the value of the input field is passed into the rules in order to check whether or not it is valud.
### Submitting and check
You should create a `<v-btn>` component and a method that will be called with `@click`.
```html
<v-btn
depressed
large
color="primary"
class="lighten-3"
:loading="load"
@click="submit"
>Submit</v-btn
>
```
```javascript
async submit() {
this.load = !this.load;
console.log("loading");
if (this.$refs.form.validate()) {
console.log("Success");
} else {
console.log("Not valid");
this.load = !this.load;
}
}
```
Here we are checking the validity of the form, and enabling/disabling the loading prop based on whether or not the form is correct.

1
src/components/Appbar.vue
View File

@@ -18,7 +18,6 @@
<v-app-bar
flat
app
class="hidden-sm-and-down"
color="#EEEEEE"
v-if="!this.$store.getters.fullScreen"
>

109
src/views/forms/LoginForm.vue
View File

@@ -42,41 +42,56 @@
>
<v-form
v-model="valid"
ref="form"
class="pt-4 d-flex flex-column align-center full-width"
>
<v-text-field
v-model="username"
v-for="field in formFields"
:key="field.name"
outlined
rounded
placeholder="Username"
required
:type="field.password ? 'password' : 'text'"
background-color="rgb(100%, 100%, 100%, 10%)"
color="rgb(100%, 100%, 100%, 20%)"
class="white-placeholder full-width"
required
v-model="field.value"
:rules="field.rules"
:placeholder="field.placeholder"
:success="!!field.value"
@click:append="field.showIconData = !field.showIconData"
>
<template #prepend-inner>
<v-icon color="white" class="pr-3">
mdi-account-circle
{{ field.prependIcon }}
</v-icon>
</template>
</v-text-field>
<v-text-field
v-model="password"
outlined
rounded
type="password"
placeholder="Password"
background-color="rgb(100%, 100%, 100%, 10%)"
color="rgb(100%, 100%, 100%, 20%)"
class="white-placeholder full-width"
required
<template #append>
<div class="innerIcon">
<v-btn
v-if="field.appendIconShow"
flat
icon
text
x-small
@click="
() => {
field.showIconData = !field.showIconData;
field.password = !field.password;
}
"
>
<template #prepend-inner>
<v-icon color="white" class="pr-3">
mdi-lock
<v-icon color="white">
{{
field.showIconData
? field.appendIconShow
: field.appendIconHide
}}
</v-icon>
</template></v-text-field
>
</v-btn>
</div>
</template>
</v-text-field>
<v-btn
depressed
large
@@ -101,9 +116,35 @@ export default {
data() {
return {
valid: false,
username: "",
password: "",
load: false
load: false,
formFields: [
{
name: "Email",
rules: [
v => !!v || "You must enter an email address.",
v => /.+@.+/.test(v) || "Email is not valid."
],
placeholder: "Email",
successmessage: "Email is valid.",
prependIcon: "mdi-at",
value: ""
},
{
name: "Password",
rules: [
v => !!v || "You must enter a password.",
v => (v && v.length >= 8) || "Minimum 8 characters."
],
placeholder: "Password",
successmessage: "Password is valid.",
prependIcon: "mdi-lock",
appendIconShow: "mdi-eye",
appendIconHide: "mdi-eye-off",
showIconData: false,
value: "",
password: true
}
]
};
},
methods: {
@@ -112,8 +153,14 @@ export default {
console.log("loading");
if (this.$refs.form.validate()) {
console.log("Success");
} else {
console.log("Not valid");
this.load = !this.load;
}
}
},
showPassword() {
//
}
};
</script>
@@ -151,20 +198,4 @@ export default {
color: white !important;
opacity: 1;
}
.v-input__slot:hover {
border-color: #6fbd44;
}
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)
> .v-input__control
> .v-input__slot:hover {
border-width: 1px !important;
border-style: solid !important;
border-color: #6fbd44 !important;
}
.align-right {
text-align: right;
}
</style>