SyntaxSquad/DADProject#9 feat: User info dysplayed in /users/

2025-12-18 21:04:49 +00:00
parent 94fdbd568c
commit d1dd2c00f6
7 changed files with 305 additions and 93 deletions
@@ -1,55 +1,55 @@
 <template>
-    <div class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
-        <div class="w-full max-w-md space-y-8">
-            <div>
-                <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
-                    Sign in to your account
-                </h2>
-                <p class="mt-2 text-center text-sm text-gray-600">
-                    Enter your credentials to access your account
-                </p>
-            </div>
+  <div class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
+    <div class="w-full max-w-md space-y-8">
+      <div>
+        <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
+          Sign in to your account
+        </h2>
+        <p class="mt-2 text-center text-sm text-gray-600">
+          Enter your credentials to access your account
+        </p>
+      </div>

-            <form class="mt-8 space-y-6" @submit.prevent="handleSubmit">
-                <div class="space-y-4 rounded-md shadow-sm">
-                    <div>
-                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
-                            Email address
-                        </label>
-                        <Input id="email" v-model="formData.email" type="email" autocomplete="email" required
-                            placeholder="[email protected]" />
-                    </div>
+      <form class="mt-8 space-y-6" @submit.prevent="handleSubmit">
+        <div class="space-y-4 rounded-md shadow-sm">
+          <div>
+            <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
+              Email address
+            </label>
+            <Input id="email" v-model="formData.email" type="email" autocomplete="email" required
+              placeholder="[email protected]" :disabled="isLoading" />
+          </div>

-                    <div>
-                        <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
-                            Password
-                        </label>
-                        <Input id="password" v-model="formData.password" type="password" autocomplete="current-password"
-                            required placeholder="••••••••" />
-                    </div>
-                </div>
-
-
-                <div>
-                    <Button type="submit" class="w-full"> Sign in </Button>
-                </div>
-
-                <div class="text-center text-sm">
-                    <span class="text-gray-600">Don't have an account? </span>
-                    <a href="#" class="font-medium text-blue-600 hover:text-blue-500">
-                        Sign up
-                    </a>
-                </div>
-            </form>
+          <div>
+            <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
+              Password
+            </label>
+            <Input id="password" v-model="formData.password" type="password" autocomplete="current-password" required
+              placeholder="••••••••" :disabled="isLoading" />
+          </div>
        </div>
+
+        <div>
+          <Button type="submit" class="w-full" :disabled="isLoading">
+            {{ isLoading ? 'Signing in...' : 'Sign in' }}
+          </Button>
+        </div>
+
+        <div class="text-center text-sm">
+          <span class="text-gray-600">Don't have an account? </span>
+          <a href="#" class="font-medium text-blue-600 hover:text-blue-500">
+            Sign up
+          </a>
+        </div>
+      </form>
    </div>
+  </div>
 </template>

 <script setup>
 import { ref } from 'vue'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
-
 import { useAuthStore } from '@/stores/auth'
 import { useRouter } from 'vue-router'
 import { toast } from 'vue-sonner'
@@ -58,22 +58,27 @@ const authStore = useAuthStore()
 const router = useRouter()

 const formData = ref({
-    email: 'pa@mail.pt',
-    password: '123'
+  email: 'pa@mail.pt',
+  password: '123'
 })

+const isLoading = ref(false)

 const handleSubmit = async () => {
-    console.log(formData, authStore)
-    toast.promise(authStore.login(formData.value), {
-        loading: 'Calling API',
-        success: (data) => {
-            return `Login Sucessfull - ${data?.name}`
-        },
-        error: (data) => `[API] Error - ${data?.response?.data?.message}`
-    })
+  isLoading.value = true

+  try {
+    const user = await authStore.login(formData.value)

-    router.push('/')
+    toast.success(`Login Successful - Welcome ${user?.name}!`)
+
+    setTimeout(() => {
+      router.push('/')
+    }, 500)
+  } catch (error) {
+    toast.error(`Login Failed - ${error?.response?.data?.message || error.message}`)
+  } finally {
+    isLoading.value = false
+  }
 }
-</script>
+</script>
@@ -2,36 +2,163 @@
  <div class="profile-page">
    <h1>My Profile</h1>

