[FEAT] Auth. and user projects

src/components/auth/AuthModal.vue

@@ -0,0 +1,131 @@
+<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' }}
+        </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>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useAuthStore } from '@/stores/useAuthStore';
+
+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>