ShowEasyFrontEnd/FrontEnd/pages/user/signUp.vue

<template>
  <div class="tw-bg-white md:tw-rounded-[24px] md:tw-mt-[30px] md:tw-pt-[60px] md:tw-pb-[150px] md:tw-px-[30px]">
    <v-spacer v-if="emailSignUp">
      <h1 class="tw-text-[40px] tw-font-bold tw-mb-[20px] md:tw-text-[24px] md:tw-mb-[14px]">{{ $t("Sign Up") }}</h1>
      <p class="tw-body-3 tw-text-neutral-400 tw-mb-[16px] md:tw-mb-[12px]">
        {{ $t("Welcome to ShowEasy!") }}
      </p>
      <p class="tw-body-3 tw-mb-[45px] md:tw-mb-[32px]">
        {{ $t("Already have an account?") }}
        <nuxt-link :to="localePath('/user')" class="primary--text text-decoration-none">{{ $t("Login") }}</nuxt-link>
      </p>
      <div class="tw-grid tw-grid-cols-1 tw-gap-[10px] md:tw-gap-[12px]">
        <button @click="googleLogin"
          class="tw-flex tw-justify-center tw-items-center tw-w-full tw-py-[8px] tw-rounded-[16px] tw-border tw-border-solid tw-text-black tw-border-neutrals-200"><img
            width="24px" height="24px" src="~/assets/img/g-normal.png" class="mr-5" />{{ $t("Sign up with Google")
            }}</button>
        <button @click="facebookLogin"
          class="tw-flex tw-justify-center tw-items-center tw-w-full tw-py-[8px] tw-rounded-[16px] tw-border tw-border-solid tw-text-black tw-border-neutrals-200"><img
            width="20px" height="20px" src="~/assets/img/f_logo_RGB-Blue_72.png" class="mr-5" />
          {{ $t("Sign up with Facebook") }}
        </button>
        <button @click="emailSignUp = !emailSignUp"
          class="tw-flex tw-justify-center tw-items-center tw-w-full tw-py-[8px] tw-rounded-[16px] tw-border tw-border-solid tw-text-black tw-border-neutrals-200">
          <unicon name="envelope" width="20px" height="20px"
            class="tw-flex tw-justify-center tw-items-center tw-mr-[20px]">
          </unicon>{{ $t("Sign up with Email") }}
        </button>
      </div>
    </v-spacer>
    <v-spacer v-if="!emailSignUp">
      <p class="title">{{ $t("Sign up with Email") }}</p>
      <p class="neutrals--text text--darken-3 text-size-14">
        {{ $t("Welcome to ShowEasy!") }}
      </p>
      <v-form v-model="valid">
        <v-text-field v-model="userData.first_name" background-color="neutrals darken-1"
          :label="this.$t('First Name') + '*'" placeholder="" filled rounded dense single-line :rules="[rules.require]">
        </v-text-field>
        <v-text-field v-model="userData.last_name" background-color="neutrals darken-1"
          :label="this.$t('Last Name') + '*'" placeholder="" filled rounded dense single-line :rules="[rules.require]">
        </v-text-field>
        <v-text-field v-model="userData.email" background-color="neutrals darken-1" :label="this.$t('Email') + '*'"
          filled rounded dense single-line :rules="[rules.email, rules.require]" validate-on-blur></v-text-field>
        <v-text-field v-model="userData.password" background-color="neutrals darken-1"
          :label="this.$t('Password') + '*'" :type="showPass ? 'text' : 'password'" placeholder="" filled rounded dense
          single-line :rules="[rules.checkPassword, rules.require]" :hint="
            this.$t(
              'userProfile.passwordsHint'
            )
          " persistent-hint :append-icon="showPass ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showPass = !showPass"
          validate-on-blur></v-text-field>
        <v-text-field v-model="confirmPasswordText" background-color="neutrals darken-1"
          :label="this.$t('Confirm Password') + '*'" :type="showConfirmPass ? 'text' : 'password'" placeholder="" filled
          rounded dense single-line :rules="[rules.checkConfirmPassword, rules.require]"
          :append-icon="showConfirmPass ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showConfirmPass = !showConfirmPass"
          validate-on-blur></v-text-field>
      </v-form>
      <v-checkbox v-model="subscribe" class="mt-n2 ml-1"><template v-slot:label><span
            class="neutrals--text text--darken-4 text-size-14">{{
            $t("Subscribe to ShowEasy\’s newsletter")
            }}</span></template></v-checkbox>
      <div class="md:tw-flex md:tw-justify-center md:tw-items-center"> <button @click="userRegister"
          :disabled="!validFormat"
          :class="['tw-block tw-w-full tw-py-[10px] tw-rounded-[16px] tw-border tw-border-solid tw-body-3 tw-font-normal tw-transition-all tw-duration-200 tw-ease-in-out',valid?'tw-text-white tw-bg-primary-default tw-border-primary-default':'tw-text-base-disable tw-bg-neutral-100 tw-border-neutral-100']">
          {{ $t("Sign Up") }}
        </button></div>
      <v-dialog v-model="dialog" :width="$vuetify.breakpoint.smAndUp ? 423 : 294"
        @click:outside="$router.push(localePath('/user'))">
        <v-card class="pa-7" :height="$vuetify.breakpoint.smAndUp ? 249 : 290">
          <v-spacer class="d-flex align-center text-size-20 neutrals--text text--darken-5">
            {{ $t("Verify your email") }}
            <v-spacer></v-spacer>
            <v-btn @click="$router.push(localePath('/user'))" icon>
              <v-icon> mdi-close </v-icon>
            </v-btn>
          </v-spacer>
          <v-spacer class="text-size-16 my-7 neutrals--text text--darken-4">{{ $t("We've sent a verification email to")
          }}<br />
            <span class="primary--text">{{ userData.email }}</span>{{
            $t(". Please click the link within to activate your account.")
            }}
          </v-spacer>
          <v-btn @click="resendVerifyEmail" class="primary no-text-transform" width="153px" rounded
            :disabled="countdown > 0">
            {{ $t("Resend") }}
            <span v-if="countdown > 0">
              {{ `(${this.countdown})` }}
            </span>
          </v-btn>
        </v-card>
      </v-dialog>
      <v-dialog v-model="errorDialog" :width="$vuetify.breakpoint.smAndUp ? 423 : 294">
        <v-card class="pa-7 border-radius-16" :max-height="$vuetify.breakpoint.smAndUp ? 249 : 290">
          <v-spacer class="d-flex align-center text-size-20 neutrals--text text--darken-5">
            {{ $t("Error") }}
            <v-spacer></v-spacer>
            <v-btn @click="errorDialog = !errorDialog" icon>
              <v-icon> mdi-close </v-icon>
            </v-btn>
          </v-spacer>
          <v-spacer class="text-size-16 my-7 neutrals--text text--darken-4">
            {{ $t("Same email has been created already.") }}
          </v-spacer>
          <v-spacer class="d-flex justify-center">
            <v-btn class="border-radius-16" color="primary" @click="errorDialog = !errorDialog">{{ $t("ok") }}</v-btn>
          </v-spacer>
        </v-card>
      </v-dialog>
      <p align="center" class="neutrals--text text--darken-3 text-size-14 mt-7">
        {{ $t("By signing up,") }}<br />
        {{ $t("you agree to the") }}
        <nuxt-link :to="localePath('/termsandconditions')" target="_blank" class="text-decoration-none">
          {{ $t("Terms & Conditions") }}</nuxt-link>
        {{ $t("and") }}
        <nuxt-link :to="localePath('/privacypolicy')" target="_blank" class="text-decoration-none">
          {{ $t("Privacy Policy") }}</nuxt-link>
      </p>
      <p align="center" class="neutrals--text text--darken-5 text-size-14">
        {{ $t("Already have an account?") }}
        <nuxt-link :to="localePath('/user')" class="primary--text text-decoration-none">{{ $t("Login") }}</nuxt-link>
      </p>
    </v-spacer>
    <loading :isLoading="isPageLoading"></loading>
  </div>
</template>

<script>
import loading from "@/components/newComponent/loading/loading.vue";

export default {
  name: "SignUp",
  layout: "login",
  auth: false,
  components: {
    loading,
  },
  data() {
    return {
      valid: false,
      showPass: false,
      showConfirmPass: false,
      emailSignUp: true,
      subscribe: true,
      dialog: false,
      errorDialog: false,
      btnText: "Sign up",
      confirmPasswordText: "",
      countdown: 60,
      isPageLoading: false,
      rules: {
        require: (value) => !!value || this.$t("Required."),
        email: (v) =>
          /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/.test(
            v
          ) || this.$t("Invalid email"),
        checkPassword: (v) =>
          (/(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])/.test(v) &&
            v.length >= 8 &&
            v.length <= 20) ||
          this.$t(
            "Passwords must be 8-20 characters with at least 1 number, 1 lower case letter and 1 upper case letter"
          ),
        checkConfirmPassword: (v) =>
          this.confirmPasswordText === this.userData.password ||
          this.$t("Your password and confirmation password do not match"),
      },
      userData: {
        first_name: "",
        last_name: "",
        email: "",
        password: "",
      },
    };
  },
  methods: {
    userRegister() {
      const postUserData = { ...this.userData };
      if (this.valid && this.userData.password === this.confirmPasswordText) {
        this.isPageLoading = true;
        this.$axios
          .post(`/member/users?lang=${this.$i18n.locale}`, postUserData)
          .then((res) => {
            console.log(res);
            this.timer = setInterval(() => {
              if (this.countdown > 0) {
                this.countdown--;
              }
              if (this.countdown === 0) {
                clearInterval(this.timer);
              }
            }, 1000);
            this.isPageLoading = false;
            this.dialog = !this.dialog;
          })
          .catch((err) => {
            if (err.response.status === 401) {
              this.errorDialog = true;
              this.isPageLoading = false;
            }
          });
      }
    },
    resendVerifyEmail() {
      this.countdown = 60;
      this.$axios
        .get(
          `/member/users/resend/${this.userData.email}?lang=${this.$i18n.locale}`
        )
        .then((res) => {
          clearInterval(this.timer);
          this.timer = setInterval(() => {
            if (this.countdown > 0) {
              this.countdown--;
            }
            if (this.countdown === 0) {
              clearInterval(this.timer);
            }
          }, 1000);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async facebookLogin() {
      try {
        await this.$auth.loginWith("facebook");
      } catch (err) {
        console.log(err);
      }
    },
    async googleLogin() {
      try {
        await this.$auth.loginWith("google");
      } catch (err) {
        console.log(err);
      }
    },
  },
  computed: {
    validFormat() {
      if (this.valid && this.userData.password === this.confirmPasswordText) {
        return true;
      } else {
        return false;
      }
    },
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) {
  padding: 0;
  margin: 0;
}

:deep(.v-messages__message) {
  font-size: 14px;
}

$border-style: 1px solid #e5e5e5;

.title {
  font-weight: 700;
  font-size: 26px;
  line-height: 34px;
  letter-spacing: 0.02em;
  color: #232323;
}

:deep(.v-text-field.v-text-field--enclosed .v-text-field__details) {
  margin-bottom: 0;
  padding: 0;

  .v-messages {
    color: #9c9c9c;
    display: none;
  }

  .v-messages.error--text {
    display: block;
    margin-top: 4px;
    margin-bottom: 16px;
  }
}


.btn-border {
  border: $border-style;
}
</style>