-    <div v-if="userStore.user">
-      <p><strong>Name:</strong> {{ userStore.user.name }}</p>
-      <p><strong>Email:</strong> {{ userStore.user.email }}</p>
-      <p><strong>Joined:</strong> {{ new Date(userStore.user.created_at).toLocaleString() }}</p>
+    <!-- Loading State -->
+    <div v-if="loading" class="loading">
+      <p>Loading your profile...</p>
    </div>

-    <div v-else>
-      <p>Loading... <b> 読み込み中 </b></p>
+    <!-- Error State -->
+    <div v-else-if="error" class="error">
+      <p>Error: {{ error }}</p>
+      <button @click="retry">Retry</button>
+    </div>
+
+    <!-- User Data from Auth Store (preferred) -->
+    <div v-else-if="authStore.currentUser" class="user-info">
+      <div class="info-item">
+        <strong>Name:</strong> {{ authStore.currentUser.name }}
+      </div>
+      <div class="info-item">
+        <strong>Email:</strong> {{ authStore.currentUser.email }}
+      </div>
+      <div class="info-item">
+        <strong>Nickname:</strong> {{ authStore.currentUser.nickname }}
+      </div>
+      <div class="info-item">
+        <strong>Coins Balance:</strong> {{ authStore.currentUser.coins_balance }}
+      </div>
+      <div class="info-item">
+        <strong>Joined:</strong> {{ formatDate(authStore.currentUser.created_at) }}
+      </div>
+    </div>
+
+    <!-- No Data State -->
+    <div v-else class="no-data">
+      <p> No user data or not logged in. Please log in to view your profile. </p>
    </div>
  </div>
 </template>

 <script setup>
-import { useUserStore } from '@/stores/user'
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { useAPIStore } from '@/stores/api'
+import { useRouter } from 'vue-router'

-const userStore = useUserStore()
+const authStore = useAuthStore()
+const apiStore = useAPIStore()
+const router = useRouter()

-onMounted(() => {
-  if (!userStore.user) {
-    userStore.fetchUser()
+const loading = ref(false)
+const error = ref(null)
+
+const formatDate = (dateString) => {
+  return new Date(dateString).toLocaleString()
+}
+
+const fetchProfile = async () => {
+  loading.value = true
+  error.value = null
+
+  try {
+    const response = await apiStore.getAuthUser()
+    authStore.currentUser = response.data
+  } catch (err) {
+    error.value = err.response?.data?.message || 'Failed to fetch user profile'
+
+    if (err.response?.status === 401) {
+      await authStore.logout()
+      router.push('/login')
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+const retry = () => {
+  fetchProfile()
+}
+
+onMounted(async () => {
+  // Redirect to login if not authenticated
+  if (!authStore.isLoggedIn) {
+    router.push('/login')
+    return
+  }
+
+  // If we already have user data from login, no need to fetch again
+  if (!authStore.currentUser) {
+    await fetchProfile()
  }
 })
-
 </script>

-<style>
+<style scoped>
 .profile-page {
  max-width: 600px;
-  margin: auto;
+  margin: 2rem auto;
+  padding: 2rem;
+}
+
+h1 {
+  margin-bottom: 2rem;
+  color: #333;
+  font-size: 2rem;
+}
+
+.user-info {
+  background: #f5f5f5;
+  padding: 1.5rem;
+  border-radius: 8px;
+}
+
+.info-item {
+  margin-bottom: 1rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid #ddd;
+  display: flex;
+  gap: 1rem;
+}
+
+.info-item:last-child {
+  border-bottom: none;
+}
+
+.info-item strong {
+  min-width: 140px;
+  color: #555;
+}
+
+.loading, .error, .no-data {
+  text-align: center;
+  padding: 2rem;
+}
+
+.error {
+  color: #d32f2f;
+  background: #ffebee;
+  padding: 1.5rem;
+  border-radius: 8px;
+}
+
+.no-data {
+  background: #fff3e0;
+  padding: 1.5rem;
+  border-radius: 8px;
+}
+
+button {
+  margin-top: 1rem;
+  padding: 0.75rem 1.5rem;
+  background: #1976d2;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+button:hover {
+  background: #1565c0;
 }
 </style>
-