Probindo/freekake_webapp
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auth

Browse Source
This commit is contained in:
irwan.l.cahyono
2025-07-31 13:56:11 +07:00
parent ba5de3c7a7
commit df9fe7a112
32 changed files with 1585 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/auth/cover-lockscreen.vue
+129
View File
@@ -0,0 +1,129 @@
<template>
<div>
<div class="absolute inset-0">
<img src="/assets/images/auth/bg-gradient.png" alt="image" class="h-full w-full object-cover" />
</div>
<div
class="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
>
<img src="/assets/images/auth/coming-soon-object1.png" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
<img src="/assets/images/auth/coming-soon-object2.png" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
<img src="/assets/images/auth/coming-soon-object3.png" alt="image" class="absolute right-0 top-0 h-[300px]" />
<img src="/assets/images/auth/polygon-object.svg" alt="image" class="absolute bottom-0 end-[28%]" />
<div
class="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"
>
<div
class="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,rgba(239,18,98,1)_0%,rgba(67,97,238,1)_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"
>
<div
class="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"
></div>
<div class="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
<NuxtLink to="/" class="ms-10 block w-48 lg:w-72">
<img src="/assets/images/auth/logo-white.svg" alt="Logo" class="w-full" />
</NuxtLink>
<div class="mt-24 hidden w-full max-w-[430px] lg:block">
<img src="/assets/images/auth/unlock.svg" alt="Cover Image" class="w-full" />
</div>
</div>
</div>
<div class="relative flex w-full flex-col items-center justify-center gap-6 px-4 pb-16 pt-6 sm:px-6 lg:max-w-[667px]">
<div class="flex w-full max-w-[440px] items-center gap-2 lg:absolute lg:end-6 lg:top-6 lg:max-w-full">
<NuxtLink to="/" class="block w-8 lg:hidden">
<img src="/assets/images/logo.svg" alt="Logo" class="mx-auto w-10" />
</NuxtLink>
<div class="dropdown ms-auto w-max">
<client-only>
<Popper :placement="store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="8">
<button
type="button"
class="flex items-center gap-2.5 rounded-lg border border-white-dark/30 bg-white px-2 py-1.5 text-white-dark hover:border-primary hover:text-primary dark:bg-black"
>
<div>
<img :src="currentFlag" alt="image" class="h-5 w-5 rounded-full object-cover" />
</div>
<div class="text-base font-bold uppercase">{{ store.locale }}</div>
<span class="shrink-0">
<icon-caret-down />
</span>
</button>
<template #content="{ close }">
<ul
class="grid w-[280px] grid-cols-2 gap-2 !px-2 font-semibold text-dark dark:text-white-dark dark:text-white-light/90"
>
<template v-for="item in store.languageList" :key="item.code">
<li>
<button
type="button"
class="w-full hover:text-primary"
:class="{ 'bg-primary/10 text-primary': store.locale === item.code }"
@click="changeLanguage(item), close()"
>
<img
class="h-5 w-5 rounded-full object-cover"
:src="`/assets/images/flags/${item.code.toUpperCase()}.svg`"
alt=""
/>
<span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
</button>
</li>
</template>
</ul>
</template>
</Popper>
</client-only>
</div>
</div>
<div class="w-full max-w-[440px] lg:mt-16">
<div class="mb-10 flex items-center">
<div class="flex h-16 w-16 items-end justify-center overflow-hidden rounded-full bg-[#00AB55] ltr:mr-4 rtl:ml-4">
<img src="/assets/images/auth/user.png" class="w-full object-cover" alt="images" />
</div>
<div class="flex-1">
<h4 class="text-2xl dark:text-white">Shaun Park</h4>
<p class="text-white-dark">Enter your password to unlock your ID</p>
</div>
</div>
<form class="space-y-5 dark:text-white" @submit.prevent="router.push('/')">
<div>
<label for="Password">Password</label>
<div class="relative text-white-dark">
<input id="Password" type="password" placeholder="Enter Password" class="form-input ps-10 placeholder:text-white-dark" />
<span class="absolute start-4 top-1/2 -translate-y-1/2">
<icon-lock-dots :fill="true" />
</span>
</div>
</div>
<button type="submit" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
UNLOCK
</button>
</form>
</div>
<p class="absolute bottom-6 w-full text-center dark:text-white">© {{ new Date().getFullYear() }}.VRISTO All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import appSetting from '@/app-setting';
import { useAppStore } from '@/stores/index';
import { useRouter } from 'vue-router';
useHead({ title: 'Lockscreen Cover' });
const router = useRouter();
definePageMeta({
layout: 'auth-layout',
});
const store = useAppStore();
const { setLocale } = useI18n();
// multi language
const changeLanguage = (item: any) => {
appSetting.toggleLanguage(item, setLocale);
};
const currentFlag = computed(() => {
return `/assets/images/flags/${store.locale?.toUpperCase()}.svg`;
});
</script>
pages/auth/cover-password-reset.vue
+124
View File
@@ -0,0 +1,124 @@
<template>
<div>
<div class="absolute inset-0">
<img src="/assets/images/auth/bg-gradient.png" alt="image" class="h-full w-full object-cover" />
</div>
<div
class="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
>
<img src="/assets/images/auth/coming-soon-object1.png" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
<img src="/assets/images/auth/coming-soon-object2.png" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
<img src="/assets/images/auth/coming-soon-object3.png" alt="image" class="absolute right-0 top-0 h-[300px]" />
<img src="/assets/images/auth/polygon-object.svg" alt="image" class="absolute bottom-0 end-[28%]" />
<div
class="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"
>
<div
class="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,rgba(239,18,98,1)_0%,rgba(67,97,238,1)_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"
>
<div
class="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"
></div>
<div class="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
<NuxtLink to="/" class="ms-10 block w-48 lg:w-72">
<img src="/assets/images/auth/logo-white.svg" alt="Logo" class="w-full" />
</NuxtLink>
<div class="mt-24 hidden w-full max-w-[430px] lg:block">
<img src="/assets/images/auth/reset-password.svg" alt="Cover Image" class="w-full" />
</div>
</div>
</div>
<div class="relative flex w-full flex-col items-center justify-center gap-6 px-4 pb-16 pt-6 sm:px-6 lg:max-w-[667px]">
<div class="flex w-full max-w-[440px] items-center gap-2 lg:absolute lg:end-6 lg:top-6 lg:max-w-full">
<NuxtLink to="/" class="block w-8 lg:hidden">
<img src="/assets/images/logo.svg" alt="Logo" class="mx-auto w-10" />
</NuxtLink>
<div class="dropdown ms-auto w-max">
<client-only>
<Popper :placement="store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="8">
<button
type="button"
class="flex items-center gap-2.5 rounded-lg border border-white-dark/30 bg-white px-2 py-1.5 text-white-dark hover:border-primary hover:text-primary dark:bg-black"
>
<div>
<img :src="currentFlag" alt="image" class="h-5 w-5 rounded-full object-cover" />
</div>
<div class="text-base font-bold uppercase">{{ store.locale }}</div>
<span class="shrink-0">
<icon-caret-down />
</span>
</button>
<template #content="{ close }">
<ul
class="grid w-[280px] grid-cols-2 gap-2 !px-2 font-semibold text-dark dark:text-white-dark dark:text-white-light/90"
>
<template v-for="item in store.languageList" :key="item.code">
<li>
<button
type="button"
class="w-full hover:text-primary"
:class="{ 'bg-primary/10 text-primary': store.locale === item.code }"
@click="changeLanguage(item), close()"
>
<img
class="h-5 w-5 rounded-full object-cover"
:src="`/assets/images/flags/${item.code.toUpperCase()}.svg`"
alt=""
/>
<span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
</button>
</li>
</template>
</ul>
</template>
</Popper>
</client-only>
</div>
</div>
<div class="w-full max-w-[440px] lg:mt-16">
<div class="mb-7">
<h1 class="mb-3 text-2xl font-bold !leading-snug dark:text-white">Password Reset</h1>
<p>Enter your email to recover your ID</p>
</div>
<form class="space-y-5" @submit.prevent="router.push('/')">
<div>
<label for="Email">Email</label>
<div class="relative text-white-dark">
<input id="Email" type="email" placeholder="Enter Email" class="form-input pl-10 placeholder:text-white-dark" />
<span class="absolute left-4 top-1/2 -translate-y-1/2">
<icon-mail :fill="true" />
</span>
</div>
</div>
<button type="submit" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
RECOVER
</button>
</form>
</div>
<p class="absolute bottom-6 w-full text-center dark:text-white">© {{ new Date().getFullYear() }}.VRISTO All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import appSetting from '@/app-setting';
import { useAppStore } from '@/stores/index';
import { useRouter } from 'vue-router';
useHead({ title: 'Reset Password Cover' });
const router = useRouter();
definePageMeta({
layout: 'auth-layout',
});
const store = useAppStore();
const { setLocale } = useI18n();
// multi language
const changeLanguage = (item: any) => {
appSetting.toggleLanguage(item, setLocale);
};
const currentFlag = computed(() => {
return `/assets/images/flags/${store.locale?.toUpperCase()}.svg`;
});
</script>
pages/auth/login.vue
+208
View File
@@ -0,0 +1,208 @@
<template>
<div>
<div class="absolute inset-0">
<img src="/assets/images/auth/bg-gradient.png" alt="image" class="h-full w-full object-cover" />
</div>
<div
class="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
>
<img src="/assets/images/auth/coming-soon-object1.png" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
<img src="/assets/images/auth/coming-soon-object2.png" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
<img src="/assets/images/auth/coming-soon-object3.png" alt="image" class="absolute right-0 top-0 h-[300px]" />
<img src="/assets/images/auth/polygon-object.svg" alt="image" class="absolute bottom-0 end-[28%]" />
<div
class="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"
>
<div
class="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,rgba(239,18,98,1)_0%,rgba(67,97,238,1)_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"
>
<div
class="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"
></div>
<div class="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
<NuxtLink to="/" class="ms-10 block w-48 lg:w-72">
<img src="/assets/images/auth/logo-white.svg" alt="Logo" class="w-full" />
</NuxtLink>
<div class="mt-24 hidden w-full max-w-[430px] lg:block">
<img src="/assets/images/auth/login.svg" alt="Cover Image" class="w-full" />
</div>
</div>
</div>
<div class="relative flex w-full flex-col items-center justify-center gap-6 px-4 pb-16 pt-6 sm:px-6 lg:max-w-[667px]">
<div class="flex w-full max-w-[440px] items-center gap-2 lg:absolute lg:end-6 lg:top-6 lg:max-w-full">
<NuxtLink to="/" class="block w-8 lg:hidden">
<img src="/assets/images/logo.svg" alt="Logo" class="mx-auto w-10" />
</NuxtLink>
<div class="dropdown ms-auto w-max">
<client-only>
<Popper :placement="store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="8">
<button
type="button"
class="flex items-center gap-2.5 rounded-lg border border-white-dark/30 bg-white px-2 py-1.5 text-white-dark hover:border-primary hover:text-primary dark:bg-black"
>
<div>
<img :src="currentFlag" alt="image" class="h-5 w-5 rounded-full object-cover" />
</div>
<div class="text-base font-bold uppercase">{{ store.locale }}</div>
<span class="shrink-0">
<icon-caret-down />
</span>
</button>
<template #content="{ close }">
<ul
class="grid w-[280px] grid-cols-2 gap-2 !px-2 font-semibold text-dark dark:text-white-dark dark:text-white-light/90"
>
<template v-for="item in store.languageList" :key="item.code">
<li>
<button
type="button"
class="w-full hover:text-primary"
:class="{ 'bg-primary/10 text-primary': store.locale === item.code }"
@click="changeLanguage(item), close()"
>
<img
class="h-5 w-5 rounded-full object-cover"
:src="`/assets/images/flags/${item.code.toUpperCase()}.svg`"
alt=""
/>
<span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
</button>
</li>
</template>
</ul>
</template>
</Popper>
</client-only>
</div>
</div>
<div class="w-full max-w-[440px] lg:mt-16">
<div class="mb-10">
<h1 class="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign in</h1>
<p class="text-base font-bold leading-normal text-white-dark">Enter your email and password to login</p>
</div>
<form class="space-y-5 dark:text-white" @submit.prevent="login()">
<div>
<label for="username">Username</label>
<div class="relative text-white-dark">
<input id="username" type="text" class="form-input ps-10 placeholder:text-white-dark" v-model="form.username"/>
<span class="absolute start-4 top-1/2 -translate-y-1/2">
<icon-user :fill="true" />
</span>
</div>
</div>
<div>
<label for="password">Password</label>
<div class="relative text-white-dark">
<input id="password" type="password" class="form-input ps-10 placeholder:text-white-dark" v-model="form.password"/>
<span class="absolute start-4 top-1/2 -translate-y-1/2">
<icon-lock-dots :fill="true" />
</span>
</div>
</div>
<div>
<label class="flex cursor-pointer items-center">
<input type="checkbox" class="form-checkbox bg-white dark:bg-black" />
<span class="text-white-dark">Subscribe to weekly newsletter</span>
</label>
</div>
<button type="submit" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
Sign in
</button>
</form>
<div class="relative my-7 text-center md:mb-9">
<span class="absolute inset-x-0 top-1/2 h-px w-full -translate-y-1/2 bg-white-light dark:bg-white-dark"></span>
<span class="relative bg-white px-2 font-bold uppercase text-white-dark dark:bg-dark dark:text-white-light">or</span>
</div>
<!-- <div class="mb-10 md:mb-[60px]">
<ul class="flex justify-center gap-3.5">
<li>
<a
href="javascript:"
class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
>
<icon-instagram />
</a>
</li>
<li>
<a
href="javascript:"
class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
>
<icon-facebook-circle />
</a>
</li>
<li>
<a
href="javascript:"
class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
>
<icon-twitter :fill="true" />
</a>
</li>
<li>
<a
href="javascript:"
class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
>
<icon-google />
</a>
</li>
</ul>
</div> -->
<div class="text-center dark:text-white">
Don't have an account ?
<NuxtLink to="/auth/cover-register" class="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
SIGN UP
</NuxtLink>
</div>
</div>
<p class="absolute bottom-6 w-full text-center dark:text-white">© {{ new Date().getFullYear() }}.VRISTO All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import appSetting from '@/app-setting';
import { useAppStore } from '@/stores/index';
import { useRouter } from 'vue-router';
import { useAuthStore } from '@/stores/auth';
const form = ref({
username: '',
password: '',
});
useHead({ title: 'Login' });
const router = useRouter();
definePageMeta({
layout: 'auth-layout',
});
const store = useAppStore();
const { setLocale } = useI18n();
const config = useRuntimeConfig();
const auth = useAuthStore();
// multi language
const changeLanguage = (item: any) => {
appSetting.toggleLanguage(item, setLocale);
};
const currentFlag = computed(() => {
return `/assets/images/flags/${store.locale?.toUpperCase()}.svg`;
});
const login = async () => {
try {
await auth.login(form.value.username, form.value.password);
await navigateTo('/');
} catch (error) {
console.log("error", error);
}
}
</script>
pages/auth/register.vue
+199
View File
@@ -0,0 +1,199 @@
<template>
<div>
<div class="absolute inset-0">
<img src="/assets/images/auth/bg-gradient.png" alt="image" class="h-full w-full object-cover" />
</div>
<div
class="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16"
>
<img src="/assets/images/auth/coming-soon-object1.png" alt="image" class="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
<img src="/assets/images/auth/coming-soon-object2.png" alt="image" class="absolute left-24 top-0 h-40 md:left-[30%]" />
<img src="/assets/images/auth/coming-soon-object3.png" alt="image" class="absolute right-0 top-0 h-[300px]" />
<img src="/assets/images/auth/polygon-object.svg" alt="image" class="absolute bottom-0 end-[28%]" />
<div
class="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0"
>
<div
class="relative hidden w-full items-center justify-center bg-[linear-gradient(225deg,rgba(239,18,98,1)_0%,rgba(67,97,238,1)_100%)] p-5 lg:inline-flex lg:max-w-[835px] xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"
>
<div
class="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"
></div>
<div class="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg]">
<NuxtLink to="/" class="ms-10 block w-48 lg:w-72">
<img src="/assets/images/auth/logo-white.svg" alt="Logo" class="w-full" />
</NuxtLink>
<div class="mt-24 hidden w-full max-w-[430px] lg:block">
<img src="/assets/images/auth/register.svg" alt="Cover Image" class="w-full" />
</div>
</div>
</div>
<div class="relative flex w-full flex-col items-center justify-center gap-6 px-4 pb-16 pt-6 sm:px-6 lg:max-w-[667px]">
<div class="flex w-full max-w-[440px] items-center gap-2 lg:absolute lg:end-6 lg:top-6 lg:max-w-full">
<NuxtLink to="/" class="block w-8 lg:hidden">
<img src="/assets/images/logo.svg" alt="Logo" class="mx-auto w-10" />
</NuxtLink>
<div class="dropdown ms-auto w-max">
<client-only>
<Popper :placement="store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="8">
<button
type="button"
class="flex items-center gap-2.5 rounded-lg border border-white-dark/30 bg-white px-2 py-1.5 text-white-dark hover:border-primary hover:text-primary dark:bg-black"
>
<div>
<img :src="currentFlag" alt="image" class="h-5 w-5 rounded-full object-cover" />
</div>
<div class="text-base font-bold uppercase">{{ store.locale }}</div>
<span class="shrink-0">
<icon-caret-down />
</span>
</button>
<template #content="{ close }">
<ul
class="grid w-[280px] grid-cols-2 gap-2 !px-2 font-semibold text-dark dark:text-white-dark dark:text-white-light/90"
>
<template v-for="item in store.languageList" :key="item.code">
<li>
<button
type="button"
class="w-full hover:text-primary"
:class="{ 'bg-primary/10 text-primary': store.locale === item.code }"
@click="changeLanguage(item), close()"
>
<img
class="h-5 w-5 rounded-full object-cover"
:src="`/assets/images/flags/${item.code.toUpperCase()}.svg`"
alt=""
/>
<span class="ltr:ml-3 rtl:mr-3">{{ item.name }}</span>
</button>
</li>
</template>
</ul>
</template>
</Popper>
</client-only>
</div>
</div>
<div class="w-full max-w-[440px] lg:mt-16">
<div class="mb-10">
<h1 class="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign Up</h1>
<p class="text-base font-bold leading-normal text-white-dark">Enter your email and password to register</p>
</div>
<form class="space-y-5 dark:text-white" @submit.prevent="router.push('/')">
<div>
<label for="Name">Name</label>
<div class="relative text-white-dark">
<input id="Name" type="text" placeholder="Enter Name" class="form-input ps-10 placeholder:text-white-dark" />
<span class="absolute start-4 top-1/2 -translate-y-1/2">
<icon-user :fill="true" />
</span>
</div>
</div>
<div>
<label for="Email">Email</label>
<div class="relative text-white-dark">
<input id="Email" type="email" placeholder="Enter Email" class="form-input ps-10 placeholder:text-white-dark" />
<span class="absolute start-4 top-1/2 -translate-y-1/2">
<icon-mail :fill="true" />
</span>
</div>
</div>
<div>
<label for="Password">Password</label>
<div class="relative text-white-dark">
<input id="Password" type="password" placeholder="Enter Password" class="form-input ps-10 placeholder:text-white-dark" />
<span class="absolute start-4 top-1/2 -translate-y-1/2">
<icon-lock-dots :fill="true" />
</span>
</div>
</div>
<div>
<label class="flex cursor-pointer items-center">
<input type="checkbox" class="form-checkbox bg-white dark:bg-black" />
<span class="text-white-dark">Subscribe to weekly newsletter</span>
</label>
</div>
<button type="submit" class="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
Sign Up
</button>
</form>
<div class="relative my-7 text-center md:mb-9">
<span class="absolute inset-x-0 top-1/2 h-px w-full -translate-y-1/2 bg-white-light dark:bg-white-dark"></span>
<span class="relative bg-white px-2 font-bold uppercase text-white-dark dark:bg-dark dark:text-white-light">or</span>
</div>
<div class="mb-10 md:mb-[60px]">
<ul class="flex justify-center gap-3.5">
<li>
<a
href="javascript:"
class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
>
<icon-instagram />
</a>
</li>
<li>
<a
href="javascript:"
class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
>
<icon-facebook-circle />
</a>
</li>
<li>
<a
href="javascript:"
class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
>
<icon-twitter :fill="true" />
</a>
</li>
<li>
<a
href="javascript:"
class="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
style="background: linear-gradient(135deg, rgba(239, 18, 98, 1) 0%, rgba(67, 97, 238, 1) 100%)"
>
<icon-google />
</a>
</li>
</ul>
</div>
<div class="text-center dark:text-white">
Already have an account ?
<NuxtLink to="/auth/cover-login" class="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
SIGN IN
</NuxtLink>
</div>
</div>
<p class="absolute bottom-6 w-full text-center dark:text-white">© {{ new Date().getFullYear() }}.VRISTO All Rights Reserved.</p>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import appSetting from '@/app-setting';
import { useAppStore } from '@/stores/index';
import { useRouter } from 'vue-router';
useHead({ title: 'Register Cover' });
const router = useRouter();
definePageMeta({
layout: 'auth-layout',
});
const store = useAppStore();
const { setLocale } = useI18n();
// multi language
const changeLanguage = (item: any) => {
appSetting.toggleLanguage(item, setLocale);
};
const currentFlag = computed(() => {
return `/assets/images/flags/${store.locale?.toUpperCase()}.svg`;
});
</script>
pages/character/characters/[id].vue
+4 -4
View File
@@ -155,9 +155,9 @@
const router = useRouter();
const route = useRoute();
const config = useRuntimeConfig();
const typeOptions = [{ "value": "manusia", "label": "Manusia" }, { "value": "hewan", "label": "Hewan" } ]
const { $api } = useNuxtApp();
const originalData = ref<any>(null);
const typeOptions = [{ "value": "manusia", "label": "Manusia" }, { "value": "hewan", "label": "Hewan" } ]
const isLoading = ref(false);
@@ -165,7 +165,7 @@
const featuredIconUploader = ref(null);
const { data: form, refresh } = await useAsyncData('character-get',
() => $fetch(`${config.public.apiBase}/character/characters/${route.params.id}/`, {}),
() => $api(`/character/characters/${route.params.id}/`, {}),
);
const $validate = useVuelidate(rules, { form });
@@ -216,7 +216,7 @@
}
isLoading.value = true;
await $fetch(`${config.public.apiBase}/character/characters/${route.params.id}/`, {
await $api(`/character/characters/${route.params.id}/`, {
method: 'PUT',
body: formData
}).then(() => {
pages/character/characters/add.vue
+3 -1
View File
@@ -162,6 +162,8 @@
const $validate = useVuelidate(rules, { form });
const router = useRouter();
const config = useRuntimeConfig();
const { $api } = useNuxtApp();
const typeOptions = [{ "value": "manusia", "label": "Manusia" }, { "value": "hewan", "label": "Hewan" } ]
const isLoading = ref(false);
@@ -210,7 +212,7 @@
}
isLoading.value = true;
await $fetch(`${config.public.apiBase}/character/characters/`, {
await $api(`/character/characters/`, {
method: 'POST',
body: formData
}).then(() => {
pages/character/characters/list.vue
+13 -3
View File
@@ -68,6 +68,7 @@
const router = useRouter();
const config = useRuntimeConfig();
const { $api } = useNuxtApp();
const cols =
ref([
@@ -94,13 +95,18 @@
const totalRows = computed(() => characters.value?.count ?? 0);
const { data: characters } = await useAsyncData('characters',
() => {
return $fetch(`${config.public.apiBase}/character/characters/`, {
return $api(`/character/characters/`, {
params: {
page: params.current_page,
page_size: params.pagesize,
ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
search: params.search
}})
},
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${useAuthStore().accessToken}`
},
});
}, {
watch: [params],
default: () => ({
@@ -134,8 +140,12 @@
const deleteData = async (data: any) => {
try {
await $fetch(`${config.public.apiBase}/character/characters/${data.id}/`, {
await $api(`/character/characters/${data.id}/`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${useAuthStore().accessToken}`
},
});
refreshNuxtData('characters');
} catch (err) {
pages/character/skins/[id].vue
+4 -3
View File
@@ -137,6 +137,7 @@
const router = useRouter();
const route = useRoute();
const config = useRuntimeConfig();
const { $api } = useNuxtApp();
const isLoading = ref(false);
@@ -153,7 +154,7 @@
const { data: characters } = await useAsyncData('characters',
() => {
return $fetch(`${config.public.apiBase}/character/characters/`, {
return $api(`/character/characters/`, {
params: {
page: params.current_page,
page_size: params.pagesize,
@@ -164,7 +165,7 @@
);
const { data: form, refresh } = await useAsyncData('skin-get',
() => $fetch(`${config.public.apiBase}/character/character-skins/${route.params.id}/`, {})
() => $api(`/character/character-skins/${route.params.id}/`, {})
);
const $validate = useVuelidate(rules, { form });
@@ -212,7 +213,7 @@
}
isLoading.value = true;
await $fetch(`${config.public.apiBase}/character/character-skins/${route.params.id}/`, {
await $api(`/character/character-skins/${route.params.id}/`, {
method: 'PUT',
body: formData
}).then(() => {
pages/character/skins/add.vue
+3 -2
View File
@@ -144,6 +144,7 @@
const $validate = useVuelidate(rules, { form });
const router = useRouter();
const config = useRuntimeConfig();
const { $api } = useNuxtApp();
const params = reactive({
current_page: 1,
@@ -153,7 +154,7 @@
});
const { data: characters } = await useAsyncData('characters',
() => $fetch(`${config.public.apiBase}/character/characters/`, {
() => $api(`/character/characters/`, {
params: {
page: params.current_page,
page_size: 50
@@ -208,7 +209,7 @@
}
isLoading.value = true;
await $fetch(`${config.public.apiBase}/character/character-skins/`, {
await $api(`/character/character-skins/`, {
method: 'POST',
body: formData
}).then(() => {
pages/character/skins/list.vue
+3 -2
View File
@@ -67,6 +67,7 @@
const router = useRouter();
const config = useRuntimeConfig();
const { $api } = useNuxtApp();
const cols =
ref([
@@ -94,7 +95,7 @@
const totalRows = computed(() => skins.value?.count ?? 0);
const { data: skins } = await useAsyncData('skins',
() => {
return $fetch(`${config.public.apiBase}/character/character-skins/`, {
return $api(`/character/character-skins/`, {
params: {
page: params.current_page,
page_size: params.pagesize,
@@ -124,7 +125,7 @@
const deleteData = async (data: any) => {
//delete data with API
await $fetch(`${config.public.apiBase}character/character-skins/${data.id}/`, {
await $api(`/character/character-skins/${data.id}/`, {
method: 'DELETE'
});
pages/content/contents/[id].vue
+8 -9
View File
@@ -266,6 +266,7 @@
const router = useRouter();
const route = useRoute();
const config = useRuntimeConfig();
const { $api } = useNuxtApp();
const quilloptions = ref({});
@@ -277,8 +278,7 @@
const { data: form, refresh} = await useAsyncData('content-get',
async () => {
console.log('Fetching content data for ID:', route.params.id);
const content = await $fetch(`${config.public.apiBase}/content/contents/${route.params.id}/`, {});
const content = await $api(`/content/contents/${route.params.id}/`, {});
return {
...content,
@@ -289,11 +289,11 @@
const $validate = useVuelidate(rules, { form });
const { data: formats } = await useAsyncData('formats',
() => $fetch(`${config.public.apiBase}/content/formats/`)
() => $api(`/content/formats/`)
);
const { data: themes } = await useAsyncData('themes',
() => $fetch(`${config.public.apiBase}/content/themes/`)
() => $api(`/content/themes/`)
);
// const { data: topics, refresh: refreshTopics } = await useAsyncData('topics',
@@ -303,18 +303,18 @@
// );
const { data: types } = await useAsyncData('types',
() => $fetch(`${config.public.apiBase}/content/types/`)
() => $api(`/content/types/`)
);
const { data: statuses } = await useAsyncData('statuses',
() => $fetch(`${config.public.apiBase}/content/statuses/`)
() => $api(`/content/statuses/`)
);
const topics = ref({ results: [] });
const fetchTopics = async () => {
if (!form.value.theme?.value) return;
try {
const res = await $fetch(`${config.public.apiBase}/content/topics/${form.value.theme.value}/`);
const res = await $api(`/content/topics/${form.value.theme.value}/`);
topics.value = res;
// mapping kembali topik jika perlu
@@ -361,7 +361,6 @@
}
});
const isLoading = ref(false);
const featuredImageUploader = ref(null);
@@ -422,7 +421,7 @@
}
isLoading.value = true;
await $fetch(`${config.public.apiBase}/content/contents/${route.params.id}/`, {
await $api(`/content/contents/${route.params.id}/`, {
method: 'PUT',
body: formData
}).then(() => {
pages/content/contents/add.vue
+7 -6
View File
@@ -274,6 +274,7 @@
const $validate = useVuelidate(rules, { form });
const router = useRouter();
const config = useRuntimeConfig();
const { $api } = useNuxtApp();
const quilloptions = ref({});
@@ -284,11 +285,11 @@
});
const { data: themes } = await useAsyncData('themes',
() => $fetch(`${config.public.apiBase}/content/themes/`)
() => $api(`/content/themes/`)
);
const { data: topics } = await useAsyncData('topics',
() => $fetch(`${config.public.apiBase}/content/topics/${form.value.theme?.value}/`), {
() => $api(`/content/topics/${form.value.theme?.value}/`), {
watch: [() => form.value.theme?.value]
}
);
@@ -298,15 +299,15 @@
});
const { data: formats } = await useAsyncData('formats',
() => $fetch(`${config.public.apiBase}/content/formats/`)
() => $api(`/content/formats/`)
);
const { data: types } = await useAsyncData('types',
() => $fetch(`${config.public.apiBase}/content/types/`)
() => $api(`/content/types/`)
);
const { data: statuses } = await useAsyncData('statuses',
() => $fetch(`${config.public.apiBase}/content/statuses/`)
() => $api(`/content/statuses/`)
);
const isLoading = ref(false);
@@ -374,7 +375,7 @@
}
isLoading.value = true;
await $fetch(`${config.public.apiBase}/content/contents/`, {
await $api(`/content/contents/`, {
method: 'POST',
body: formData
}).then(() => {
pages/content/contents/list.vue
+13 -6
View File
@@ -63,10 +63,12 @@
<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue';
import Vue3Datatable from '@bhplugin/vue3-datatable';
import { useDebounceFn } from '@vueuse/core';
useHead({ title: 'Daftar Konten' });
const router = useRouter();
const config = useRuntimeConfig();
const { $api } = useNuxtApp();
const cols =
ref([
@@ -114,17 +116,25 @@
const totalRows = computed(() => contents.value?.count ?? 0);
const { data: contents } = await useAsyncData('contents',
() => {
return $fetch(`${config.public.apiBase}/content/contents/`, {
return $api(`/content/contents/`, {
params: {
page: params.current_page,
page_size: params.pagesize,
ordering: (params.sort_direction == 'desc' ? '-' : '') + params.sort_column,
search: params.search
}})
},
});
}, {
watch: [params]
}
);
const debouncedSearch = useDebounceFn(() => {
params.current_page = 1;
refreshNuxtData('characters');
}, 500);
watch(() => params.search, debouncedSearch);
const changeServer = (data: any) => {
params.pagesize = data.pagesize;
@@ -142,13 +152,10 @@
};
const deleteData = async (data: any) => {
//delete data with API
await $fetch(`${config.public.apiBase}content/contents/${data.id}/`, {
await $api(`/content/contents/${data.id}/`, {
method: 'DELETE'
});
//refersh data posts
refreshNuxtData('contents');
}
</script>