forked from mirrors/homebox
formatting
This commit is contained in:
Hayden
parent
ec170f9b93
commit
939d0a429d
1 changed files with 159 additions and 193 deletions
|
|
@ -1,207 +1,173 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import TextField from '@/components/Form/TextField.vue';
|
import TextField from '@/components/Form/TextField.vue';
|
||||||
import { useNotifier } from '@/composables/use-notifier';
|
import { useNotifier } from '@/composables/use-notifier';
|
||||||
import { usePublicApi } from '@/composables/use-api';
|
import { usePublicApi } from '@/composables/use-api';
|
||||||
import { useAuthStore } from '@/store/auth';
|
import { useAuthStore } from '@/store/auth';
|
||||||
useHead({
|
useHead({
|
||||||
title: 'Homebox | Organize and Tag Your Stuff',
|
title: 'Homebox | Organize and Tag Your Stuff',
|
||||||
});
|
});
|
||||||
|
|
||||||
const registerFields = [
|
const registerFields = [
|
||||||
{
|
{
|
||||||
label: "What's your name?",
|
label: "What's your name?",
|
||||||
value: '',
|
value: '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: "What's your email?",
|
label: "What's your email?",
|
||||||
value: '',
|
value: '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Name your group',
|
label: 'Name your group',
|
||||||
value: '',
|
value: '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Set your password',
|
label: 'Set your password',
|
||||||
value: '',
|
value: '',
|
||||||
type: 'password',
|
type: 'password',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Confirm your password',
|
label: 'Confirm your password',
|
||||||
value: '',
|
value: '',
|
||||||
type: 'password',
|
type: 'password',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const api = usePublicApi();
|
const api = usePublicApi();
|
||||||
|
|
||||||
async function registerUser() {
|
async function registerUser() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
// Print Values of registerFields
|
// Print Values of registerFields
|
||||||
|
|
||||||
const { data, error } = await api.register({
|
const { data, error } = await api.register({
|
||||||
user: {
|
user: {
|
||||||
name: registerFields[0].value,
|
name: registerFields[0].value,
|
||||||
email: registerFields[1].value,
|
email: registerFields[1].value,
|
||||||
password: registerFields[3].value,
|
password: registerFields[3].value,
|
||||||
},
|
},
|
||||||
groupName: registerFields[2].value,
|
groupName: registerFields[2].value,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
toast.error('Problem registering user');
|
toast.error('Problem registering user');
|
||||||
} else {
|
} else {
|
||||||
toast.success('User registered');
|
toast.success('User registered');
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log(data);
|
console.log(data);
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const loginFields = [
|
const loginFields = [
|
||||||
{
|
{
|
||||||
label: 'Email',
|
label: 'Email',
|
||||||
value: '',
|
value: '',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Password',
|
label: 'Password',
|
||||||
value: '',
|
value: '',
|
||||||
type: 'password',
|
type: 'password',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const authStore = useAuthStore();
|
const authStore = useAuthStore();
|
||||||
|
|
||||||
const toast = useNotifier();
|
const toast = useNotifier();
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
async function login() {
|
async function login() {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
const { data, error } = await api.login(
|
const { data, error } = await api.login(loginFields[0].value, loginFields[1].value);
|
||||||
loginFields[0].value,
|
|
||||||
loginFields[1].value
|
|
||||||
);
|
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
toast.error('Invalid email or password');
|
toast.error('Invalid email or password');
|
||||||
} else {
|
} else {
|
||||||
toast.success('Logged in successfully');
|
toast.success('Logged in successfully');
|
||||||
|
|
||||||
console.log(data);
|
console.log(data);
|
||||||
|
|
||||||
authStore.$patch({
|
authStore.$patch({
|
||||||
token: data.token,
|
token: data.token,
|
||||||
expires: data.expiresAt,
|
expires: data.expiresAt,
|
||||||
});
|
});
|
||||||
|
|
||||||
router.push({ name: 'home' });
|
router.push({ name: 'home' });
|
||||||
}
|
}
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
const registerForm = ref(false);
|
const registerForm = ref(false);
|
||||||
function toggleLogin() {
|
function toggleLogin() {
|
||||||
registerForm.value = !registerForm.value;
|
registerForm.value = !registerForm.value;
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<header class="sm:px-6 py-2 lg:p-14 sm:py-6">
|
<header class="sm:px-6 py-2 lg:p-14 sm:py-6">
|
||||||
<h2
|
<h2 class="mt-1 text-4xl font-bold tracking-tight text-base-content sm:text-5xl lg:text-6xl">Homebox</h2>
|
||||||
class="mt-1 text-4xl font-bold tracking-tight text-gray-200 sm:text-5xl lg:text-6xl"
|
<p class="ml-1 text-lg text-base-content/50">Track, Organize, and Manage your Shit.</p>
|
||||||
>
|
</header>
|
||||||
Homebox
|
<div class="grid p-6 sm:place-items-center min-h-[50vh]">
|
||||||
</h2>
|
<Transition name="slide-fade">
|
||||||
<p class="ml-1 text-lg text-gray-400">
|
<form v-if="registerForm" @submit.prevent="registerUser">
|
||||||
Track, Organize, and Manage your Shit.
|
<div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
|
||||||
</p>
|
<div class="card-body">
|
||||||
</header>
|
<h2 class="card-title">Register</h2>
|
||||||
<div class="grid p-6 sm:place-items-center min-h-[50vh]">
|
<TextField
|
||||||
<Transition name="slide-fade">
|
v-for="field in registerFields"
|
||||||
<form v-if="registerForm" @submit.prevent="registerUser">
|
v-model="field.value"
|
||||||
<div
|
:label="field.label"
|
||||||
class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl"
|
:key="field.label"
|
||||||
>
|
:type="field.type"
|
||||||
<div class="card-body">
|
/>
|
||||||
<h2 class="card-title">Register</h2>
|
<div class="card-actions justify-end">
|
||||||
<TextField
|
<button type="submit" class="btn btn-primary mt-2" :class="loading ? 'loading' : ''" :disabled="loading">
|
||||||
v-for="field in registerFields"
|
Register
|
||||||
v-model="field.value"
|
</button>
|
||||||
:label="field.label"
|
</div>
|
||||||
:key="field.label"
|
</div>
|
||||||
:type="field.type"
|
</div>
|
||||||
/>
|
</form>
|
||||||
<div class="card-actions justify-end">
|
<form v-else @submit.prevent="login">
|
||||||
<button
|
<div class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl">
|
||||||
type="submit"
|
<div class="card-body">
|
||||||
class="btn btn-primary mt-2"
|
<h2 class="card-title">Login</h2>
|
||||||
:class="loading ? 'loading' : ''"
|
<TextField
|
||||||
:disabled="loading"
|
v-for="field in loginFields"
|
||||||
>
|
v-model="field.value"
|
||||||
Register
|
:label="field.label"
|
||||||
</button>
|
:key="field.label"
|
||||||
</div>
|
:type="field.type"
|
||||||
</div>
|
/>
|
||||||
</div>
|
<div class="card-actions justify-end mt-2">
|
||||||
</form>
|
<button type="submit" class="btn btn-primary" :class="loading ? 'loading' : ''" :disabled="loading">
|
||||||
<form v-else @submit.prevent="login">
|
Login
|
||||||
<div
|
</button>
|
||||||
class="card w-max-[500px] md:w-[500px] bg-base-100 shadow-xl"
|
</div>
|
||||||
>
|
</div>
|
||||||
<div class="card-body">
|
</div>
|
||||||
<h2 class="card-title">Login</h2>
|
</form>
|
||||||
<TextField
|
</Transition>
|
||||||
v-for="field in loginFields"
|
<div class="text-center mt-2">
|
||||||
v-model="field.value"
|
<button @click="toggleLogin">
|
||||||
:label="field.label"
|
{{ registerForm ? 'Already a User? Login' : 'Not a User? Register' }}
|
||||||
:key="field.label"
|
</button>
|
||||||
:type="field.type"
|
</div>
|
||||||
/>
|
</div>
|
||||||
<div class="card-actions justify-end mt-2">
|
<div class="min-w-full absolute bottom-0 z-[-1]">
|
||||||
<button
|
<svg class="fill-primary" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1440 320">
|
||||||
type="submit"
|
<path
|
||||||
class="btn btn-primary"
|
fill-opacity="1"
|
||||||
:class="loading ? 'loading' : ''"
|
d="M0,32L30,42.7C60,53,120,75,180,80C240,85,300,75,360,80C420,85,480,107,540,128C600,149,660,171,720,160C780,149,840,107,900,90.7C960,75,1020,85,1080,122.7C1140,160,1200,224,1260,234.7C1320,245,1380,203,1410,181.3L1440,160L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"
|
||||||
:disabled="loading"
|
/>
|
||||||
>
|
</svg>
|
||||||
Login
|
<div class="bg-primary flex-col flex min-h-[32vh]">
|
||||||
</button>
|
<div class="mt-auto mx-auto mb-8">
|
||||||
</div>
|
<p class="text-center text-gray-200">© 2022 Contents. All Rights Reserved. Haybytes LLC</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</Transition>
|
|
||||||
<div class="text-center mt-2">
|
|
||||||
<button @click="toggleLogin">
|
|
||||||
{{
|
|
||||||
registerForm
|
|
||||||
? 'Already a User? Login'
|
|
||||||
: 'Not a User? Register'
|
|
||||||
}}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="min-w-full absolute bottom-0 z-[-1]">
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
preserveAspectRatio="none"
|
|
||||||
viewBox="0 0 1440 320"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill="#0099ff9b"
|
|
||||||
fill-opacity="1"
|
|
||||||
d="M0,32L30,42.7C60,53,120,75,180,80C240,85,300,75,360,80C420,85,480,107,540,128C600,149,660,171,720,160C780,149,840,107,900,90.7C960,75,1020,85,1080,122.7C1140,160,1200,224,1260,234.7C1320,245,1380,203,1410,181.3L1440,160L1440,320L1410,320C1380,320,1320,320,1260,320C1200,320,1140,320,1080,320C1020,320,960,320,900,320C840,320,780,320,720,320C660,320,600,320,540,320C480,320,420,320,360,320C300,320,240,320,180,320C120,320,60,320,30,320L0,320Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<div class="bg-[#0099ff9b] flex-col flex min-h-[32vh]">
|
|
||||||
<div class="mt-auto mx-auto mb-8">
|
|
||||||
<p class="text-center text-gray-200">
|
|
||||||
© 2022 Contents. All Rights Reserved. Haybytes LLC
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<route lang="yaml">
|
<route lang="yaml">
|
||||||
|
|
@ -209,14 +175,14 @@ name: login
|
||||||
</route>
|
</route>
|
||||||
|
|
||||||
<style lang="css" scoped>
|
<style lang="css" scoped>
|
||||||
.slide-fade-enter-active {
|
.slide-fade-enter-active {
|
||||||
transition: all 0.2s ease-out;
|
transition: all 0.2s ease-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.slide-fade-enter-from,
|
.slide-fade-enter-from,
|
||||||
.slide-fade-leave-to {
|
.slide-fade-leave-to {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform: translateX(20px);
|
transform: translateX(20px);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue