454 lines
12 KiB
Vue
454 lines
12 KiB
Vue
<script setup>
|
|
import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
|
|
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
|
import { themeConfig } from '@themeConfig'
|
|
import registerMultiStepIllustrationDark from '@images/illustrations/register-multi-step-illustration-dark.png'
|
|
import registerMultiStepIllustrationLight from '@images/illustrations/register-multi-step-illustration-light.png'
|
|
import registerMultiStepBgDark from '@images/pages/register-multi-step-bg-dark.png'
|
|
import registerMultiStepBgLight from '@images/pages/register-multi-step-bg-light.png'
|
|
|
|
const registerMultiStepBg = useGenerateImageVariant(registerMultiStepBgLight, registerMultiStepBgDark)
|
|
|
|
definePageMeta({
|
|
layout: 'blank',
|
|
public: true,
|
|
|
|
})
|
|
|
|
const currentStep = ref(0)
|
|
const isPasswordVisible = ref(false)
|
|
const isConfirmPasswordVisible = ref(false)
|
|
const registerMultiStepIllustration = useGenerateImageVariant(registerMultiStepIllustrationLight, registerMultiStepIllustrationDark)
|
|
|
|
const radioContent = [
|
|
{
|
|
title: 'Starter',
|
|
desc: 'A simple start for everyone.',
|
|
value: '0',
|
|
},
|
|
{
|
|
title: 'Standard',
|
|
desc: 'For small to medium businesses.',
|
|
value: '99',
|
|
},
|
|
{
|
|
title: 'Enterprise',
|
|
desc: 'Solution for big organizations.',
|
|
value: '499',
|
|
},
|
|
]
|
|
|
|
const items = [
|
|
{
|
|
title: 'Account',
|
|
subtitle: 'Account Details',
|
|
icon: 'tabler-file-analytics',
|
|
},
|
|
{
|
|
title: 'Personal',
|
|
subtitle: 'Enter Information',
|
|
icon: 'tabler-user',
|
|
},
|
|
{
|
|
title: 'Billing',
|
|
subtitle: 'Payment Details',
|
|
icon: 'tabler-credit-card',
|
|
},
|
|
]
|
|
|
|
const form = ref({
|
|
username: '',
|
|
email: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
link: '',
|
|
firstName: '',
|
|
lastName: '',
|
|
mobile: '',
|
|
pincode: '',
|
|
address: '',
|
|
landmark: '',
|
|
city: '',
|
|
state: null,
|
|
selectedPlan: '0',
|
|
cardNumber: '',
|
|
cardName: '',
|
|
expiryDate: '',
|
|
cvv: '',
|
|
})
|
|
|
|
const onSubmit = () => {
|
|
|
|
// eslint-disable-next-line no-alert
|
|
alert('Submitted..!!')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<NuxtLink to="/">
|
|
<div class="auth-logo d-flex align-center gap-x-3">
|
|
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
|
<h1 class="auth-title">
|
|
{{ themeConfig.app.title }}
|
|
</h1>
|
|
</div>
|
|
</NuxtLink>
|
|
|
|
<VRow
|
|
no-gutters
|
|
class="auth-wrapper"
|
|
>
|
|
<VCol
|
|
md="4"
|
|
class="d-none d-md-flex"
|
|
>
|
|
<!-- here your illustration -->
|
|
<div class="d-flex justify-center align-center w-100 position-relative">
|
|
<VImg
|
|
:src="registerMultiStepIllustration"
|
|
class="illustration-image flip-in-rtl"
|
|
/>
|
|
|
|
<img
|
|
class="bg-image position-absolute w-100 flip-in-rtl"
|
|
:src="registerMultiStepBg"
|
|
alt="register-multi-step-bg"
|
|
height="340"
|
|
>
|
|
</div>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="8"
|
|
class="auth-card-v2 d-flex align-center justify-center pa-10"
|
|
style="background-color: rgb(var(--v-theme-surface));"
|
|
>
|
|
<VCard
|
|
flat
|
|
class="mt-12 mt-sm-10"
|
|
>
|
|
<AppStepper
|
|
v-model:current-step="currentStep"
|
|
:items="items"
|
|
:direction="$vuetify.display.smAndUp ? 'horizontal' : 'vertical'"
|
|
icon-size="22"
|
|
class="stepper-icon-step-bg mb-12"
|
|
/>
|
|
|
|
<VWindow
|
|
v-model="currentStep"
|
|
class="disable-tab-transition"
|
|
style="max-inline-size: 681px;"
|
|
>
|
|
<VForm>
|
|
<VWindowItem>
|
|
<h4 class="text-h4">
|
|
Account Information
|
|
</h4>
|
|
<p class="text-body-1 mb-6">
|
|
Enter Your Account Details
|
|
</p>
|
|
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="form.username"
|
|
label="Username"
|
|
placeholder="Johndoe"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="form.email"
|
|
label="Email"
|
|
placeholder="johndoe@email.com"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="form.password"
|
|
label="Password"
|
|
placeholder="············"
|
|
:type="isPasswordVisible ? 'text' : 'password'"
|
|
autocomplete="password"
|
|
:append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
|
|
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="form.confirmPassword"
|
|
label="Confirm Password"
|
|
autocomplete="confirm-password"
|
|
placeholder="············"
|
|
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
|
:append-inner-icon="isConfirmPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
|
|
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol cols="12">
|
|
<AppTextField
|
|
v-model="form.link"
|
|
label="Profile Link"
|
|
placeholder="https://profile.com/johndoe"
|
|
type="url"
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem>
|
|
<h4 class="text-h4">
|
|
Personal Information
|
|
</h4>
|
|
<p>
|
|
Enter Your Personal Information
|
|
</p>
|
|
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="form.firstName"
|
|
label="First Name"
|
|
placeholder="John"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="form.lastName"
|
|
label="Last Name"
|
|
placeholder="Doe"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="form.mobile"
|
|
type="number"
|
|
label="Mobile"
|
|
placeholder="+1 123 456 7890"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="form.pincode"
|
|
type="number"
|
|
label="Pincode"
|
|
placeholder="123456"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol cols="12">
|
|
<AppTextField
|
|
v-model="form.address"
|
|
label="Address"
|
|
placeholder="1234 Main St, New York, NY 10001, USA"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol cols="12">
|
|
<AppTextField
|
|
v-model="form.landmark"
|
|
label="Landmark"
|
|
placeholder="Near Central Park"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="form.city"
|
|
label="City"
|
|
placeholder="New York"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppSelect
|
|
v-model="form.state"
|
|
label="State"
|
|
placeholder="Select State"
|
|
:items="['New York', 'California', 'Florida', 'Washington', 'Texas']"
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VWindowItem>
|
|
|
|
<VWindowItem>
|
|
<h4 class="text-h4">
|
|
Select Plan
|
|
</h4>
|
|
<p class="text-body-1 mb-5">
|
|
Select plan as per your requirement
|
|
</p>
|
|
|
|
<CustomRadiosWithIcon
|
|
v-model:selected-radio="form.selectedPlan"
|
|
:radio-content="radioContent"
|
|
:grid-column="{ sm: '4', cols: '12' }"
|
|
>
|
|
<template #default="{ item }">
|
|
<div class="text-center">
|
|
<h5 class="text-h5 mb-2">
|
|
{{ item.title }}
|
|
</h5>
|
|
<p class="clamp-text mb-2">
|
|
{{ item.desc }}
|
|
</p>
|
|
|
|
<div class="d-flex align-center justify-center">
|
|
<span class="text-primary mb-2">$</span>
|
|
<span class="text-h4 text-primary">
|
|
{{ item.value }}
|
|
</span>
|
|
<span class="mt-2">/month</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</CustomRadiosWithIcon>
|
|
|
|
<h4 class="text-h4 mt-12">
|
|
Payment Information
|
|
</h4>
|
|
<p class="text-body-1 mb-6">
|
|
Enter your card information
|
|
</p>
|
|
|
|
<VRow>
|
|
<VCol cols="12">
|
|
<AppTextField
|
|
v-model="form.cardNumber"
|
|
type="number"
|
|
label="Card Number"
|
|
placeholder="1234 1234 1234 1234"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<AppTextField
|
|
v-model="form.cardName"
|
|
label="Name on Card"
|
|
placeholder="John Doe"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="6"
|
|
md="3"
|
|
>
|
|
<AppTextField
|
|
v-model="form.expiryDate"
|
|
label="Expiry"
|
|
placeholder="MM/YY"
|
|
/>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="6"
|
|
md="3"
|
|
>
|
|
<AppTextField
|
|
v-model="form.cvv"
|
|
type="number"
|
|
label="CVV"
|
|
placeholder="123"
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VWindowItem>
|
|
</VForm>
|
|
</VWindow>
|
|
|
|
<div class="d-flex flex-wrap justify-space-between gap-x-4 mt-6">
|
|
<VBtn
|
|
color="secondary"
|
|
:disabled="currentStep === 0"
|
|
variant="tonal"
|
|
@click="currentStep--"
|
|
>
|
|
<VIcon
|
|
icon="tabler-arrow-left"
|
|
start
|
|
class="flip-in-rtl"
|
|
/>
|
|
Previous
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
v-if="items.length - 1 === currentStep"
|
|
color="success"
|
|
@click="onSubmit"
|
|
>
|
|
submit
|
|
</VBtn>
|
|
|
|
<VBtn
|
|
v-else
|
|
@click="currentStep++"
|
|
>
|
|
Next
|
|
|
|
<VIcon
|
|
icon="tabler-arrow-right"
|
|
end
|
|
class="flip-in-rtl"
|
|
/>
|
|
</VBtn>
|
|
</div>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@use "@core/scss/template/pages/page-auth.scss";
|
|
|
|
.illustration-image {
|
|
block-size: 550px;
|
|
inline-size: 248px;
|
|
}
|
|
|
|
.bg-image {
|
|
inset-block-end: 0;
|
|
}
|
|
</style>
|