Untitled

<template>
  <div data-theme="light">
    <form action="" method="post" @submit.prevent="register">
      <div
        class="container mx-auto flex flex-col items-center justify-center mt-16"
      >
        <div class="w-3/4 flex justify-center gap-16">
          <div class="w-3/4 mx-auto border border-gray-300 p-4">
            <h1 class="text-4xl font-bold text-center mb-4">SPDN</h1>
            <h3 class="text-2xl font-semibold text-center mb-1">
              Daftar Akun Baru
            </h3>
            <p class="text-center">Masukkan Data Diri Anda</p>
            <InputForm
              inputId="phoneNumber"
              labelText="Nomor Telepon"
              inputType="number"
              placeholderText="08xxxxxxx"
              v-model="phoneNumber"
              :isRequired="true"
            />

            <InputForm
              inputId="email"
              labelText="Email"
              inputType="email"
              placeholderText="johnDoe@domain.com"
              v-model="email"
              :isRequired="true"
            />

            <InputForm
              inputId="fullName"
              labelText="Nama Lengkap"
              inputType="text"
              placeholderText="John Doe"
              v-model="fullName"
              :isRequired="true"
            />

            <InputForm
              inputId="password"
              labelText="Kata Sandi"
              inputType="password"
              placeholderText="********"
              v-model="password"
              :isRequired="true"
            />

            <InputForm
              inputId="confirmPassword"
              labelText="Ulangi Kata Sandi"
              inputType="password"
              placeholderText="********"
              v-model="confirmPassword"
              :isRequired="true"
            />

            <div class="flex justify-between py-4">
              <div class="form-control">
                <label class="label cursor-pointer">
                  <input type="checkbox" checked="checked" class="checkbox" />
                  <span class="label-text ps-4 text-md"
                    >Setuju dengan persyaratan</span
                  >
                </label>
              </div>
            </div>
            <button
              class="btn w-full bg-primary text-secondary hover:bg-secondary hover:text-primary"
              type="submit"
            >
              Daftar
            </button>
            <p class="text-center mt-3">
              Sudah punya akun ? <nuxt-link to="/auth/login">Masuk</nuxt-link>
            </p>
          </div>
        </div>
      </div>
    </form>
    <p class="text-center mt-4 text-sm text-red-600" v-if="error">
      {{ error }}
    </p>
  </div>
</template>

<script>
import InputForm from "~/components/FormInput/InputForm.vue";

export default {
  name: "register",
  layout: "auth",
  components: {
    InputForm,
  },
  data() {
    return {
      phoneNumber: "",
      email: "",
      fullName: "",
      password: "",
      confirmPassword: "",
      isRequired: true,
      error: "",
    };
  },
  methods: {
    async register(e) {
      e.preventDefault();

      this.error = "";

      if (this.password !== this.confirmPassword) {
        this.error = "Password tidak sama";
        return;
      }

      try {
        const userData = {
          phone_number: this.phoneNumber,
          email: this.email,
          name: this.fullName,
          password: this.password,
          confPassword: this.confirmPassword,
        };

        const response = await this.$axios.post("/user/registration", userData);

        if (response.data.error) {
          this.error = response.data.message;
          return;
        }

        console.log(response.data);

        alert("Registrasi Berhasil");

        // this.$router.push("/auth/login");
      } catch (err) {
        alert("Registrasi gagal! Silahkan coba lagi.");
      }
    },
  },
};
</script>