From 5712d898a555c5e26754a734ea4a60d803ee61ec Mon Sep 17 00:00:00 2001
From: Florian Briand <florian.briand@digital-engine.info>
Date: Tue, 24 Sep 2024 01:05:02 +0200
Subject: [PATCH] feat: Add a client-side only user selection interface

---
 frontend/components/Avatar.vue           | 22 ++++++++
 frontend/components/LoginModal.vue       | 71 ++++++++++++++++++++++++
 frontend/components/LoginModalAvatar.vue | 17 ++++++
 frontend/components/NavBar.vue           | 27 +++++++--
 frontend/composables/currentUser.ts      |  3 +
 frontend/pages/CPS.vue                   |  8 +--
 frontend/pages/index.vue                 | 13 ++---
 frontend/types/user.ts                   |  6 ++
 8 files changed, 147 insertions(+), 20 deletions(-)
 create mode 100644 frontend/components/Avatar.vue
 create mode 100644 frontend/components/LoginModal.vue
 create mode 100644 frontend/components/LoginModalAvatar.vue
 create mode 100644 frontend/composables/currentUser.ts
 create mode 100644 frontend/types/user.ts

diff --git a/frontend/components/Avatar.vue b/frontend/components/Avatar.vue
new file mode 100644
index 0000000..e4f24e4
--- /dev/null
+++ b/frontend/components/Avatar.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="avatar">
+        <div class="rounded-full">
+            <img :src="getAvatarUrl(user)" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+    import type { User } from '~/types/user';
+
+    const props = defineProps<{
+        user: User,
+    }>();
+
+    const getAvatarUrl = (user: User) => {
+        if (user.avatar) {
+            return user.avatar;
+        }
+        return 'https://avatar.iran.liara.run/username?username=' + user.name;
+    };
+</script>
diff --git a/frontend/components/LoginModal.vue b/frontend/components/LoginModal.vue
new file mode 100644
index 0000000..030e5b8
--- /dev/null
+++ b/frontend/components/LoginModal.vue
@@ -0,0 +1,71 @@
+<template>
+    <dialog
+        id="login_modal"
+        ref="login_modal"
+        @cancel.prevent=""
+        @keyup="handleKeyPress"
+        class="modal"
+    >
+        <div class="modal-box">
+            <h3 class="text-3xl text-center mb-6">Connexion</h3>
+            <div class="flex flex-wrap gap-5 justify-center">
+                <template v-for="(user, index) in users" :key="user.id">
+                    <LoginModalAvatar
+                        :user="user"
+                        :rank="index+1"
+                        @selectUser="login"
+                    />
+                </template>
+            </div>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+            <button class="cursor-default">close</button>
+        </form>
+    </dialog>
+</template>
+
+<script setup lang="ts">
+    import type { User } from '~/types/user';
+
+    const users: User[] = [
+        { id: 1, name: 'John Doe', avatar: 'https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp' },
+        { id: 2, name: 'Jane Doe', avatar: 'https://avatar.iran.liara.run/public' },
+        { id: 3, name: 'Michel Moulin', avatar: '' },
+        { id: 4, name: 'Jean Paris', avatar: '' },
+        { id: 5, name: 'Marie Dupont', avatar: '' },
+        { id: 6, name: 'Émilie Fournier', avatar: '' },
+        { id: 7, name: 'Pierre Lefevre', avatar: '' },
+        { id: 8, name: 'Sophie Lemoine', avatar: '' },
+        { id: 9, name: 'Lucie Simon', avatar: '' },
+        { id: 10, name: 'Kevin Boucher', avatar: '' },
+    ];
+
+    const loginModal = useTemplateRef('login_modal');
+
+    const current_user = useCurrentUser();
+
+    const login = (user: User) => {
+        console.log('login', user);
+        current_user.value = user;
+        loginModal.value?.close();
+    };
+
+    const handleKeyPress = (event: KeyboardEvent) => {
+        // Extract the rank from the event.code : Digit7 -> 7
+        const rank = event.code.match(/\d/);
+        if (!rank) {
+            console.debug('Not handled key event', { event });
+            return;
+        }
+        const user = getUserByRank(parseInt(rank[0]));
+        if (user) {
+            login(user);
+        } else {
+            console.debug('Not handled key event', { event });
+        }
+    };
+
+    const getUserByRank = (rank: number): User => {
+        return users[rank - 1];
+    };
+</script>
\ No newline at end of file
diff --git a/frontend/components/LoginModalAvatar.vue b/frontend/components/LoginModalAvatar.vue
new file mode 100644
index 0000000..74a412f
--- /dev/null
+++ b/frontend/components/LoginModalAvatar.vue
@@ -0,0 +1,17 @@
+<template>
+    <button class="relative" @click="$emit('selectUser', user)">
+        <Avatar class="w-24" :user="user" />
+        <div class="absolute w-fit mx-auto bottom-0 inset-x-0">
+            <kbd class="kbd kbd-sm">{{ rank }}</kbd>
+        </div>
+    </button>
+</template>
+
+<script setup lang="ts">
+    import type { User } from '~/types/user';
+
+    const props = defineProps<{
+        user: User,
+        rank: Number,
+    }>();
+</script>
diff --git a/frontend/components/NavBar.vue b/frontend/components/NavBar.vue
index 38a985f..5ab79cd 100644
--- a/frontend/components/NavBar.vue
+++ b/frontend/components/NavBar.vue
@@ -8,9 +8,28 @@
             <NuxtLink to="/CPS" class="btn btn-ghost">Carte CPS</NuxtLink>
         </nav>
         <div class="navbar-end">
