initial commit
This commit is contained in:
@@ -0,0 +1,93 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
mobileNumber: {
|
||||
type: String,
|
||||
required: false,
|
||||
},
|
||||
isDialogVisible: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'update:isDialogVisible',
|
||||
'submit',
|
||||
])
|
||||
|
||||
const phoneNumber = ref(structuredClone(toRaw(props.mobileNumber)))
|
||||
|
||||
const formSubmit = () => {
|
||||
if (phoneNumber.value) {
|
||||
emit('submit', phoneNumber.value)
|
||||
emit('update:isDialogVisible', false)
|
||||
}
|
||||
}
|
||||
|
||||
const resetPhoneNumber = () => {
|
||||
phoneNumber.value = structuredClone(toRaw(props.mobileNumber))
|
||||
emit('update:isDialogVisible', false)
|
||||
}
|
||||
|
||||
const dialogModelValueUpdate = val => {
|
||||
emit('update:isDialogVisible', val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VDialog
|
||||
max-width="787"
|
||||
:model-value="props.isDialogVisible"
|
||||
@update:model-value="dialogModelValueUpdate"
|
||||
>
|
||||
<!-- Dialog close btn -->
|
||||
<DialogCloseBtn @click="dialogModelValueUpdate(false)" />
|
||||
|
||||
<VCard class="pa-5 pa-sm-8">
|
||||
<VCardItem class="text-start">
|
||||
<VCardTitle class="text-h6 font-weight-medium mb-2">
|
||||
Verify Your Mobile Number for SMS
|
||||
</VCardTitle>
|
||||
<VCardSubtitle>
|
||||
<span class="text-base">
|
||||
Enter your mobile phone number with country code and we will send you a verification code.
|
||||
</span>
|
||||
</VCardSubtitle>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText class="pt-6">
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<AppTextField
|
||||
v-model="phoneNumber"
|
||||
name="mobile"
|
||||
label="Phone Number"
|
||||
type="number"
|
||||
placeholder="202 555 0111"
|
||||
class="mb-5"
|
||||
/>
|
||||
|
||||
<div class="d-flex flex-wrap justify-end gap-4">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="tonal"
|
||||
@click="resetPhoneNumber"
|
||||
>
|
||||
Cancel
|
||||
</VBtn>
|
||||
<VBtn
|
||||
type="submit"
|
||||
@click="formSubmit"
|
||||
>
|
||||
continue
|
||||
<VIcon
|
||||
end
|
||||
icon="tabler-arrow-right"
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VDialog>
|
||||
</template>
|
||||
Reference in New Issue
Block a user