Untitled

<template>
  <div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-12 col-md-6 col-lg-5">
        <div class="card shadow-sm">
          <div class="card-body p-4">
            <h3 class="mb-1">Register</h3>
            <p class="text-muted mb-4">Create an account.</p>

            <form @submit.prevent="register">
              <div class="mb-3">
                <label class="form-label">Email</label>
                <input v-model.trim="email" type="email" class="form-control" required />
              </div>

              <div class="mb-3">
                <label class="form-label">Password</label>
                <input v-model="password" type="password" class="form-control" required minlength="6" />
              </div>

              <div class="mb-3">
                <label class="form-label">Confirm Password</label>
                <input v-model="confirm" type="password" class="form-control" required minlength="6" />
              </div>

              <div v-if="error" class="alert alert-danger py-2">{{ error }}</div>
              <div v-if="success" class="alert alert-success py-2">{{ success }}</div>

              <button class="btn btn-success w-100" :disabled="loading">
                <span v-if="loading" class="spinner-border spinner-border-sm me-2"></span>
                Register
              </button>
            </form>

            <div class="mt-3 text-center">
              <span class="text-muted">Already have an account?</span>
              <RouterLink to="/login"> Login</RouterLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import api from "../api";

const router = useRouter();

const email = ref("");
const password = ref("");
const confirm = ref("");

const loading = ref(false);
const error = ref("");
const success = ref("");

async function register() {
  error.value = "";
  success.value = "";

  if (password.value !== confirm.value) {
    error.value = "Passwords do not match.";
    return;
  }

  loading.value = true;
  try {
    const res = await api.post("/users/register", {
      email: email.value,
      password: password.value,
    });

    success.value = res.data?.message || "Registered successfully!";
    setTimeout(() => router.push("/login"), 700);
  } catch (e) {
    error.value = e?.response?.data?.message || "Registration failed.";
  } finally {
    loading.value = false;
  }
}
</script>