Vuetify Stepper Form Implementation

<template>
  <v-container>
    <v-stepper v-model="step">
      <!-- Stepper Header -->
      <v-stepper-header>
        <v-stepper-item title="Sign Up" value="1"></v-stepper-item>
        <v-divider></v-divider>
        <v-stepper-item title="Verify" value="2"></v-stepper-item>
        <v-divider></v-divider>
        <v-stepper-item title="Login" value="3"></v-stepper-item>
      </v-stepper-header>

      <v-stepper-items>
        <!-- Step 1: Registration Form -->
        <v-stepper-content value="1">
          <v-form ref="registerForm" v-model="isValid">
            <v-text-field v-model="user.name" label="Full Name" required></v-text-field>
            <v-text-field v-model="user.email" label="Email" type="email" required></v-text-field>
            <v-text-field v-model="user.password" label="Password" type="password" required></v-text-field>
            <v-btn color="primary" :disabled="!isValid" @click="registerUser">Next</v-btn>
          </v-form>
        </v-stepper-content>

        <!-- Step 2: OTP Verification -->
        <v-stepper-content value="2">
          <p>Enter the OTP sent to your email</p>
          <v-text-field v-model="otp" label="OTP" required></v-text-field>
          <v-btn color="primary" @click="verifyOtp">Verify</v-btn>
        </v-stepper-content>

        <!-- Step 3: Login Confirmation -->
        <v-stepper-content value="3">
          <p>Registration complete! You can now login.</p>
          <v-btn color="success" @click="login">Login</v-btn>
        </v-stepper-content>
      </v-stepper-items>
    </v-stepper>
  </v-container>
</template>

<script setup>
import { ref } from 'vue';

const step = ref(1);
const isValid = ref(false);
const user = ref({
  name: '',
  email: '',
  password: '',
});
const otp = ref('');

const registerUser = () => {
  // Simulate API call for registration
  console.log('User Registered:', user.value);
  step.value = 2;
};

const verifyOtp = () => {
  if (otp.value === '123456') {
    console.log('OTP Verified!');
    step.value = 3;
  } else {
    alert('Invalid OTP!');
  }
};

const login = () => {
  console.log('Redirecting to login...');
};
</script>