adding latest completed form

firebase.md

@@ -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.