-            <button class="btn btn-ghost" type="button">
-                Connexion
-            </button>
+            <template v-if="!current_user">
+                <button class="btn btn-ghost" type="button" onclick="login_modal.showModal()">
+                    Connexion
+                </button>
+            </template>
+            <template v-else>
+                <details class="dropdown dropdown-end">
+                    <summary class="block"><Avatar :user="current_user" class="w-12" role="button" /></summary>
+                    <ul class="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">
+                        <li><a @click="logout">Déconnexion</a></li>
+                    </ul>
+                </details>
+            </template>
         </div>
     </div>
-</template>
\ No newline at end of file
+    <LoginModal />
+</template>
+
+<script setup lang="ts">
+    const current_user = useCurrentUser();
+
+    const logout = () => {
+        current_user.value = null;
+    };
+</script>
diff --git a/frontend/composables/currentUser.ts b/frontend/composables/currentUser.ts
new file mode 100644
index 0000000..15f6cb6
--- /dev/null
+++ b/frontend/composables/currentUser.ts
@@ -0,0 +1,3 @@
+import type { User } from '@/types/user';
+
+export const useCurrentUser = () => useState<User | null>('currentUser', () => null);
diff --git a/frontend/pages/CPS.vue b/frontend/pages/CPS.vue
index b971091..6ec7669 100644
--- a/frontend/pages/CPS.vue
+++ b/frontend/pages/CPS.vue
@@ -4,11 +4,5 @@
     </div>
 </template>
 
-<script>
-export default {
-    name: 'CPSCard',
-    data() {
-        return {};
-    }
-};
+<script setup>
 </script>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 7e7dd3b..0bb1887 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,18 +1,13 @@
 <template>
     <div>
         <h1 class="text-xl">Welcome to your {{ appName }}!</h1>
+        <p v-if="current_user">Logged in as {{ current_user.name }}</p>
     </div>
 </template>
 
-<script>
-export default {
-    name: 'HomePage',
-    data() {
-        return {
-            appName: 'Nuxt App'
-        };
-    }
-};
+<script setup lang="ts">
+    const current_user = useCurrentUser();
+    const appName = 'Nuxt App';
 </script>
 
 <style scoped>
diff --git a/frontend/types/user.ts b/frontend/types/user.ts
new file mode 100644
index 0000000..cb6d06e
--- /dev/null
+++ b/frontend/types/user.ts
@@ -0,0 +1,6 @@
+export declare interface User {
+    id: number;
+    name: string;
+    email?: string;
+    avatar?: string;
+}