retailer-vue/src/components/gate/SignUpComponent.vue

<template>
  <v-card class="mx-auto my-auto" elevation="10">
    <v-toolbar color="primary" class="white--text" flat>
      <v-toolbar-title>Signup</v-toolbar-title>
    </v-toolbar>
    <v-card-text>
      <v-alert type="error" v-if="!!errorMessage">{{errorMessage}}</v-alert>
      <v-alert type="success" v-if="!!signUpMessage">{{signUpMessage}}</v-alert>
      <v-form ref="signUpForm" id="signup-form" @submit.prevent="signUp">
        <v-text-field
          label="First Name"
          class="textfield-border"
          type="text"
          ref="firstName"
          placeholder="Enter your First Name"
          v-model="firstname"
          :rules="firstNameRules"
          prepend-icon="mdi-account"
        ></v-text-field>
        <v-text-field
          label="Last Name"
          class="textfield-border"
          type="text"
          ref="lastName"
          placeholder="Enter your Last Name"
          v-model="lastname"
          :rules="lastNameRules"
          prepend-icon="mdi-account"
        ></v-text-field>

        <v-text-field
          label="Email Id"
          class="textfield-border"
          placeholder="Enter your email"
          type="email"
          ref="email"
          id="userEmail"
          v-model="email"
          :rules="emailRules"
          prepend-icon="mdi-email-outline"
        ></v-text-field>

        <v-text-field
          type="password"
          class="textfield-border"
          label="Password"
          ref="password"
          placeholder="Enter your password"
          v-model="password"
          :rules="commonValidationRules.passwordRule"
          prepend-icon="mdi-lock"
        ></v-text-field>
         <v-checkbox v-model="newsletter" label="Subscribe to our newsletter" color="indigo"></v-checkbox>
        <div class="text-right mt-4">
          <v-hover v-slot:default="{ hover }">
            <v-btn
              large
              block
              :disabled="inProgress"
              :outlined="hover ? false:true"
              :color="hover ? 'primary' : 'primary'"
              class="mt-6 body"
              tile
              type="submit"
              form="signup-form"
              @click="signUp"
            >
              <v-progress-circular :size="20" color="primary" indeterminate v-if="inProgress"></v-progress-circular>Signup
            </v-btn>
          </v-hover>
        </div>
      </v-form>
      <v-row>
        <v-col cols="12">
          Already have an account sign in here
          <v-hover v-slot:default="{ hover }">
            <router-link
              class="text-decoration-none"
              :to="{name:'LoginPage'}"
              :class="hover ? 'content-link-hover-color' : 'primary--text'"
            >Sign In</router-link>
          </v-hover>
        </v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>
<script>
import { createHelpers } from "vuex-map-fields";
import { commonValidationRules } from "@/services/util.service";
const { mapFields } = createHelpers({
  getterType: "registration/getField",
  mutationType: "registration/updateField"
});

export default {
  name: "SignUpComponent",
  components: {},
  computed: {
    ...mapFields([
      "one",
      "one.email",
      "one.firstname",
      "one.lastname",
      "one.password",
      "one.newsletter",
      "errorMessage",
      "inProgress",
      "signUpMessage"
    ])
  },
  data: () => ({
    valid: true,
    commonValidationRules: commonValidationRules,
    firstNameRules: [
      v => !!v || "First Name is required",
      v => (v && v.length >= 3) || "First Name must be at least 3 characters"
    ],
    lastNameRules: [
      v => !!v || "Last Name is required",
      v => (v && v.length >= 3) || "Last Name must be at least 3 characters"
    ],
    // passwordRules: [
    //   v => !!v || "Password is required",
    //   v => (v && v.length >= 8) || "Password must be at least 8 characters"
    // ],
    emailRules: [
      v => !!v || "Email Id is required",
      v => /.+@.+\..+/.test(v) || "Email Id must be valid"
    ]
  }),
  methods: {
    signUp(e) {
      e.preventDefault();
      if (this.$refs.signUpForm.validate()) {
        this.$store.dispatch("registration/signUp");
        // .then(data => {
        //   if (data) {
        //     this.$store.dispatch(
        //       "auth/prepare",
        //       "You must confirm your account.Please check your email for the confirmation."
        //     );
        //     this.$router.push({
        //       name: "LoginPage"
        //     });
        //   }
        // });
      }
    }
  },
  created() {
    this.$store.dispatch("registration/resetState");
  }
};
</script>