first commit
This commit is contained in:
Inshal
98
resources/js/pages/pages/account-settings/[tab].vue
Normal file
98
resources/js/pages/pages/account-settings/[tab].vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<script setup>
|
||||
import AccountSettingsAccount from '@/views/pages/account-settings/AccountSettingsAccount.vue'
|
||||
import AccountSettingsBillingAndPlans from '@/views/pages/account-settings/AccountSettingsBillingAndPlans.vue'
|
||||
import AccountSettingsConnections from '@/views/pages/account-settings/AccountSettingsConnections.vue'
|
||||
import AccountSettingsNotification from '@/views/pages/account-settings/AccountSettingsNotification.vue'
|
||||
import AccountSettingsSecurity from '@/views/pages/account-settings/AccountSettingsSecurity.vue'
|
||||
|
||||
const route = useRoute('pages-account-settings-tab')
|
||||
|
||||
const activeTab = computed({
|
||||
get: () => route.params.tab,
|
||||
set: () => route.params.tab,
|
||||
})
|
||||
|
||||
// tabs
|
||||
const tabs = [
|
||||
{
|
||||
title: 'Account',
|
||||
icon: 'ri-group-line',
|
||||
tab: 'account',
|
||||
},
|
||||
{
|
||||
title: 'Security',
|
||||
icon: 'ri-lock-line',
|
||||
tab: 'security',
|
||||
},
|
||||
{
|
||||
title: 'Billing & Plans',
|
||||
icon: 'ri-bookmark-line',
|
||||
tab: 'billing-plans',
|
||||
},
|
||||
{
|
||||
title: 'Notifications',
|
||||
icon: 'ri-notification-3-line',
|
||||
tab: 'notification',
|
||||
},
|
||||
{
|
||||
title: 'Connections',
|
||||
icon: 'ri-link',
|
||||
tab: 'connection',
|
||||
},
|
||||
]
|
||||
|
||||
definePage({ meta: { navActiveLink: 'pages-account-settings-tab' } })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<VTabs
|
||||
v-model="activeTab"
|
||||
class="v-tabs-pill"
|
||||
>
|
||||
<VTab
|
||||
v-for="item in tabs"
|
||||
:key="item.icon"
|
||||
:value="item.tab"
|
||||
:to="{ name: 'pages-account-settings-tab', params: { tab: item.tab } }"
|
||||
>
|
||||
<VIcon
|
||||
start
|
||||
:icon="item.icon"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VWindow
|
||||
v-model="activeTab"
|
||||
class="mt-5 disable-tab-transition"
|
||||
:touch="false"
|
||||
>
|
||||
<!-- Account -->
|
||||
<VWindowItem value="account">
|
||||
<AccountSettingsAccount />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Security -->
|
||||
<VWindowItem value="security">
|
||||
<AccountSettingsSecurity />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Billing -->
|
||||
<VWindowItem value="billing-plans">
|
||||
<AccountSettingsBillingAndPlans />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Notification -->
|
||||
<VWindowItem value="notification">
|
||||
<AccountSettingsNotification />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Connections -->
|
||||
<VWindowItem value="connection">
|
||||
<AccountSettingsConnections />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</div>
|
||||
</template>
|
||||
115
resources/js/pages/pages/authentication/forgot-password-v1.vue
Normal file
115
resources/js/pages/pages/authentication/forgot-password-v1.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<script setup>
|
||||
import miscMaskDark from '@images/misc/misc-mask-dark.png'
|
||||
import miscMaskLight from '@images/misc/misc-mask-light.png'
|
||||
import tree1 from '@images/misc/tree1.png'
|
||||
import tree3 from '@images/misc/tree3.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const form = ref({ email: '' })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<VCard
|
||||
class="auth-card pa-sm-4 pa-md-7 pa-0"
|
||||
max-width="460"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-3 justify-center mb-6">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
|
||||
<h1 class="auth-title">
|
||||
{{ themeConfig.app.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h4 class="text-h4 mb-1">
|
||||
Forgot Password? 🔒
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Enter your email and we'll send you instructions to reset your password
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
autofocus
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- reset password -->
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Send Reset Link
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- back to login -->
|
||||
<VCol cols="12">
|
||||
<RouterLink
|
||||
class="d-flex align-center justify-center"
|
||||
:to="{ name: 'pages-authentication-login-v1' }"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-s-line"
|
||||
size="20"
|
||||
class="flip-in-rtl me-2"
|
||||
/>
|
||||
<span>Back to login</span>
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex gap-x-2 auth-footer-start-tree">
|
||||
<img
|
||||
class="d-none d-md-block"
|
||||
:src="tree3"
|
||||
:height="120"
|
||||
:width="67"
|
||||
>
|
||||
<img
|
||||
class="d-none d-md-block align-self-end"
|
||||
:src="tree3"
|
||||
:height="70"
|
||||
:width="40"
|
||||
>
|
||||
</div>
|
||||
|
||||
<img
|
||||
:src="tree1"
|
||||
class="auth-footer-end-tree d-none d-md-block"
|
||||
:width="97"
|
||||
:height="210"
|
||||
>
|
||||
|
||||
<!-- bg img -->
|
||||
<img
|
||||
class="auth-footer-mask d-none d-md-block"
|
||||
:src="authThemeMask"
|
||||
height="172"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
132
resources/js/pages/pages/authentication/forgot-password-v2.vue
Normal file
132
resources/js/pages/pages/authentication/forgot-password-v2.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<script setup>
|
||||
import authV2ForgotPasswordIllustrationBorderedDark from '@images/pages/auth-v2-forgot-password-illustration-dark-border.png'
|
||||
import authV2ForgotPasswordIllustrationDark from '@images/pages/auth-v2-forgot-password-illustration-dark.png'
|
||||
import authV2ForgotPasswordIllustrationBorderedLight from '@images/pages/auth-v2-forgot-password-illustration-light-border.png'
|
||||
import authV2ForgotPasswordIllustrationLight from '@images/pages/auth-v2-forgot-password-illustration-light.png'
|
||||
import tree1 from '@images/misc/tree1.png'
|
||||
import authV2MaskDark from '@images/pages/mask-v2-dark.png'
|
||||
import authV2MaskLight from '@images/pages/mask-v2-light.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const authThemeImg = useGenerateImageVariant(authV2ForgotPasswordIllustrationLight, authV2ForgotPasswordIllustrationDark, authV2ForgotPasswordIllustrationBorderedLight, authV2ForgotPasswordIllustrationBorderedDark, true)
|
||||
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const email = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink 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>
|
||||
</RouterLink>
|
||||
|
||||
<VRow
|
||||
class="auth-wrapper"
|
||||
no-gutters
|
||||
>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
class="d-none d-md-flex position-relative"
|
||||
>
|
||||
<div
|
||||
class="d-flex align-center justify-end w-100 h-100 pa-10"
|
||||
:class="$vuetify.locale.isRtl ? 'pe-10' : 'pe-0'"
|
||||
>
|
||||
<VImg
|
||||
width="853"
|
||||
height="684"
|
||||
:src="authThemeImg"
|
||||
class="auth-illustration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="auth-footer-mask"
|
||||
height="360"
|
||||
:src="authThemeMask"
|
||||
>
|
||||
|
||||
<img
|
||||
:src="tree1"
|
||||
alt="tree image"
|
||||
height="140"
|
||||
class="auth-footer-tree"
|
||||
>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
class="auth-card-v2 d-flex align-center justify-center"
|
||||
style="background-color: rgb(var(--v-theme-surface));"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
:max-width="500"
|
||||
class="mt-12 mt-sm-0 pa-4"
|
||||
>
|
||||
<VCardText>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Forgot Password? 🔒
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Enter your email and we'll send you instructions to reset your password
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="email"
|
||||
autofocus
|
||||
label="Email"
|
||||
placeholder="johndoe@email.com"
|
||||
type="email"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- Reset link -->
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Send Reset Link
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- back to login -->
|
||||
<VCol cols="12">
|
||||
<RouterLink
|
||||
class="d-flex align-center justify-center"
|
||||
:to="{ name: 'pages-authentication-login-v2' }"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-s-line"
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
<span>Back to login</span>
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
158
resources/js/pages/pages/authentication/login-v1.vue
Normal file
158
resources/js/pages/pages/authentication/login-v1.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<script setup>
|
||||
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import miscMaskDark from '@images/misc/misc-mask-dark.png'
|
||||
import miscMaskLight from '@images/misc/misc-mask-light.png'
|
||||
import tree1 from '@images/misc/tree1.png'
|
||||
import tree3 from '@images/misc/tree3.png'
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const form = ref({
|
||||
email: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<VCard
|
||||
class="auth-card pa-sm-4 pa-md-7 pa-0"
|
||||
max-width="448"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-3 justify-center mb-6">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
|
||||
<h1 class="auth-title">
|
||||
{{ themeConfig.app.title }}
|
||||
</h1>
|
||||
</div>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Welcome to <span class="text-capitalize">{{ themeConfig.app.title }}!</span> 👋🏻
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Please sign-in to your account and start the adventure
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
autofocus
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center flex-wrap justify-space-between my-5 gap-4">
|
||||
<VCheckbox
|
||||
v-model="form.remember"
|
||||
label="Remember me"
|
||||
/>
|
||||
<RouterLink
|
||||
class="text-primary"
|
||||
:to="{ name: 'pages-authentication-forgot-password-v2' }"
|
||||
>
|
||||
Forgot Password?
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Login
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- create account -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="text-center text-base"
|
||||
>
|
||||
<span>New on our platform?</span> <RouterLink
|
||||
class="text-primary d-inline-block"
|
||||
:to="{ name: 'pages-authentication-register-v2' }"
|
||||
>
|
||||
Create an account
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex align-center"
|
||||
>
|
||||
<VDivider />
|
||||
<span class="mx-2 text-high-emphasis">or</span>
|
||||
<VDivider />
|
||||
</VCol>
|
||||
|
||||
<!-- auth providers -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="text-center"
|
||||
>
|
||||
<AuthProvider />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex gap-x-2 auth-footer-start-tree">
|
||||
<img
|
||||
class="d-none d-md-block"
|
||||
:src="tree3"
|
||||
:height="120"
|
||||
:width="67"
|
||||
>
|
||||
<img
|
||||
class="d-none d-md-block align-self-end"
|
||||
:src="tree3"
|
||||
:height="70"
|
||||
:width="40"
|
||||
>
|
||||
</div>
|
||||
|
||||
<img
|
||||
:src="tree1"
|
||||
class="auth-footer-end-tree d-none d-md-block"
|
||||
:width="97"
|
||||
:height="210"
|
||||
>
|
||||
|
||||
<!-- bg img -->
|
||||
<img
|
||||
class="auth-footer-mask d-none d-md-block"
|
||||
:src="authThemeMask"
|
||||
height="172"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
175
resources/js/pages/pages/authentication/login-v2.vue
Normal file
175
resources/js/pages/pages/authentication/login-v2.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<script setup>
|
||||
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import tree1 from '@images/misc/tree1.png'
|
||||
import authV2LoginIllustrationBorderedDark from '@images/pages/auth-v2-login-illustration-bordered-dark.png'
|
||||
import authV2LoginIllustrationBorderedLight from '@images/pages/auth-v2-login-illustration-bordered-light.png'
|
||||
import authV2LoginIllustrationDark from '@images/pages/auth-v2-login-illustration-dark.png'
|
||||
import authV2LoginIllustrationLight from '@images/pages/auth-v2-login-illustration-light.png'
|
||||
import authV2MaskDark from '@images/pages/mask-v2-dark.png'
|
||||
import authV2MaskLight from '@images/pages/mask-v2-light.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
|
||||
const authThemeImg = useGenerateImageVariant(authV2LoginIllustrationLight, authV2LoginIllustrationDark, authV2LoginIllustrationBorderedLight, authV2LoginIllustrationBorderedDark, true)
|
||||
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const form = ref({
|
||||
email: '',
|
||||
password: '',
|
||||
remember: false,
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink 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>
|
||||
</RouterLink>
|
||||
|
||||
<VRow
|
||||
no-gutters
|
||||
class="auth-wrapper"
|
||||
>
|
||||
<VCol
|
||||
md="8"
|
||||
class="d-none d-md-flex position-relative"
|
||||
>
|
||||
<div
|
||||
class="d-flex align-center justify-end w-100 h-100 pa-10"
|
||||
:class="$vuetify.locale.isRtl ? 'pe-10' : 'pe-0'"
|
||||
>
|
||||
<VImg
|
||||
max-width="797"
|
||||
:src="authThemeImg"
|
||||
class="auth-illustration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="auth-footer-mask"
|
||||
height="360"
|
||||
:src="authThemeMask"
|
||||
>
|
||||
|
||||
<VImg
|
||||
:src="tree1"
|
||||
alt="tree image"
|
||||
height="190"
|
||||
width="90"
|
||||
class="auth-footer-tree"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
class="auth-card-v2 d-flex align-center justify-center"
|
||||
style="background-color: rgb(var(--v-theme-surface));"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
:max-width="500"
|
||||
class="mt-12 mt-sm-0 pa-4"
|
||||
>
|
||||
<VCardText>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Welcome to <span class="text-capitalize">{{ themeConfig.app.title }}!</span> 👋🏻
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Please sign-in to your account and start the adventure
|
||||
</p>
|
||||
</VCardText>
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
autofocus
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center flex-wrap justify-space-between my-5 gap-2">
|
||||
<VCheckbox
|
||||
v-model="form.remember"
|
||||
label="Remember me"
|
||||
/>
|
||||
<RouterLink
|
||||
class="text-primary"
|
||||
:to="{ name: 'pages-authentication-forgot-password-v2' }"
|
||||
>
|
||||
Forgot Password?
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Login
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- create account -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="text-center text-base"
|
||||
>
|
||||
<span>New on our platform?</span> <RouterLink
|
||||
class="text-primary d-inline-block"
|
||||
:to="{ name: 'pages-authentication-register-v2' }"
|
||||
>
|
||||
Create an account
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
class="d-flex align-center"
|
||||
>
|
||||
<VDivider />
|
||||
<span class="mx-2 text-high-emphasis">or</span>
|
||||
<VDivider />
|
||||
</VCol>
|
||||
|
||||
<!-- auth providers -->
|
||||
<VCol
|
||||
cols="12"
|
||||
class="text-center"
|
||||
>
|
||||
<AuthProvider />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
430
resources/js/pages/pages/authentication/register-multi-steps.vue
Normal file
430
resources/js/pages/pages/authentication/register-multi-steps.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<script setup>
|
||||
import registerMultiStepIllustration from '@images/pages/register-multi-step-illustration.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const currentStep = ref(0)
|
||||
const isPasswordVisible = ref(false)
|
||||
const isConfirmPasswordVisible = ref(false)
|
||||
|
||||
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',
|
||||
},
|
||||
{
|
||||
title: 'Personal',
|
||||
subtitle: 'Enter Information',
|
||||
},
|
||||
{
|
||||
title: 'Billing',
|
||||
subtitle: 'Payment Details',
|
||||
},
|
||||
]
|
||||
|
||||
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>
|
||||
<RouterLink 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>
|
||||
</RouterLink>
|
||||
|
||||
<VRow
|
||||
no-gutters
|
||||
class="auth-wrapper"
|
||||
>
|
||||
<VCol
|
||||
md="4"
|
||||
class="d-none d-md-flex"
|
||||
>
|
||||
<!-- here your illustration -->
|
||||
|
||||
<div
|
||||
class="d-flex align-center w-100 h-100 justify-end pa-10"
|
||||
:class="$vuetify.locale.isRtl ? 'pe-10 ps-0' : 'pe-0'"
|
||||
>
|
||||
<VImg
|
||||
max-width="359"
|
||||
:src="registerMultiStepIllustration"
|
||||
class="auth-illustration"
|
||||
/>
|
||||
</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-0"
|
||||
>
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
:items="items"
|
||||
:direction="$vuetify.display.smAndUp ? 'horizontal' : 'vertical'"
|
||||
class="mb-12"
|
||||
/>
|
||||
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
style="max-inline-size: 650px;"
|
||||
>
|
||||
<VForm>
|
||||
<VWindowItem>
|
||||
<h4 class="text-h4">
|
||||
Account Information
|
||||
</h4>
|
||||
<p class="mb-5">
|
||||
Enter Your Account Details
|
||||
</p>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.username"
|
||||
label="Username"
|
||||
placeholder="Johndoe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
label="Email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.confirmPassword"
|
||||
label="Confirm Password"
|
||||
placeholder="············"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isConfirmPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
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 class="mb-5">
|
||||
Enter Your Personal Information
|
||||
</p>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.firstName"
|
||||
label="First Name"
|
||||
placeholder="John"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.lastName"
|
||||
label="Last Name"
|
||||
placeholder="Doe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.mobile"
|
||||
type="number"
|
||||
label="Mobile"
|
||||
placeholder="+1 123 456 7890"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.pincode"
|
||||
type="number"
|
||||
label="Pincode"
|
||||
placeholder="123456"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.address"
|
||||
label="Address"
|
||||
placeholder="1234 Main St, New York, NY 10001, USA"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.landmark"
|
||||
label="Landmark"
|
||||
placeholder="Near Central Park"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.city"
|
||||
label="City"
|
||||
placeholder="New York"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VSelect
|
||||
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="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">
|
||||
<h6 class="text-h6 mb-2">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
<p class="clamp-text text-body-2 mb-2">
|
||||
{{ item.desc }}
|
||||
</p>
|
||||
|
||||
<div class="d-flex align-center justify-center">
|
||||
<div class="text-primary mb-2">
|
||||
$
|
||||
</div>
|
||||
<h4 class="text-h4 text-primary">
|
||||
{{ item.value }}
|
||||
</h4>
|
||||
<div class="text-body-2 text-disabled mt-2">
|
||||
/month
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</CustomRadiosWithIcon>
|
||||
|
||||
<h4 class="text-h4 mt-12">
|
||||
Payment Information
|
||||
</h4>
|
||||
<p class="mb-5">
|
||||
Enter your card information
|
||||
</p>
|
||||
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.cardNumber"
|
||||
type="number"
|
||||
label="Card Number"
|
||||
placeholder="1234 1234 1234 1234"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.cardName"
|
||||
label="Name on Card"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<VTextField
|
||||
v-model="form.expiryDate"
|
||||
label="Expiry"
|
||||
placeholder="MM/YY"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<VTextField
|
||||
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 gap-y-2 mt-5">
|
||||
<VBtn
|
||||
color="secondary"
|
||||
variant="outlined"
|
||||
:disabled="currentStep === 0"
|
||||
@click="currentStep--"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-line"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Previous
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-if="items.length - 1 === currentStep"
|
||||
color="success"
|
||||
append-icon="ri-check-line"
|
||||
@click="onSubmit"
|
||||
>
|
||||
submit
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
@click="currentStep++"
|
||||
>
|
||||
Next
|
||||
|
||||
<VIcon
|
||||
icon="ri-arrow-right-line"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
165
resources/js/pages/pages/authentication/register-v1.vue
Normal file
165
resources/js/pages/pages/authentication/register-v1.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<script setup>
|
||||
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import miscMaskDark from '@images/misc/misc-mask-dark.png'
|
||||
import miscMaskLight from '@images/misc/misc-mask-light.png'
|
||||
import tree1 from '@images/misc/tree1.png'
|
||||
import tree3 from '@images/misc/tree3.png'
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const form = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
privacyPolicies: false,
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<VCard
|
||||
class="auth-card pa-sm-4 pa-md-7 pa-0"
|
||||
style="inline-size: 460px;"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-3 justify-center mb-6">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
|
||||
<h1 class="auth-title">
|
||||
{{ themeConfig.app.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h4 class="text-h4 mb-1">
|
||||
Adventure starts here 🚀
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Make your app management easy and fun!
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- Username -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.username"
|
||||
autofocus
|
||||
label="Username"
|
||||
placeholder="Johndoe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center my-5">
|
||||
<VCheckbox
|
||||
id="privacy-policy"
|
||||
v-model="form.privacyPolicies"
|
||||
inline
|
||||
/>
|
||||
<VLabel
|
||||
for="privacy-policy"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<span class="me-1 text-high-emphasis">I agree to</span>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-primary"
|
||||
>privacy policy & terms</a>
|
||||
</VLabel>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Sign up
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- create account -->
|
||||
<div class="text-center text-base my-5">
|
||||
<span class="d-inline-block">Already have an account?</span> <RouterLink
|
||||
class="text-primary d-inline-block"
|
||||
:to="{ name: 'pages-authentication-login-v2' }"
|
||||
>
|
||||
Sign in instead
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center mb-5">
|
||||
<VDivider />
|
||||
<span class="mx-4 text-high-emphasis">or</span>
|
||||
<VDivider />
|
||||
</div>
|
||||
|
||||
<!-- auth providers -->
|
||||
<div class="text-center">
|
||||
<AuthProvider />
|
||||
</div>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex gap-x-2 auth-footer-start-tree">
|
||||
<img
|
||||
class="d-none d-md-block"
|
||||
:src="tree3"
|
||||
:height="120"
|
||||
:width="67"
|
||||
>
|
||||
<img
|
||||
class="d-none d-md-block align-self-end"
|
||||
:src="tree3"
|
||||
:height="70"
|
||||
:width="40"
|
||||
>
|
||||
</div>
|
||||
|
||||
<img
|
||||
:src="tree1"
|
||||
class="auth-footer-end-tree d-none d-md-block"
|
||||
:width="97"
|
||||
:height="210"
|
||||
>
|
||||
|
||||
<!-- bg img -->
|
||||
<img
|
||||
class="auth-footer-mask d-none d-md-block"
|
||||
:src="authThemeMask"
|
||||
height="172"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
189
resources/js/pages/pages/authentication/register-v2.vue
Normal file
189
resources/js/pages/pages/authentication/register-v2.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<script setup>
|
||||
import AuthProvider from '@/views/pages/authentication/AuthProvider.vue'
|
||||
import authV2RegisterIllustrationDark from '@images/pages/auth-v2-register-illustration-dark.png'
|
||||
import authV2RegisterIllustrationLight from '@images/pages/auth-v2-register-illustration-light.png'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import tree2 from '@images/misc/tree2.png'
|
||||
import authV2RegisterIllustrationBorderedDark from '@images/pages/auth-v2-register-illustration-bordered-dark.png'
|
||||
import authV2RegisterIllustrationBorderedLight from '@images/pages/auth-v2-register-illustration-bordered-light.png'
|
||||
import authV2MaskDark from '@images/pages/mask-v2-dark.png'
|
||||
import authV2MaskLight from '@images/pages/mask-v2-light.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
|
||||
const authThemeImg = useGenerateImageVariant(authV2RegisterIllustrationLight, authV2RegisterIllustrationDark, authV2RegisterIllustrationBorderedLight, authV2RegisterIllustrationBorderedDark, true)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const form = ref({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
privacyPolicies: false,
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink 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>
|
||||
</RouterLink>
|
||||
|
||||
<VRow
|
||||
no-gutters
|
||||
class="auth-wrapper"
|
||||
>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
class="d-none d-md-flex position-relative"
|
||||
>
|
||||
<div
|
||||
class="d-flex align-center justify-end w-100 h-100 pa-10"
|
||||
:class="$vuetify.locale.isRtl ? 'pe-10' : 'pe-0'"
|
||||
>
|
||||
<VImg
|
||||
max-width="797"
|
||||
:src="authThemeImg"
|
||||
class="auth-illustration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="auth-footer-mask"
|
||||
height="360"
|
||||
:src="authThemeMask"
|
||||
>
|
||||
|
||||
<div class="d-flex gap-x-2 auth-footer-tree">
|
||||
<img
|
||||
:src="tree2"
|
||||
alt="tree image"
|
||||
height="180"
|
||||
>
|
||||
<img
|
||||
:src="tree2"
|
||||
alt="tree image"
|
||||
height="120"
|
||||
class="align-self-end"
|
||||
>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
class="auth-card-v2 d-flex align-center justify-center"
|
||||
style="background-color: rgb(var(--v-theme-surface));"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
:max-width="500"
|
||||
class="mt-12 mt-sm-0 pa-4"
|
||||
>
|
||||
<VCardText>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Adventure starts here 🚀
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Make your app management easy and fun!
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- Username -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.username"
|
||||
autofocus
|
||||
label="Username"
|
||||
placeholder="Johndoe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
|
||||
<div class="d-flex align-center my-5">
|
||||
<VCheckbox
|
||||
id="privacy-policy"
|
||||
v-model="form.privacyPolicies"
|
||||
inline
|
||||
/>
|
||||
<VLabel
|
||||
for="privacy-policy"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<span class="me-1 text-high-emphasis">I agree to</span>
|
||||
<a
|
||||
href="javascript:void(0)"
|
||||
class="text-primary"
|
||||
>privacy policy & terms</a>
|
||||
</VLabel>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Sign up
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- create account -->
|
||||
<div class="text-center text-base my-5">
|
||||
<span class="d-inline-block">Already have an account?</span> <RouterLink
|
||||
class="text-primary d-inline-block"
|
||||
:to="{ name: 'pages-authentication-login-v2' }"
|
||||
>
|
||||
Sign in instead
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<div class="d-flex align-center mb-5">
|
||||
<VDivider />
|
||||
<span class="mx-4 text-high-emphasis">or</span>
|
||||
<VDivider />
|
||||
</div>
|
||||
|
||||
<!-- auth providers -->
|
||||
<div class="text-center">
|
||||
<AuthProvider />
|
||||
</div>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
134
resources/js/pages/pages/authentication/reset-password-v1.vue
Normal file
134
resources/js/pages/pages/authentication/reset-password-v1.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<script setup>
|
||||
import miscMaskDark from '@images/misc/misc-mask-dark.png'
|
||||
import miscMaskLight from '@images/misc/misc-mask-light.png'
|
||||
import tree1 from '@images/misc/tree1.png'
|
||||
import tree3 from '@images/misc/tree3.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const form = ref({
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
const isConfirmPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<VCard
|
||||
class="auth-card pa-sm-4 pa-md-7 pa-0"
|
||||
max-width="460"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-3 justify-center mb-6">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
|
||||
<h1 class="auth-title">
|
||||
{{ themeConfig.app.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h4 class="text-h4 mb-1">
|
||||
Reset Password 🔒
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Enter your email and we'll send you instructions to reset your password
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.newPassword"
|
||||
autofocus
|
||||
label="New Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.confirmPassword"
|
||||
label="Confirm Password"
|
||||
placeholder="············"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isConfirmPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- reset password -->
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Set New Password
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- back to login -->
|
||||
<VCol>
|
||||
<div class="d-flex align-center justify-center">
|
||||
<RouterLink :to="{ name: 'pages-authentication-login-v1' }">
|
||||
<VIcon
|
||||
icon="ri-arrow-left-s-line"
|
||||
size="20"
|
||||
class="flip-in-rtl me-2"
|
||||
/>
|
||||
<span>Back to login</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex gap-x-2 auth-footer-start-tree">
|
||||
<img
|
||||
class="d-none d-md-block"
|
||||
:src="tree3"
|
||||
:height="120"
|
||||
:width="67"
|
||||
>
|
||||
<img
|
||||
class="d-none d-md-block align-self-end"
|
||||
:src="tree3"
|
||||
:height="70"
|
||||
:width="40"
|
||||
>
|
||||
</div>
|
||||
|
||||
<img
|
||||
:src="tree1"
|
||||
class="auth-footer-end-tree d-none d-md-block"
|
||||
:width="97"
|
||||
:height="210"
|
||||
>
|
||||
|
||||
<!-- bg img -->
|
||||
<img
|
||||
class="auth-footer-mask d-none d-md-block"
|
||||
:src="authThemeMask"
|
||||
height="172"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
158
resources/js/pages/pages/authentication/reset-password-v2.vue
Normal file
158
resources/js/pages/pages/authentication/reset-password-v2.vue
Normal file
@@ -0,0 +1,158 @@
|
||||
<script setup>
|
||||
import tree3 from '@images/misc/tree3.png'
|
||||
import authV2ResetPasswordIllustrationBorderedDark from '@images/pages/auth-v2-reset-password-illustration-bordered-dark.png'
|
||||
import authV2ResetPasswordIllustrationBorderedLight from '@images/pages/auth-v2-reset-password-illustration-bordered-light.png'
|
||||
import authV2ResetPasswordIllustrationDark from '@images/pages/auth-v2-reset-password-illustration-dark.png'
|
||||
import authV2ResetPasswordIllustrationLight from '@images/pages/auth-v2-reset-password-illustration-light.png'
|
||||
import authV2MaskDark from '@images/pages/mask-v2-dark.png'
|
||||
import authV2MaskLight from '@images/pages/mask-v2-light.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const authThemeImg = useGenerateImageVariant(authV2ResetPasswordIllustrationLight, authV2ResetPasswordIllustrationDark, authV2ResetPasswordIllustrationBorderedLight, authV2ResetPasswordIllustrationBorderedDark, true)
|
||||
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const form = ref({
|
||||
newPassword: '',
|
||||
confirmPassword: '',
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
const isConfirmPasswordVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink 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>
|
||||
</RouterLink>
|
||||
|
||||
<VRow
|
||||
no-gutters
|
||||
class="auth-wrapper"
|
||||
>
|
||||
<VCol
|
||||
md="8"
|
||||
class="d-none d-md-flex position-relative"
|
||||
>
|
||||
<div
|
||||
class="d-flex align-center justify-end w-100 h-100 pa-10"
|
||||
:class="$vuetify.locale.isRtl ? 'pe-10' : 'pe-0'"
|
||||
>
|
||||
<VImg
|
||||
max-width="857"
|
||||
:src="authThemeImg"
|
||||
class="auth-illustration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="auth-footer-mask"
|
||||
height="360"
|
||||
:src="authThemeMask"
|
||||
>
|
||||
|
||||
<div class="d-flex gap-x-2 auth-footer-tree">
|
||||
<img
|
||||
:src="tree3"
|
||||
alt="tree image"
|
||||
height="140"
|
||||
>
|
||||
<img
|
||||
:src="tree3"
|
||||
alt="tree image"
|
||||
height="90"
|
||||
width="50"
|
||||
class="align-self-end"
|
||||
>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
class="auth-card-v2 d-flex align-center justify-center"
|
||||
style="background-color: rgb(var(--v-theme-surface));"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
:max-width="500"
|
||||
class="mt-12 mt-sm-0 pa-4"
|
||||
>
|
||||
<VCardText>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Reset Password 🔒
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Enter your email and we'll send you instructions to reset your password
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.newPassword"
|
||||
autofocus
|
||||
label="New Password"
|
||||
placeholder="············"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.confirmPassword"
|
||||
label="Confirm Password"
|
||||
placeholder="············"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isConfirmPasswordVisible ? 'ri-eye-off-line' : 'ri-eye-line'"
|
||||
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- Set password -->
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Set New Password
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- back to login -->
|
||||
<VCol cols="12">
|
||||
<RouterLink
|
||||
class="d-flex align-center justify-center"
|
||||
:to="{ name: 'pages-authentication-login-v2' }"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-arrow-left-s-line"
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
<span>Back to login</span>
|
||||
</RouterLink>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
125
resources/js/pages/pages/authentication/two-steps-v1.vue
Normal file
125
resources/js/pages/pages/authentication/two-steps-v1.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
import miscMaskDark from '@images/misc/misc-mask-dark.png'
|
||||
import miscMaskLight from '@images/misc/misc-mask-light.png'
|
||||
import tree1 from '@images/misc/tree1.png'
|
||||
import tree3 from '@images/misc/tree3.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const router = useRouter()
|
||||
const otp = ref('')
|
||||
const isOtpInserted = ref(false)
|
||||
|
||||
const onFinish = () => {
|
||||
isOtpInserted.value = true
|
||||
setTimeout(() => {
|
||||
isOtpInserted.value = false
|
||||
router.push('/')
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<VCard
|
||||
class="auth-card pa-sm-4 pa-md-7 pa-0"
|
||||
max-width="460"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-3 justify-center mb-6">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
|
||||
<h1 class="auth-title">
|
||||
{{ themeConfig.app.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h4 class="text-h4 mb-1">
|
||||
Two Step Verification 💬
|
||||
</h4>
|
||||
<p class="mb-1">
|
||||
We sent a verification code to your mobile. Enter the code from the mobile in the field below.
|
||||
</p>
|
||||
<h6 class="text-h6">
|
||||
******1234
|
||||
</h6>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<div>Type your 6 digit security code</div>
|
||||
<VOtpInput
|
||||
v-model="otp"
|
||||
:disabled="isOtpInserted"
|
||||
type="number"
|
||||
class="pa-0"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- reset password -->
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
block
|
||||
:loading="isOtpInserted"
|
||||
:disabled="isOtpInserted"
|
||||
type="submit"
|
||||
>
|
||||
Verify my account
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- back to login -->
|
||||
<VCol cols="12">
|
||||
<div class="d-flex justify-center align-center flex-wrap">
|
||||
<span class="me-1">Didn't get the code?</span>
|
||||
<a href="#">Resend</a>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex gap-x-2 auth-footer-start-tree">
|
||||
<img
|
||||
class="d-none d-md-block"
|
||||
:src="tree3"
|
||||
:height="120"
|
||||
:width="67"
|
||||
>
|
||||
<img
|
||||
class="d-none d-md-block align-self-end"
|
||||
:src="tree3"
|
||||
:height="70"
|
||||
:width="40"
|
||||
>
|
||||
</div>
|
||||
|
||||
<img
|
||||
:src="tree1"
|
||||
class="auth-footer-end-tree d-none d-md-block"
|
||||
:width="97"
|
||||
:height="210"
|
||||
>
|
||||
|
||||
<!-- bg img -->
|
||||
<img
|
||||
class="auth-footer-mask d-none d-md-block"
|
||||
:src="authThemeMask"
|
||||
height="172"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
154
resources/js/pages/pages/authentication/two-steps-v2.vue
Normal file
154
resources/js/pages/pages/authentication/two-steps-v2.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<script setup>
|
||||
import tree2 from '@images/misc/tree2.png'
|
||||
import authV2MaskDark from '@images/pages/mask-v2-dark.png'
|
||||
import authV2MaskLight from '@images/pages/mask-v2-light.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import authV2TwoStepsIllustrationBorderedDark from '@images/pages/auth-v2-two-steps-illustration-border-dark.png'
|
||||
import authV2TwoStepsIllustrationBorderedLight from '@images/pages/auth-v2-two-steps-illustration-border-light.png'
|
||||
import authV2TwoStepsIllustrationDark from '@images/pages/auth-v2-two-steps-illustration-dark.png'
|
||||
import authV2TwoStepsIllustrationLight from '@images/pages/auth-v2-two-steps-illustration-light.png'
|
||||
|
||||
const authThemeImg = useGenerateImageVariant(authV2TwoStepsIllustrationLight, authV2TwoStepsIllustrationDark, authV2TwoStepsIllustrationBorderedLight, authV2TwoStepsIllustrationBorderedDark, true)
|
||||
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const router = useRouter()
|
||||
const otp = ref('')
|
||||
const isOtpInserted = ref(false)
|
||||
|
||||
const onFinish = () => {
|
||||
isOtpInserted.value = true
|
||||
setTimeout(() => {
|
||||
isOtpInserted.value = false
|
||||
router.push('/')
|
||||
}, 2000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink 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>
|
||||
</RouterLink>
|
||||
|
||||
<div>
|
||||
<VRow
|
||||
class="auth-wrapper"
|
||||
no-gutters
|
||||
>
|
||||
<VCol
|
||||
md="8"
|
||||
class="d-none d-md-flex position-relative"
|
||||
>
|
||||
<!-- Here your illustrator -->
|
||||
<div class="d-flex align-center justify-end w-100 h-100 pa-10 pe-0">
|
||||
<VImg
|
||||
max-width="753"
|
||||
:src="authThemeImg"
|
||||
class="auth-illustration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="auth-footer-mask"
|
||||
height="360"
|
||||
:src="authThemeMask"
|
||||
>
|
||||
<div class="d-flex gap-x-2 auth-footer-tree">
|
||||
<img
|
||||
:src="tree2"
|
||||
alt="tree image"
|
||||
height="180"
|
||||
width="48"
|
||||
>
|
||||
<img
|
||||
:src="tree2"
|
||||
alt="tree image"
|
||||
height="120"
|
||||
width="32"
|
||||
class="align-self-end"
|
||||
>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
class="auth-card-v2 d-flex align-center justify-center"
|
||||
style="background-color: rgb(var(--v-theme-surface));"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
:max-width="500"
|
||||
class="mt-12 mt-sm-0 pa-4"
|
||||
>
|
||||
<VCardText>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Two Step Verification 💬
|
||||
</h4>
|
||||
<p class="mb-1">
|
||||
We sent a verification code to your mobile. Enter the code from the mobile in the field below.
|
||||
</p>
|
||||
<h6 class="text-h6">
|
||||
******1234
|
||||
</h6>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<!-- email -->
|
||||
<VCol cols="12">
|
||||
<div>Type your 6 digit security code</div>
|
||||
<VOtpInput
|
||||
v-model="otp"
|
||||
:disabled="isOtpInserted"
|
||||
type="number"
|
||||
class="pa-0"
|
||||
@finish="onFinish"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<!-- reset password -->
|
||||
|
||||
<VCol cols="12">
|
||||
<VBtn
|
||||
block
|
||||
:loading="isOtpInserted"
|
||||
:disabled="isOtpInserted"
|
||||
type="submit"
|
||||
>
|
||||
Verify my account
|
||||
</VBtn>
|
||||
</VCol>
|
||||
|
||||
<!-- back to login -->
|
||||
<VCol cols="12">
|
||||
<div class="d-flex justify-center align-center flex-wrap">
|
||||
<span class="me-1">Didn't get the code?</span>
|
||||
<a href="#">Resend</a>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
|
||||
// .auth-illustration{
|
||||
// inset-block-end: 11.5rem;
|
||||
// inset-inline-end: 1.25rem;
|
||||
// }
|
||||
</style>
|
||||
82
resources/js/pages/pages/authentication/verify-email-v1.vue
Normal file
82
resources/js/pages/pages/authentication/verify-email-v1.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<script setup>
|
||||
import miscMaskDark from '@images/misc/misc-mask-dark.png'
|
||||
import miscMaskLight from '@images/misc/misc-mask-light.png'
|
||||
import tree1 from '@images/misc/tree1.png'
|
||||
import tree3 from '@images/misc/tree3.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<VCard
|
||||
class="auth-card pa-sm-4 pa-md-7 pa-0"
|
||||
max-width="460"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="d-flex align-center gap-x-3 justify-center mb-6">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
|
||||
<h1 class="auth-title">
|
||||
{{ themeConfig.app.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<h4 class="text-h4 mb-1">
|
||||
Verify your email ✉️
|
||||
</h4>
|
||||
<p class="mb-5">
|
||||
Account activation link sent to your email address: hello@example.com Please follow the link inside to continue.
|
||||
</p>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
to="/"
|
||||
class="mb-5"
|
||||
>
|
||||
Skip for now
|
||||
</VBtn>
|
||||
|
||||
<div class="d-flex align-center justify-center">
|
||||
<span class="me-1">Didn't get the mail? </span><a href="#">Resend</a>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<div class="d-flex gap-x-2 auth-footer-start-tree">
|
||||
<img
|
||||
class="d-none d-md-block"
|
||||
:src="tree3"
|
||||
:height="120"
|
||||
:width="67"
|
||||
>
|
||||
<img
|
||||
class="d-none d-md-block align-self-end"
|
||||
:src="tree3"
|
||||
:height="70"
|
||||
:width="40"
|
||||
>
|
||||
</div>
|
||||
|
||||
<img
|
||||
:src="tree1"
|
||||
class="auth-footer-end-tree d-none d-md-block"
|
||||
:width="97"
|
||||
:height="210"
|
||||
>
|
||||
|
||||
<!-- bg img -->
|
||||
<img
|
||||
class="auth-footer-mask d-none d-md-block"
|
||||
:src="authThemeMask"
|
||||
height="172"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
109
resources/js/pages/pages/authentication/verify-email-v2.vue
Normal file
109
resources/js/pages/pages/authentication/verify-email-v2.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<script setup>
|
||||
import tree2 from '@images/misc/tree2.png'
|
||||
import authV2MaskDark from '@images/pages/mask-v2-dark.png'
|
||||
import authV2MaskLight from '@images/pages/mask-v2-light.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import authV2VerifyEmailIllustrationBorderedDark from '@images/pages/auth-v2-verify-email-illustration-border-dark.png'
|
||||
import authV2VerifyEmailIllustrationBorderedLight from '@images/pages/auth-v2-verify-email-illustration-border-light.png'
|
||||
import authV2VerifyEmailIllustrationDark from '@images/pages/auth-v2-verify-email-illustration-dark.png'
|
||||
import authV2VerifyEmailIllustrationLight from '@images/pages/auth-v2-verify-email-illustration-light.png'
|
||||
|
||||
const authThemeImg = useGenerateImageVariant(authV2VerifyEmailIllustrationLight, authV2VerifyEmailIllustrationDark, authV2VerifyEmailIllustrationBorderedLight, authV2VerifyEmailIllustrationBorderedDark, true)
|
||||
const authThemeMask = useGenerateImageVariant(authV2MaskLight, authV2MaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink 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>
|
||||
</RouterLink>
|
||||
|
||||
<VRow
|
||||
class="auth-wrapper"
|
||||
no-gutters
|
||||
>
|
||||
<VCol
|
||||
md="8"
|
||||
class="d-none d-md-flex position-relative"
|
||||
>
|
||||
<!-- here your illustration -->
|
||||
<div
|
||||
class="d-flex align-center justify-end w-100 h-100 pa-10 "
|
||||
:class="$vuetify.locale.isRtl ? 'pe-10' : 'pe-0'"
|
||||
>
|
||||
<VImg
|
||||
max-width="808"
|
||||
:src="authThemeImg"
|
||||
class="auth-illustration"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="auth-footer-mask"
|
||||
height="360"
|
||||
:src="authThemeMask"
|
||||
>
|
||||
<div class="d-flex gap-x-2 auth-footer-tree">
|
||||
<img
|
||||
:src="tree2"
|
||||
alt="tree image"
|
||||
height="180"
|
||||
width="48"
|
||||
>
|
||||
<img
|
||||
:src="tree2"
|
||||
alt="tree image"
|
||||
height="120"
|
||||
width="32"
|
||||
class="align-self-end"
|
||||
>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
class="auth-card-v2 d-flex align-center justify-center"
|
||||
style="background-color: rgb(var(--v-theme-surface));"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
:max-width="500"
|
||||
class="mt-12 mt-sm-0 pa-4"
|
||||
>
|
||||
<VCardText>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Verify your email ✉️
|
||||
</h4>
|
||||
|
||||
<p class="mb-5">
|
||||
Account activation link sent to your email address: hello@example.com Please follow the link inside to continue.
|
||||
</p>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
to="/"
|
||||
class="mb-5"
|
||||
>
|
||||
Skip for now
|
||||
</VBtn>
|
||||
|
||||
<div class="d-flex align-center justify-center">
|
||||
<span class="me-1">Didn't get the mail? </span><a href="#">Resend</a>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
179
resources/js/pages/pages/cards/card-actions.vue
Normal file
179
resources/js/pages/pages/cards/card-actions.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<script setup>
|
||||
const tableData = [
|
||||
{
|
||||
action: 'Collapse',
|
||||
icon: 'ri-arrow-up-s-line',
|
||||
details: 'Collapse card content using collapse action.',
|
||||
},
|
||||
{
|
||||
action: 'Refresh Content',
|
||||
icon: 'ri-refresh-line',
|
||||
details: 'Refresh your card content using refresh action.',
|
||||
},
|
||||
{
|
||||
action: 'Remove Card',
|
||||
icon: 'ri-close-line',
|
||||
details: 'Remove card from page using remove card action',
|
||||
},
|
||||
]
|
||||
|
||||
const isLoading = ref(true)
|
||||
|
||||
setTimeout(() => {
|
||||
isLoading.value = false
|
||||
}, 3000)
|
||||
|
||||
const refetchData = hideOverlay => {
|
||||
setTimeout(hideOverlay, 3000)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<!-- 👉 Main Card -->
|
||||
<AppCardActions
|
||||
title="Cards Actions"
|
||||
@refresh="refetchData"
|
||||
>
|
||||
<VCardText>
|
||||
<VTable>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">
|
||||
ACTION
|
||||
</th>
|
||||
<th scope="col">
|
||||
ICON
|
||||
</th>
|
||||
<th scope="col">
|
||||
DETAILS
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="data in tableData"
|
||||
:key="data.icon"
|
||||
>
|
||||
<td>
|
||||
{{ data.action }}
|
||||
</td>
|
||||
<td>
|
||||
<VIcon
|
||||
size="20"
|
||||
:icon="data.icon"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
{{ data.details }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</VTable>
|
||||
</VCardText>
|
||||
</AppCardActions>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Initial Load -->
|
||||
<AppCardActions
|
||||
v-model:loading="isLoading"
|
||||
title="Initial Load"
|
||||
no-actions
|
||||
>
|
||||
<VCardText>
|
||||
<p>You can specifically add Initial Load action using <code>loading</code> prop</p>
|
||||
<span>Refresh the page to see it again in action.</span>
|
||||
</VCardText>
|
||||
</AppCardActions>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Collapsible -->
|
||||
<AppCardActions
|
||||
action-collapsed
|
||||
title="Collapsible"
|
||||
>
|
||||
<VCardText>
|
||||
<p>You can specifically add collapsible action using <code>actionCollapse</code> prop</p>
|
||||
<span>Click on <VIcon
|
||||
size="20"
|
||||
icon="ri-arrow-up-s-line"
|
||||
/> icon to see it in action</span>
|
||||
</VCardText>
|
||||
</AppCardActions>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Refresh Content -->
|
||||
<AppCardActions
|
||||
title="Refresh Content"
|
||||
action-refresh
|
||||
@refresh="refetchData"
|
||||
>
|
||||
<VCardText>
|
||||
<p>You can specifically add refresh action using <code>actionRefresh</code> prop</p>
|
||||
<span>Click on <VIcon
|
||||
size="20"
|
||||
icon="ri-refresh-line"
|
||||
/> icon to see it in action</span>
|
||||
</VCardText>
|
||||
</AppCardActions>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Remove Card -->
|
||||
<AppCardActions
|
||||
title="Remove Card"
|
||||
action-remove
|
||||
>
|
||||
<VCardText>
|
||||
<p>You can specifically add remove action using <code>actionRemove</code> prop</p>
|
||||
<span>Click on <VIcon
|
||||
size="20"
|
||||
icon="ri-close-line"
|
||||
/> icon to see it in action</span>
|
||||
</VCardText>
|
||||
</AppCardActions>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<!-- 👉 Slots -->
|
||||
<AppCardActions
|
||||
title="Slots"
|
||||
@refresh="refetchData"
|
||||
>
|
||||
<template #before-actions>
|
||||
<VChip
|
||||
class="me-3"
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
3 Updates
|
||||
</VChip>
|
||||
</template>
|
||||
|
||||
<VCardText>
|
||||
<p><code>app-card-actions</code> also provides <code>before-actions</code> and <code>after-actions</code> slot</p>
|
||||
<span>You can find more details in our documentation</span>
|
||||
</VCardText>
|
||||
</AppCardActions>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
175
resources/js/pages/pages/cards/card-advance.vue
Normal file
175
resources/js/pages/pages/cards/card-advance.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<script setup>
|
||||
import CardAdvanceActivityTimeline from '@/views/pages/cards/card-advance/CardActivityTimeline.vue'
|
||||
import CardAdvanceAnalytics from '@/views/pages/cards/card-advance/CardAdvanceAnalytics.vue'
|
||||
import CardAdvanceCafeBadilico from '@/views/pages/cards/card-advance/CardAdvanceCafeBadilico.vue'
|
||||
import CardAdvanceDepositWithdraw from '@/views/pages/cards/card-advance/CardAdvanceDepositWithdraw.vue'
|
||||
import CardAdvanceDeveloperMeetup from '@/views/pages/cards/card-advance/CardAdvanceDeveloperMeetup.vue'
|
||||
import CardAdvanceFinanceSummary from '@/views/pages/cards/card-advance/CardAdvanceFinanceSummary.vue'
|
||||
import CardAdvanceMeetingSchedule from '@/views/pages/cards/card-advance/CardAdvanceMeetingSchedule.vue'
|
||||
import CardAdvanceSalesByCountries from '@/views/pages/cards/card-advance/CardAdvanceSalesByCountries.vue'
|
||||
import CardAdvanceTeamMembers from '@/views/pages/cards/card-advance/CardAdvanceTeamMembers.vue'
|
||||
import CardAdvanceTotalEarning from '@/views/pages/cards/card-advance/CardAdvanceTotalEarning.vue'
|
||||
import CardAdvanceTransactions from '@/views/pages/cards/card-advance/CardAdvanceTransactions.vue'
|
||||
import CardAdvanceUpgradeYourPlan from '@/views/pages/cards/card-advance/CardAdvanceUpgradeYourPlan.vue'
|
||||
import CardAdvanceWebsiteStatistics from '@/views/pages/cards/card-advance/CardAdvanceWebsiteStatistics.vue'
|
||||
import CardAdvancedAssignmentProgress from '@/views/pages/cards/card-advance/CardAdvancedAssignmentProgress.vue'
|
||||
import CardAdvancedDeliveryPerformance from '@/views/pages/cards/card-advance/CardAdvancedDeliveryPerformance.vue'
|
||||
import CardAdvancedOrderByCountries from '@/views/pages/cards/card-advance/CardAdvancedOrderByCountries.vue'
|
||||
import CardAdvancedPopularInstructors from '@/views/pages/cards/card-advance/CardAdvancedPopularInstructors.vue'
|
||||
import CardAdvancedTopCourses from '@/views/pages/cards/card-advance/CardAdvancedTopCourses.vue'
|
||||
import CardAdvancedUpcomingWebinar from '@/views/pages/cards/card-advance/CardAdvancedUpcomingWebinar.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvanceTransactions />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvanceUpgradeYourPlan />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvanceMeetingSchedule />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvancedTopCourses />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvancedUpcomingWebinar />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvancedAssignmentProgress />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvancedPopularInstructors />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvancedOrderByCountries />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvancedDeliveryPerformance />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="5"
|
||||
>
|
||||
<CardAdvanceTeamMembers />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="7"
|
||||
>
|
||||
<CardAdvanceDepositWithdraw />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvanceTotalEarning />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="5"
|
||||
>
|
||||
<CardAdvanceFinanceSummary />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="3"
|
||||
>
|
||||
<CardAdvanceAnalytics />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvanceWebsiteStatistics />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvanceDeveloperMeetup />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<CardAdvanceSalesByCountries />
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<CardAdvanceActivityTimeline />
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<CardAdvanceCafeBadilico />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
27
resources/js/pages/pages/cards/card-basic.vue
Normal file
27
resources/js/pages/pages/cards/card-basic.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import CardBasic from '@/views/pages/cards/card-basic/CardBasic.vue'
|
||||
import CardNavigation from '@/views/pages/cards/card-basic/CardNavigation.vue'
|
||||
import CardSolid from '@/views/pages/cards/card-basic/CardSolid.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p class="text-2xl mb-6">
|
||||
Basic Cards
|
||||
</p>
|
||||
|
||||
<CardBasic />
|
||||
|
||||
<p class="text-2xl mb-6 mt-14">
|
||||
Navigation Cards
|
||||
</p>
|
||||
|
||||
<CardNavigation />
|
||||
|
||||
<p class="text-2xl mt-14 mb-6 ">
|
||||
Solid Cards
|
||||
</p>
|
||||
|
||||
<CardSolid />
|
||||
</div>
|
||||
</template>
|
||||
40
resources/js/pages/pages/cards/card-gamification.vue
Normal file
40
resources/js/pages/pages/cards/card-gamification.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import CardAward from '@/views/pages/cards/gamification/CardAward.vue'
|
||||
import CardCongratulations from '@/views/pages/cards/gamification/CardCongratulations.vue'
|
||||
import CardUpgrade from '@/views/pages/cards/gamification/CardUpgrade.vue'
|
||||
import CardWelcome from '@/views/pages/cards/gamification/CardWelcome.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<CardAward />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
class="align-self-end mt-sm-10 mt-md-0"
|
||||
>
|
||||
<CardCongratulations />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
class="align-self-end mt-sm-10 mt-md-0"
|
||||
>
|
||||
<CardWelcome />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<CardUpgrade />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
302
resources/js/pages/pages/cards/card-statistics.vue
Normal file
302
resources/js/pages/pages/cards/card-statistics.vue
Normal file
@@ -0,0 +1,302 @@
|
||||
<script setup>
|
||||
import CardStatisticsLogistics from '@/views/pages/cards/card-statistics/CardStatisticsLogistics.vue'
|
||||
import CardStatisticsSessionsBarCharts from '@/views/pages/cards/card-statistics/CardStatisticsSessionsBarCharts.vue'
|
||||
import CardStatisticsSessionsBarWithGapCharts from '@/views/pages/cards/card-statistics/CardStatisticsSessionsBarWithGapCharts.vue'
|
||||
import CardStatisticsTotalGrowthAreaCharts from '@/views/pages/cards/card-statistics/CardStatisticsTotalGrowthAreaCharts.vue'
|
||||
import CardStatisticsTotalProfitLineCharts from '@/views/pages/cards/card-statistics/CardStatisticsTotalProfitLineCharts.vue'
|
||||
import CardStatisticsTotalRevenueLineCharts from '@/views/pages/cards/card-statistics/CardStatisticsTotalRevenueLineCharts.vue'
|
||||
import CardStatisticsTotalRevenueRadialBarCharts from '@/views/pages/cards/card-statistics/CardStatisticsTotalRevenueRadialBarCharts.vue'
|
||||
import CardStatisticsTotalSalesCharts from '@/views/pages/cards/card-statistics/CardStatisticsTotalSalesCharts.vue'
|
||||
import CardStatisticsTransactions from '@/views/pages/cards/card-statistics/CardStatisticsTransactions.vue'
|
||||
import illustration1 from '@images/cards/illustration-1.png'
|
||||
import illustration2 from '@images/cards/illustration-2.png'
|
||||
import illustration3 from '@images/cards/illustration-3.png'
|
||||
import illustration4 from '@images/cards/illustration-4.png'
|
||||
|
||||
const statisticsHorizontal = [
|
||||
{
|
||||
title: 'New Customers',
|
||||
color: 'primary',
|
||||
icon: 'ri-group-line',
|
||||
stats: 2856,
|
||||
change: -11.9,
|
||||
},
|
||||
{
|
||||
title: 'Total Revenue',
|
||||
color: 'success',
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
stats: 28600,
|
||||
change: 25.8,
|
||||
},
|
||||
{
|
||||
title: 'New Transactions',
|
||||
color: 'info',
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
stats: 13600,
|
||||
change: -42.4,
|
||||
},
|
||||
{
|
||||
title: 'Total Profit',
|
||||
color: 'warning',
|
||||
icon: 'ri-bar-chart-line',
|
||||
stats: 2856,
|
||||
change: 18.2,
|
||||
},
|
||||
]
|
||||
|
||||
const statisticsWithIcon = [
|
||||
{
|
||||
title: 'Session',
|
||||
value: '21,459',
|
||||
change: 29,
|
||||
desc: 'Total Users',
|
||||
icon: 'ri-group-line',
|
||||
iconColor: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Paid Users',
|
||||
value: '4,567',
|
||||
change: 18,
|
||||
desc: 'Last Week Analytics',
|
||||
icon: 'ri-user-add-line',
|
||||
iconColor: 'error',
|
||||
},
|
||||
{
|
||||
title: 'Active Users',
|
||||
value: '19,860',
|
||||
change: -14,
|
||||
desc: 'Last Week Analytics',
|
||||
icon: 'ri-user-follow-line',
|
||||
iconColor: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Pending Users',
|
||||
value: '237',
|
||||
change: 42,
|
||||
desc: 'Last Week Analytics',
|
||||
icon: 'ri-user-search-line',
|
||||
iconColor: 'warning',
|
||||
},
|
||||
]
|
||||
|
||||
const statisticsVertical = [
|
||||
{
|
||||
title: 'New Project',
|
||||
color: 'primary',
|
||||
icon: 'ri-file-word-2-line',
|
||||
stats: '862',
|
||||
change: -18,
|
||||
subtitle: 'Yearly Project',
|
||||
},
|
||||
{
|
||||
title: 'Total Profit',
|
||||
color: 'secondary',
|
||||
icon: 'ri-pie-chart-2-line',
|
||||
stats: '$25.6k',
|
||||
change: 42,
|
||||
subtitle: 'Weekly Project',
|
||||
},
|
||||
{
|
||||
title: 'Revenue',
|
||||
color: 'success',
|
||||
icon: 'ri-money-dollar-circle-line',
|
||||
stats: '$95.2k',
|
||||
change: 12,
|
||||
subtitle: 'Revenue Increase',
|
||||
},
|
||||
{
|
||||
title: 'Logistics',
|
||||
color: 'error',
|
||||
icon: 'ri-car-line',
|
||||
stats: '44.10k',
|
||||
change: 12,
|
||||
subtitle: 'Revenue Increase',
|
||||
},
|
||||
{
|
||||
title: 'Reports',
|
||||
color: 'warning',
|
||||
icon: 'ri-file-chart-line',
|
||||
stats: '268',
|
||||
change: -8,
|
||||
subtitle: 'System Bugs',
|
||||
},
|
||||
{
|
||||
title: 'Transactions',
|
||||
color: 'info',
|
||||
icon: 'ri-bank-card-line',
|
||||
stats: '12k',
|
||||
change: 32,
|
||||
subtitle: 'Daily Transactions',
|
||||
},
|
||||
]
|
||||
|
||||
const statisticsWithImages = [
|
||||
{
|
||||
title: 'Ratings',
|
||||
subtitle: 'Year of 2021',
|
||||
stats: '13k',
|
||||
change: 38,
|
||||
image: illustration1,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Sessions',
|
||||
subtitle: 'Last Week',
|
||||
stats: '24.5k',
|
||||
change: -22,
|
||||
image: illustration2,
|
||||
color: 'secondary',
|
||||
},
|
||||
{
|
||||
title: 'Customers',
|
||||
subtitle: 'Daily Customers',
|
||||
stats: '2,856',
|
||||
change: 59,
|
||||
image: illustration3,
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
title: 'Total Orders',
|
||||
subtitle: 'Last Month',
|
||||
stats: '42.5k',
|
||||
change: 26,
|
||||
image: illustration4,
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow class="match-height">
|
||||
<!-- 👉 Horizontal Cards -->
|
||||
<VCol
|
||||
v-for="statistics in statisticsHorizontal"
|
||||
:key="statistics.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<CardStatisticsHorizontal v-bind="statistics" />
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<CardStatisticsLogistics />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
v-for="statistics in statisticsWithIcon"
|
||||
:key="statistics.title"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<CardStatisticsWithIcon v-bind="statistics" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Transition Card -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<CardStatisticsTransactions />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Total sales -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<CardStatisticsTotalSalesCharts />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Vertical Cards -->
|
||||
<VCol
|
||||
v-for="statistics in statisticsVertical"
|
||||
:key="statistics.title"
|
||||
cols="12"
|
||||
sm="4"
|
||||
lg="2"
|
||||
>
|
||||
<CardStatisticsVertical v-bind="statistics" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Blank Column for make space above the Images cards -->
|
||||
|
||||
<!-- 👉 Images Cards -->
|
||||
<VCol
|
||||
v-for="statistics in statisticsWithImages"
|
||||
:key="statistics.title"
|
||||
class="pt-8"
|
||||
cols="12"
|
||||
lg="3"
|
||||
sm="6"
|
||||
>
|
||||
<CardStatisticsWithImages v-bind="statistics" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Total Revenue Line Chart -->
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="2"
|
||||
>
|
||||
<CardStatisticsTotalRevenueLineCharts />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Sessions Bar Chart with Gaps -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="2"
|
||||
>
|
||||
<CardStatisticsSessionsBarWithGapCharts />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Total Growth Area Chart -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="2"
|
||||
>
|
||||
<CardStatisticsTotalGrowthAreaCharts />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Total Revenue Radial Bar Chart -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="2"
|
||||
>
|
||||
<CardStatisticsTotalRevenueRadialBarCharts />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Session Bar Chart -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="2"
|
||||
>
|
||||
<CardStatisticsSessionsBarCharts />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Total Profit Line Chart -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="2"
|
||||
>
|
||||
<CardStatisticsTotalProfitLineCharts />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/libs/apex-chart.scss";
|
||||
</style>
|
||||
149
resources/js/pages/pages/cards/card-widgets.vue
Normal file
149
resources/js/pages/pages/cards/card-widgets.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<script setup>
|
||||
import CardWidgetsActivityTimeline from '@/views/pages/cards/card-widgets/CardWidgetsActivityTimeline.vue'
|
||||
import CardWidgetsAnalytics from '@/views/pages/cards/card-widgets/CardWidgetsAnalytics.vue'
|
||||
import CardWidgetsDeliveryExceptions from '@/views/pages/cards/card-widgets/CardWidgetsDeliveryExceptions.vue'
|
||||
import CardWidgetsPerformance from '@/views/pages/cards/card-widgets/CardWidgetsPerformance.vue'
|
||||
import CardWidgetsRevenueReport from '@/views/pages/cards/card-widgets/CardWidgetsRevenueReport.vue'
|
||||
import CardWidgetsSalesOverview from '@/views/pages/cards/card-widgets/CardWidgetsSalesOverview.vue'
|
||||
import CardWidgetsSalesState from '@/views/pages/cards/card-widgets/CardWidgetsSalesState.vue'
|
||||
import CardWidgetsTotalProfit from '@/views/pages/cards/card-widgets/CardWidgetsTotalProfit.vue'
|
||||
import CardWidgetsTotalProfitRadialBar from '@/views/pages/cards/card-widgets/CardWidgetsTotalProfitRadialBar.vue'
|
||||
import CardWidgetsTotalRevenue from '@/views/pages/cards/card-widgets/CardWidgetsTotalRevenue.vue'
|
||||
import CardWidgetsTotalSales from '@/views/pages/cards/card-widgets/CardWidgetsTotalSales.vue'
|
||||
import CardWidgetsTotalVisitors from '@/views/pages/cards/card-widgets/CardWidgetsTotalVisitors.vue'
|
||||
import CardWidgetsTotalVisits from '@/views/pages/cards/card-widgets/CardWidgetsTotalVisits.vue'
|
||||
import CardWidgetsWeeklyOverview from '@/views/pages/cards/card-widgets/CardWidgetsWeeklyOverview.vue'
|
||||
import CardWidgetsWeeklySales from '@/views/pages/cards/card-widgets/CardWidgetsWeeklySales.vue'
|
||||
import CardWidgetsInterestedTopics from '@/views/pages/cards/card-widgets/cardWidgetsInterestedTopics.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<CardWidgetsTotalProfit />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<CardWidgetsTotalVisitors />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<CardWidgetsWeeklySales />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<CardWidgetsTotalRevenue />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<CardWidgetsWeeklyOverview />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<CardWidgetsPerformance />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<CardWidgetsAnalytics />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<CardWidgetsSalesState />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<CardWidgetsTotalProfitRadialBar />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
md="3"
|
||||
>
|
||||
<CardWidgetsTotalSales />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
md="3"
|
||||
>
|
||||
<CardWidgetsTotalVisits />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="4"
|
||||
md="3"
|
||||
>
|
||||
<CardWidgetsRevenueReport />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<CardWidgetsActivityTimeline />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<CardWidgetsSalesOverview />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<CardWidgetsInterestedTopics />
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<CardWidgetsDeliveryExceptions />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/libs/apex-chart.scss";
|
||||
</style>
|
||||
362
resources/js/pages/pages/dialog-examples/index.vue
Normal file
362
resources/js/pages/pages/dialog-examples/index.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<script setup>
|
||||
const isCardAddDialogVisible = ref(false)
|
||||
const isPricingPlanDialogVisible = ref(false)
|
||||
const isEditAddressDialogVisible = ref(false)
|
||||
const isTwoFactorDialogOpen = ref(false)
|
||||
const isUserInfoEditDialogVisible = ref(false)
|
||||
const isShareProjectDialogVisible = ref(false)
|
||||
const isReferAndEarnDialogVisible = ref(false)
|
||||
const isPaymentProvidersDialogVisible = ref(false)
|
||||
const isAddPaymentMethodsDialogVisible = ref(false)
|
||||
const isCreateAppVisible = ref(false)
|
||||
|
||||
const userData = {
|
||||
id: 110,
|
||||
fullName: 'Salena Kyle',
|
||||
company: 'Wayne Enterprises',
|
||||
firstName: 'Selena',
|
||||
lastName: 'Kyle',
|
||||
username: 'charwomen1940',
|
||||
role: 'Admin',
|
||||
currentPlan: 'Pro',
|
||||
country: 'USA',
|
||||
contact: '(829) 537-0057',
|
||||
email: 'salenakyle@gmail.com',
|
||||
isBillingAddress: true,
|
||||
status: 'active',
|
||||
taxId: 'Tax-8894',
|
||||
language: ['English'],
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<!-- 👉 Share Project Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-file-pdf-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Share Project
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Quickly collect the credit card details, built in input mask and form validation support.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isShareProjectDialogVisible = !isShareProjectDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<ShareProjectDialog v-model:isDialogVisible="isShareProjectDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Add New Card Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-bank-card-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Add New Card
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Quickly collect the credit card details, built in input mask and form validation support.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isCardAddDialogVisible = !isCardAddDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<CardAddEditDialog v-model:isDialogVisible="isCardAddDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Pricing Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-money-dollar-circle-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Pricing
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Elegant pricing options dialog popup example, easy to use in any page.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isPricingPlanDialogVisible = !isPricingPlanDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 plan and pricing dialog -->
|
||||
<PricingPlanDialog v-model:is-dialog-visible="isPricingPlanDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Refer And Earn Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-gift-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Refer & Earn
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Use Refer & Earn modal to encourage your exiting customers refer their friends & colleague.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isReferAndEarnDialogVisible = !isReferAndEarnDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 plan and pricing dialog -->
|
||||
<ReferAndEarnDialog v-model:is-dialog-visible="isReferAndEarnDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Add New Address Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-home-3-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Add New Address
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Ready to use form to collect user address data with validation and custom input support.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isEditAddressDialogVisible = !isEditAddressDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Edit Address dialog -->
|
||||
<AddEditAddressDialog v-model:isDialogVisible="isEditAddressDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Create app dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-box-3-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Create App
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Provide application data with this form to create the app dialog popup example, easy to use in any page.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isCreateAppVisible = !isCreateAppVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
<CreateAppDialog v-model:is-dialog-visible="isCreateAppVisible" />
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Two Factor Auth Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-lock-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Two Factor Auth
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Enhance your application security by enabling two factor authentication.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isTwoFactorDialogOpen = !isTwoFactorDialogOpen">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Enable One Time Password Dialog -->
|
||||
|
||||
<TwoFactorAuthDialog v-model:isDialogVisible="isTwoFactorDialogOpen" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Edit User Info Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-user-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Edit User Info
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Enhance your application security by enabling two factor authentication.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isUserInfoEditDialogVisible = !isUserInfoEditDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 Edit user info dialog -->
|
||||
<UserInfoEditDialog
|
||||
v-model:isDialogVisible="isUserInfoEditDialogVisible"
|
||||
:user-data="userData"
|
||||
/>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Payment Providers Dialog -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-bank-card-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Payment Providers
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Elegant payment options modal popup example, easy to use in any page.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isPaymentProvidersDialogVisible = !isPaymentProvidersDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 plan and pricing dialog -->
|
||||
<PaymentProvidersDialog v-model:is-dialog-visible="isPaymentProvidersDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Add Payment Methods -->
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<VCard class="text-high-emphasis text-center">
|
||||
<VCardText class="d-flex flex-column align-center gap-2">
|
||||
<VIcon
|
||||
size="28"
|
||||
icon="ri-bank-card-2-line"
|
||||
/>
|
||||
<h5 class="text-h5">
|
||||
Add Payment Methods
|
||||
</h5>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<p class="text-base clamp-text">
|
||||
Elegant payment methods modal popup example, easy to use in any page.
|
||||
</p>
|
||||
|
||||
<VBtn @click="isAddPaymentMethodsDialogVisible = !isAddPaymentMethodsDialogVisible">
|
||||
Show
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
|
||||
<!-- 👉 plan and pricing dialog -->
|
||||
<AddPaymentMethodDialog v-model:is-dialog-visible="isAddPaymentMethodsDialogVisible" />
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.pricing-dialog {
|
||||
.pricing-title {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
229
resources/js/pages/pages/faq.vue
Normal file
229
resources/js/pages/pages/faq.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<script setup>
|
||||
import illustrationJohn from '@images/pages/illustration-john.png'
|
||||
|
||||
const faqSearchQuery = ref('')
|
||||
const faqs = ref([])
|
||||
|
||||
const fetchFaqs = async () => {
|
||||
const data = await $api('/pages/faq', { query: { q: faqSearchQuery.value } }).catch(err => console.log(err))
|
||||
|
||||
faqs.value = data
|
||||
}
|
||||
|
||||
const activeTab = ref('Payment')
|
||||
const activeQuestion = ref(1)
|
||||
|
||||
watch(activeTab, () => activeQuestion.value = 0)
|
||||
watch(faqSearchQuery, fetchFaqs, { immediate: true })
|
||||
|
||||
const contactUs = [
|
||||
{
|
||||
icon: 'ri-phone-line',
|
||||
via: '+ (810) 2548 2568',
|
||||
tagLine: 'We are always happy to help!',
|
||||
},
|
||||
{
|
||||
icon: 'ri-mail-line',
|
||||
via: 'hello@help.com',
|
||||
tagLine: 'Best way to get answer faster!',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section>
|
||||
<!-- 👉 Search -->
|
||||
<AppSearchHeader
|
||||
v-model="faqSearchQuery"
|
||||
custom-class="mb-6"
|
||||
>
|
||||
<template #default>
|
||||
<h4 class="text-h4 text-primary mb-3">
|
||||
Hello, how can we help?
|
||||
</h4>
|
||||
|
||||
<p class="text-body-1 mb-7">
|
||||
or choose a category to quickly find the help you need
|
||||
</p>
|
||||
|
||||
<!-- 👉 Search Input -->
|
||||
<VTextField
|
||||
placeholder="search articles..."
|
||||
class="search-header-input mx-auto my-4"
|
||||
>
|
||||
<template #prepend-inner>
|
||||
<VIcon
|
||||
icon="ri-search-line"
|
||||
size="18"
|
||||
/>
|
||||
</template>
|
||||
</VTextField>
|
||||
</template>
|
||||
</AppSearchHeader>
|
||||
|
||||
<!-- 👉 Faq sections and questions -->
|
||||
<VRow>
|
||||
<VCol
|
||||
v-show="faqs.length"
|
||||
cols="12"
|
||||
md="3"
|
||||
sm="5"
|
||||
class="position-relative"
|
||||
>
|
||||
<!-- 👉 Tabs -->
|
||||
<VTabs
|
||||
v-model="activeTab"
|
||||
direction="vertical"
|
||||
class="v-tabs-pill"
|
||||
>
|
||||
<VTab
|
||||
v-for="faq in faqs"
|
||||
:key="faq.faqTitle"
|
||||
:value="faq.faqTitle"
|
||||
>
|
||||
<VIcon
|
||||
:icon="faq.faqIcon"
|
||||
start
|
||||
/>
|
||||
{{ faq.faqTitle }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
<VImg
|
||||
:src="illustrationJohn"
|
||||
class="d-none d-sm-block mt-8"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
sm="7"
|
||||
>
|
||||
<!-- 👉 Windows -->
|
||||
<VWindow
|
||||
v-model="activeTab"
|
||||
class="faq-v-window disable-tab-transition"
|
||||
>
|
||||
<VWindowItem
|
||||
v-for="faq in faqs"
|
||||
:key="faq.faqTitle"
|
||||
:value="faq.faqTitle"
|
||||
>
|
||||
<div class="d-flex align-center mb-4 gap-x-4">
|
||||
<VAvatar
|
||||
rounded
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
size="50"
|
||||
>
|
||||
<VIcon
|
||||
:size="30"
|
||||
:icon="faq.faqIcon"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<div>
|
||||
<h5 class="text-h5">
|
||||
{{ faq.faqTitle }}
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
{{ faq.faqSubtitle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VExpansionPanels
|
||||
v-model="activeQuestion"
|
||||
multiple
|
||||
>
|
||||
<VExpansionPanel
|
||||
v-for="item in faq.faqs"
|
||||
:key="item.question"
|
||||
:title="item.question"
|
||||
:text="item.answer"
|
||||
/>
|
||||
</VExpansionPanels>
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
v-show="!faqs.length"
|
||||
cols="12"
|
||||
:class="!faqs.length ? 'd-flex justify-center align-center' : ''"
|
||||
>
|
||||
<VIcon
|
||||
icon="ri-question-line"
|
||||
start
|
||||
size="20"
|
||||
/>
|
||||
<span class="text-base font-weight-medium">
|
||||
No Results Found!!
|
||||
</span>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- 👉 You still have a question? -->
|
||||
<div class="text-center mt-6">
|
||||
<div class="py-6">
|
||||
<VChip
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
Question
|
||||
</VChip>
|
||||
<h4 class="text-h4 my-2">
|
||||
You still have a question?
|
||||
</h4>
|
||||
<p class="text-body-1 mb-0">
|
||||
If you cannot find a question in our FAQ, you can always contact us. We will answer to you shortly!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- contacts -->
|
||||
<VRow class="mt-3">
|
||||
<VCol
|
||||
v-for="contact in contactUs"
|
||||
:key="contact.icon"
|
||||
sm="6"
|
||||
cols="12"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
color="rgba(var(--v-theme-on-surface), var(--v-hover-opacity))"
|
||||
>
|
||||
<VCardText class="pa-6">
|
||||
<VAvatar
|
||||
rounded
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
size="50"
|
||||
class="mb-4"
|
||||
>
|
||||
<VIcon
|
||||
:icon="contact.icon"
|
||||
size="30"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<h5 class="text-h5 mb-1">
|
||||
{{ contact.via }}
|
||||
</h5>
|
||||
<div class="text-body-1">
|
||||
{{ contact.tagLine }}
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.faq-v-window {
|
||||
.v-window__container {
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
97
resources/js/pages/pages/icons.vue
Normal file
97
resources/js/pages/pages/icons.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<script setup>
|
||||
const iconsList = [
|
||||
'ri-arrow-left-up-line',
|
||||
'ri-arrow-left-up-fill',
|
||||
'ri-arrow-up-line',
|
||||
'ri-arrow-up-fill',
|
||||
'ri-arrow-right-up-line',
|
||||
'ri-arrow-right-up-fill',
|
||||
'ri-corner-down-left-line',
|
||||
'ri-corner-down-left-fill',
|
||||
'ri-corner-left-up-line',
|
||||
'ri-corner-left-up-fill',
|
||||
'ri-corner-left-down-line',
|
||||
'ri-corner-left-down-fill',
|
||||
'ri-corner-down-right-line',
|
||||
'ri-corner-down-right-fill',
|
||||
'ri-arrow-up-circle-line',
|
||||
'ri-arrow-up-circle-fill',
|
||||
'ri-arrow-right-circle-line',
|
||||
'ri-arrow-right-circle-fill',
|
||||
'ri-arrow-down-circle-line',
|
||||
'ri-arrow-down-circle-fill',
|
||||
'ri-arrow-left-circle-line',
|
||||
'ri-arrow-left-circle-fill',
|
||||
'ri-arrow-up-s-line',
|
||||
'ri-arrow-up-s-fill',
|
||||
'ri-arrow-right-s-line',
|
||||
'ri-arrow-right-s-fill',
|
||||
'ri-arrow-down-s-line',
|
||||
'ri-arrow-down-s-fill',
|
||||
'ri-arrow-left-s-line',
|
||||
'ri-arrow-left-s-fill',
|
||||
'ri-arrow-drop-right-fill',
|
||||
' ri-arrow-drop-down-line',
|
||||
' ri-arrow-drop-down-fill',
|
||||
' ri-arrow-drop-left-line',
|
||||
' ri-arrow-drop-left-fill',
|
||||
' ri-arrow-up-double-line',
|
||||
' ri-arrow-up-double-fill',
|
||||
' ri-arrow-right-double-line',
|
||||
' ri-arrow-right-double-fill',
|
||||
' ri-arrow-down-double-line',
|
||||
' ri-arrow-down-double-fill',
|
||||
' ri-arrow-left-double-line',
|
||||
' ri-arrow-left-double-fill',
|
||||
' ri-corner-up-left-double-line',
|
||||
' ri-corner-up-left-double-fill',
|
||||
' ri-corner-up-right-double-line',
|
||||
' ri-corner-up-right-double-fill',
|
||||
' ri-expand-left-line',
|
||||
' ri-expand-left-fill',
|
||||
' ri-expand-right-line',
|
||||
' ri-expand-right-fill',
|
||||
' ri-contract-left-line',
|
||||
' ri-contract-left-fill',
|
||||
' ri-contract-right-line',
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<VCard
|
||||
v-for="icon in iconsList"
|
||||
:key="icon"
|
||||
class="mb-6 me-6"
|
||||
>
|
||||
<VCardText class="py-3 px-4">
|
||||
<VIcon
|
||||
size="30"
|
||||
:icon="icon"
|
||||
/>
|
||||
</VCardText>
|
||||
|
||||
<!-- tooltips -->
|
||||
<VTooltip
|
||||
location="top"
|
||||
activator="parent"
|
||||
>
|
||||
{{ icon }}
|
||||
</VTooltip>
|
||||
</VCard>
|
||||
</div>
|
||||
|
||||
<!-- more icons -->
|
||||
<div class="text-center">
|
||||
<VBtn
|
||||
href="https://remixicon.com/"
|
||||
rel="noopener noreferrer"
|
||||
color="primary"
|
||||
target="_blank"
|
||||
>
|
||||
View All Remix Icons
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
108
resources/js/pages/pages/misc/coming-soon.vue
Normal file
108
resources/js/pages/pages/misc/coming-soon.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<script setup>
|
||||
import miscMaskDark from '@images/misc/misc-mask-dark.png'
|
||||
import miscMaskLight from '@images/misc/misc-mask-light.png'
|
||||
import tree1 from '@images/misc/tree1.png'
|
||||
import tree3 from '@images/misc/tree3.png'
|
||||
import miscComingSoon from '@images/pages/misc-coming-soon.png'
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
|
||||
|
||||
definePage({ meta: { layout: 'blank' } })
|
||||
|
||||
const email = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="misc-wrapper">
|
||||
<div>
|
||||
<!-- 👉 Title and subtitle -->
|
||||
<div class="text-center mb-10">
|
||||
<h4 class="text-h4 mb-2">
|
||||
We are launching soon 🚀
|
||||
</h4>
|
||||
<p class="text-body-1">
|
||||
Our website is opening soon. Please register to get notified when it's ready!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Email input -->
|
||||
<VForm
|
||||
class="d-flex align-center justify-center flex-wrap gap-4"
|
||||
@submit.prevent="() => {}"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
density="compact"
|
||||
autofocus
|
||||
placeholder="Enter your email or username"
|
||||
class="misc-email-input"
|
||||
/>
|
||||
<VBtn type="submit">
|
||||
Notify
|
||||
</VBtn>
|
||||
</VForm>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Image -->
|
||||
<div class="misc-avatar w-100 mt-10">
|
||||
<VImg
|
||||
:src="miscComingSoon"
|
||||
alt="Coming Soon"
|
||||
:max-width="700"
|
||||
height="500"
|
||||
class="mx-auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex gap-x-2 misc-footer-tree d-none">
|
||||
<img
|
||||
:src="tree3"
|
||||
alt="tree"
|
||||
height="120"
|
||||
width="68"
|
||||
>
|
||||
<img
|
||||
:src="tree3"
|
||||
alt="tree"
|
||||
height="70"
|
||||
width="40"
|
||||
class="align-self-end"
|
||||
>
|
||||
</div>
|
||||
|
||||
<img
|
||||
height="210"
|
||||
:src="tree1"
|
||||
class="misc-footer-tree-1 d-none d-md-block"
|
||||
>
|
||||
<img
|
||||
cover
|
||||
:src="authThemeMask"
|
||||
height="172"
|
||||
class="misc-footer-img d-none d-md-block flip-in-rtl"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/misc.scss";
|
||||
|
||||
.misc-email-input {
|
||||
max-inline-size: 21.875rem;
|
||||
min-inline-size: 16rem;
|
||||
}
|
||||
|
||||
.misc-footer-tree, .misc-footer-tree-1 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.misc-footer-tree {
|
||||
inset-block-end: 3.75rem;
|
||||
inset-inline-start: 3.75rem;
|
||||
}
|
||||
|
||||
.misc-footer-tree-1 {
|
||||
inset-block-end: 5rem;
|
||||
inset-inline-end: 4.75rem;
|
||||
}
|
||||
</style>
|
||||
93
resources/js/pages/pages/misc/under-maintenance.vue
Normal file
93
resources/js/pages/pages/misc/under-maintenance.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<script setup>
|
||||
import miscMaskDark from '@images/misc/misc-mask-dark.png'
|
||||
import miscMaskLight from '@images/misc/misc-mask-light.png'
|
||||
import miscUnderMaintenance from '@images/misc/misc-under-maintenance.png'
|
||||
import tree1 from '@images/misc/tree1.png'
|
||||
import tree3 from '@images/misc/tree3.png'
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
layout: 'blank',
|
||||
public: false,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="misc-wrapper">
|
||||
<div class="text-center mb-10">
|
||||
<!-- 👉 Title and subtitle -->
|
||||
<h4 class="text-h4 mb-2">
|
||||
Under Maintenance! 🚧
|
||||
</h4>
|
||||
<p class="mb-0 text-body-1">
|
||||
Sorry for the inconvenience but we're performing some maintenance at the moment
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Image -->
|
||||
<div class="misc-avatar w-100 text-center">
|
||||
<VImg
|
||||
:src="miscUnderMaintenance"
|
||||
alt="Coming Soon"
|
||||
max-width="750"
|
||||
class="mx-auto"
|
||||
/>
|
||||
<VBtn
|
||||
to="/"
|
||||
class="mt-10"
|
||||
style="z-index: 1;"
|
||||
>
|
||||
Back to Home
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<div class="d-md-flex gap-x-2 misc-footer-tree d-none">
|
||||
<img
|
||||
:src="tree3"
|
||||
alt="tree"
|
||||
height="120"
|
||||
width="68"
|
||||
>
|
||||
<img
|
||||
:src="tree3"
|
||||
alt="tree"
|
||||
height="70"
|
||||
width="40"
|
||||
class="align-self-end"
|
||||
>
|
||||
</div>
|
||||
|
||||
<img
|
||||
height="210"
|
||||
:src="tree1"
|
||||
class="misc-footer-tree-1 d-none d-md-block"
|
||||
>
|
||||
<img
|
||||
cover
|
||||
:src="authThemeMask"
|
||||
height="172"
|
||||
class="misc-footer-img d-none d-md-block flip-in-rtl"
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core-scss/template/pages/misc.scss";
|
||||
|
||||
.misc-footer-tree, .misc-footer-tree-1 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.misc-footer-tree {
|
||||
inset-block-end: 3.75rem;
|
||||
inset-inline-start: 3.75rem;
|
||||
}
|
||||
|
||||
.misc-footer-tree-1 {
|
||||
inset-block-end: 5rem;
|
||||
inset-inline-end: 4.75rem;
|
||||
}
|
||||
</style>
|
||||
11
resources/js/pages/pages/pricing.vue
Normal file
11
resources/js/pages/pages/pricing.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<template>
|
||||
<VCard>
|
||||
<VCardText class="pt-12 pb-16 mx-5">
|
||||
<!-- 👉 App Pricing components -->
|
||||
<AppPricing
|
||||
md="4"
|
||||
cols="12"
|
||||
/>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</template>
|
||||
16
resources/js/pages/pages/typography.vue
Normal file
16
resources/js/pages/pages/typography.vue
Normal file
@@ -0,0 +1,16 @@
|
||||
<script setup>
|
||||
import TypographyHeadlines from '@/views/pages/typography/TypographyHeadlines.vue'
|
||||
import TypographyTexts from '@/views/pages/typography/TypographyTexts.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<TypographyHeadlines />
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<TypographyTexts />
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
95
resources/js/pages/pages/user-profile/[tab].vue
Normal file
95
resources/js/pages/pages/user-profile/[tab].vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<script setup>
|
||||
import UserProfileHeader from '@/views/pages/user-profile/UserProfileHeader.vue'
|
||||
import UserConnections from '@/views/pages/user-profile/connections/index.vue'
|
||||
import UserProfile from '@/views/pages/user-profile/profile/index.vue'
|
||||
import UserProjects from '@/views/pages/user-profile/projects/index.vue'
|
||||
import UserTeam from '@/views/pages/user-profile/team/index.vue'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
navActiveLink: 'pages-user-profile-tab',
|
||||
key: 'tab',
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute('pages-user-profile-tab')
|
||||
|
||||
const activeTab = computed({
|
||||
get: () => route.params.tab,
|
||||
set: () => route.params.tab,
|
||||
})
|
||||
|
||||
// tabs
|
||||
const tabs = [
|
||||
{
|
||||
title: 'Profile',
|
||||
icon: 'ri-user-line',
|
||||
tab: 'profile',
|
||||
},
|
||||
{
|
||||
title: 'Team',
|
||||
icon: 'ri-team-line',
|
||||
tab: 'teams',
|
||||
},
|
||||
{
|
||||
title: 'Projects',
|
||||
icon: 'ri-computer-line',
|
||||
tab: 'projects',
|
||||
},
|
||||
{
|
||||
title: 'Connections',
|
||||
icon: 'ri-link',
|
||||
tab: 'connections',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UserProfileHeader class="mb-5" />
|
||||
|
||||
<VTabs
|
||||
v-model="activeTab"
|
||||
class="v-tabs-pill"
|
||||
>
|
||||
<VTab
|
||||
v-for="item in tabs"
|
||||
:key="item.icon"
|
||||
:value="item.tab"
|
||||
:to="{ name: 'pages-user-profile-tab', params: { tab: item.tab } }"
|
||||
>
|
||||
<VIcon
|
||||
start
|
||||
:icon="item.icon"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</VTab>
|
||||
</VTabs>
|
||||
|
||||
<VWindow
|
||||
v-model="activeTab"
|
||||
class="mt-5 disable-tab-transition"
|
||||
:touch="false"
|
||||
>
|
||||
<!-- Profile -->
|
||||
<VWindowItem value="profile">
|
||||
<UserProfile />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Teams -->
|
||||
<VWindowItem value="teams">
|
||||
<UserTeam />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Projects -->
|
||||
<VWindowItem value="projects">
|
||||
<UserProjects />
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Connections -->
|
||||
<VWindowItem value="connections">
|
||||
<UserConnections />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user