root/spritesheet-generator
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FEAT] Format code

Browse Source
This commit is contained in:
root
2026-01-01 18:46:46 +01:00
parent 221dcb7072
commit 65bdc2974f
17 changed files with 561 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/components/auth/AuthModal.vue
View File

@@ -1,131 +1,107 @@
<template>
<Teleport to="body">
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="close">
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md p-6 relative border border-gray-200 dark:border-gray-700">
<button @click="close" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ isLogin ? 'Welcome Back' : 'Create Account' }}</h2>
<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' }}
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-md p-6 relative border border-gray-200 dark:border-gray-700">
<button @click="close" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
<i class="fas fa-times"></i>
</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 class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ isLogin ? 'Welcome Back' : 'Create Account' }}</h2>
<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>
</div>
</div>
</Teleport>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useAuthStore } from '@/stores/useAuthStore';
import { ref } from 'vue';
import { useAuthStore } from '@/stores/useAuthStore';
const props = defineProps<{
isOpen: boolean;
}>();
const props = defineProps<{
isOpen: boolean;
}>();
const emit = defineEmits<{
(e: 'close'): void;
}>();
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 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 close = () => {
emit('close');
error.value = '';
email.value = '';
password.value = '';
passwordConfirm.value = '';
};
const toggleMode = () => {
isLogin.value = !isLogin.value;
error.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");
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);
}
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;
}
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>