savvy-firebase/src/views/forms/LoginForm.vue

<template>
  <v-container fill-height fluid>
    <v-row>
      <v-spacer></v-spacer>
      <v-col
        cols="4"
        align-self="stretch"
        class="d-flex flex-column justify-space-around align-end"
      >
        <v-card
          color="rgb(0, 0, 0, 0)"
          flat
          class="d-flex align-end flex-column"
        >
          <div class="text-align-right">
            <h1 class="whiteText title ">
              Savvy Firebase Tutorial
            </h1>
            <p class="whiteText mb-0 mt-2">Log in or create an account.</p>
          </div>
        </v-card>
        <v-card color="rgb(0, 0, 0, 0)" flat>
          <div class="text-align-right">
            <p class="whiteText mb-0">Don't have an account? Create one.</p>
          </div>
        </v-card>
      </v-col>
      <v-col cols="1"></v-col>
      <v-col
        xs="5"
        md="3"
        align-self="center"
        class="d-flex justify-start flex-column align-start"
      >
        <v-card
          color="rgb(0, 0, 0, 0)"
          flat
          class="d-flex align-center flex-column full-width"
        >
          <v-icon color="white" size="3em" class="pb-4"
            >mdi-account-circle</v-icon
          >
          <v-form
            v-model="valid"
            ref="form"
            class="pt-4 d-flex flex-column align-center full-width"
          >
            <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"
                    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>
            <v-btn
              depressed
              large
              color="primary"
              class="lighten-3"
              :loading="load"
              @click="submit"
              >Submit</v-btn
            >
          </v-form>
          <p class="whiteText mb-0 pt-5">Forgot password?</p>
        </v-card>
      </v-col>
      <v-col cols="0" md="3"></v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  name: "LoginForm",
  data() {
    return {
      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
        }
      ]
    };
  },
  methods: {
    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;
      }
    }
  },
  showPassword() {
    //
  }
};
</script>

<style lang="scss" scoped>
// @import "../../scss/_variables.scss";

.whiteText {
  color: white;
}

.full-width {
  width: 100%;
}

.text-align-right {
  text-align: right;
}

.title {
  font-size: 2rem !important;
}

.white-placeholder ::v-deep input::placeholder {
  color: white !important;
  opacity: 1;
}

.white-placeholder ::v-deep input {
  color: white !important;
  opacity: 1;
}

.white-placeholder ::v-deep .v-label {
  color: white !important;
  opacity: 1;
}
</style>