102 lines
3.8 KiB
Vue
102 lines
3.8 KiB
Vue
<template>
|
|
<Modal :is-open="isOpen" @close="close" :title="isLogin ? 'Welcome Back' : 'Create Account'" :initialWidth="450" :initialHeight="500">
|
|
<div class="space-y-4">
|
|
<div class="text-center mb-6">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">
|
|
{{ isLogin ? 'Sign in to access your projects' : 'Join to save and manage your spritesheets' }}
|
|
</p>
|
|
</div>
|
|
|
|
<form @submit.prevent="handleSubmit" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
|
|
<input v-model="email" type="email" required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" placeholder="you@example.com" />
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
|
|
<input v-model="password" type="password" required minlength="8" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" placeholder="••••••••" />
|
|
</div>
|
|
|
|
<div v-if="!isLogin">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Confirm Password</label>
|
|
<input v-model="passwordConfirm" type="password" required minlength="8" class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white" placeholder="••••••••" />
|
|
</div>
|
|
|
|
<div v-if="error" class="text-red-500 text-sm text-center bg-red-50 dark:bg-red-900/20 p-2 rounded">
|
|
{{ error }}
|
|
</div>
|
|
|
|
<button type="submit" :disabled="loading" class="w-full btn btn-primary py-2.5 flex justify-center items-center">
|
|
<i v-if="loading" class="fas fa-spinner fa-spin mr-2"></i>
|
|
{{ isLogin ? 'Sign In' : 'Create Account' }}
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
|
|
{{ isLogin ? "Don't have an account?" : 'Already have an account?' }}
|
|
<button @click="toggleMode" class="text-indigo-600 dark:text-indigo-400 font-medium hover:underline">
|
|
{{ isLogin ? 'Sign up' : 'Sign in' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useAuthStore } from '@/stores/useAuthStore';
|
|
import Modal from '@/components/utilities/Modal.vue';
|
|
|
|
const props = defineProps<{
|
|
isOpen: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'close'): void;
|
|
}>();
|
|
|
|
const authStore = useAuthStore();
|
|
const isLogin = ref(true);
|
|
const email = ref('');
|
|
const password = ref('');
|
|
const passwordConfirm = ref('');
|
|
const loading = ref(false);
|
|
const error = ref('');
|
|
|
|
const close = () => {
|
|
emit('close');
|
|
error.value = '';
|
|
email.value = '';
|
|
password.value = '';
|
|
passwordConfirm.value = '';
|
|
};
|
|
|
|
const toggleMode = () => {
|
|
isLogin.value = !isLogin.value;
|
|
error.value = '';
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
loading.value = true;
|
|
error.value = '';
|
|
try {
|
|
if (isLogin.value) {
|
|
await authStore.login(email.value, password.value);
|
|
} else {
|
|
if (password.value !== passwordConfirm.value) {
|
|
throw new Error("Passwords don't match");
|
|
}
|
|
await authStore.register(email.value, password.value, passwordConfirm.value);
|
|
}
|
|
close();
|
|
} catch (e: any) {
|
|
error.value = e.message || 'An error occurred';
|
|
// Better PB error handling
|
|
if (e?.data?.message) error.value = e.data.message;
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
</script>
|