eamco_office_frontend/src/pages/auth/register.vue

<template>
  <div class="WrapperPlain">
    <div class="container mx-auto max-w-lg text-white">
      <div class="mx-auto flex items-center justify-center ">
        <form class="bg-neutral rounded-md  px-8 pt-6 pb-8 mb-4 mt-4 w-full" method="POST" @submit.prevent="onSubmit">
          <div class="mb-4 text-center text-[28px] ">Register</div>
          <div class="mb-4">
            <label class="block text-white text-sm font-bold mb-2" for="username">Username</label>
            <input v-model="registerForm.username" class="rounded w-full py-2 px-3 input-primary text-black" id="username"
                   type="text" placeholder="Login Username" />
            <span v-if="v$.registerForm.username.$error" class="text-red-600 text-center">
              {{ v$.registerForm.username.$errors[0].$message }}
            </span>
          </div>

          <div class="mb-4">
            <label class="block text-white text-sm font-bold mb-2" for="username">Email</label>
            <input v-model="registerForm.email" class="rounded w-full py-2 px-3 input-primary text-black" id="email"
                   type="text" placeholder="Email" />
            <span v-if="v$.registerForm.email.$error" class="text-red-600 text-center">
              {{ v$.registerForm.email.$errors[0].$message }}
            </span>
          </div>
          <div class="mb-4">
            <label class="block text-white text-sm font-bold mb-2" for="password">Password</label>
            <input v-model="registerForm.password" class="rounded w-full py-2 px-3 input-primary text-black" id="password"
                   type="password" autocomplete="off" placeholder="Password" />
            <span v-if="v$.registerForm.password.$error" class="text-red-600 text-center">
              {{ v$.registerForm.password.$errors[0].$message }}
            </span>
          </div>
          <div class="mb-4">
            <label class="block text-white text-sm font-bold mb-2" for="password_confirm">Confirm Password</label>
            <input v-model="registerForm.password_confirm" class="rounded w-full py-2 px-3 input-primary text-black"
                   id="password" type="password" autocomplete="off" placeholder="Confirm Password" />
            <span v-if="v$.registerForm.password_confirm.$error" class="text-red-600 text-center">
              {{ v$.registerForm.password_confirm.$errors[0].$message }}
            </span>
          </div>

          <div class="flex items-center justify-center mb-6">
            <button
                class="bg-primary hover:bg-zinc-400 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                type="submit">
              Register
            </button>
          </div>
          <div class="flex flex-col justify-center">
            <router-link :to="{ name: 'lostPassword' }"
                         class="text-center font-bold text-sm text-blue-500 hover:text-blue-800">Forgot Password?</router-link>
          </div>
          <div class="flex flex-col justify-center mt-5">
            <router-link :to="{ name: 'login' }"
                         class="text-center font-bold text-sm text-blue-500 hover:text-blue-800">Login Here</router-link>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import axios from "axios";
import { notify } from "@kyvg/vue3-notification";
import { useVuelidate } from '@vuelidate/core';
import { required, email, minLength, sameAs } from "@vuelidate/validators";
import Header from "../../layouts/headers/headernoauth.vue";

export default defineComponent({
  name: "Register",
  components: { Header },
  data () {
    return {
      v$: useVuelidate(),
      isAuthenticated: false,

      registerForm: {
        username: "",
        email: "",
        password: "",
        password_confirm: "",
      },
    };
  },
  mounted () {

  },
  validations () {
    return {
      registerForm: {
        password: { required, minLength: minLength(6) },
        username: { required, minLength: minLength(6) },
        email: { email, required },
        password_confirm: {
          required,
          minLength: minLength(6),
          sameAs: sameAs(this.registerForm.password),
        },

      },
    };
  },
  methods: {
    onSubmit () {
      const payLoad = {
        username: this.registerForm.username,
        password: this.registerForm.password,
        email: this.registerForm.email,
      };
      this.v$.$validate(); // checks all inputs
      if (this.v$.$invalid) {
        notify({
          title: "Authorization",
          text: "Form Failure;  Fields must be filled our correctly.",
          type: "error",
        });
      } else {
        this.Register(payLoad);
      }
    },
    Register (payLoad: {
      username: string;
      password: string;
      email: string;

    }) {
      let path = import.meta.env.VITE_BASE_URL + "/auth/register";
      axios({
        method: "post",
        url: path,
        data: payLoad,
        withCredentials: true,
      })
          .then((response:any) => {
            if (response.data.error) {
              notify({
                title: "Authorization",
                text: response.data.error,
                type: "error",
              });
            };

            if (response.data.ok) {

              localStorage.setItem("auth_user", response.data.user);
              localStorage.setItem("auth_token", response.data.token);

              this.$router.push({ name: "home" });
              notify({
                title: "Authorization",
                text: "Success",
                type: "success",
              });
            }
          })
    },
  },
});
</script>

<style  scoped></style>