feat(login): small easter egg at the login page

src/modules/auth/components/login-connection-panel.vue

@@ -1,15 +1,14 @@
-<script
-    setup
-    lang="ts"
->
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useAuthApi } from 'src/modules/auth/composables/use-auth-api';
+import LoginRockPaperScissor from 'src/modules/auth/components/login-rock-paper-scissor.vue';
 
 const auth_api = useAuthApi();
 
 const email = defineModel<string>('email', { default: '', });
 // const is_remembered = ref<boolean>(false);
 const is_employee_email = computed(() => email.value.includes('@targ'));
+const is_game_time = computed(() => email.value.includes('allumette'));
 </script>
 
 <template>
@@ -44,6 +43,7 @@
                         <span class="text-weight-bolder text-uppercase text-overline"> {{ $t('login.email') }} </span>
                     </template>
                 </q-input>
+                <!-- Stay-logged-in section, removed temporarly until customer module is up -->
                 <!-- <q-card-section
                     horizontal
                     class="q-mb-md q-pa-none text-uppercase text-caption text-weight-medium"
@@ -134,4 +134,7 @@
             </q-card-section>
         </div>
     </q-card>
+    <div v-if="is_game_time">
+        <LoginRockPaperScissor />
+    </div>
 </template>

src/modules/auth/components/login-rock-paper-scissor.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { Notify } from 'quasar';
+import { ref } from 'vue';
+const choices = ['rock', 'paper', 'scissors'] as const;
+type Choice = typeof choices[number];
+const app_choice = ref<Choice>();
+
+const click_number = ref(1);
+const icon = ref('');
+const color = ref('accent');
+
+const getRandmonChoice = (): Choice => {
+    const index = Math.floor(Math.random() * choices.length);
+    return choices[index]!;
+};
+const icon_map: Record<Choice, string> = {
+    rock: 'las la-hand-rock',
+    paper: 'las la-hand-paper',
+    scissors: 'las la-hand-scissors',
+};
+
+const fightingResult = () => {
+    if (click_number.value === 7) {
+        Notify.create({
+            icon: 'las la-hand-middle-finger',
+            color: 'negative',
+            iconSize: '5em',
+            iconColor: 'white',
+        })
+        return;
+    }
+
+    app_choice.value = getRandmonChoice();
+    icon.value = icon_map[app_choice.value];
+    color.value = 'accent';
+
+    Notify.create({
+        color: color.value,
+        icon: icon.value,
+        iconSize: '5em',
+        iconColor: 'white',
+    });
+
+    click_number.value += 1;
+}
+</script>
+<template>
+    <div class="row flex-center q-mt-xl">
+        <div class="q-px-sm">
+            <q-btn
+                push
+                dense
+                color="accent"
+                icon="las la-hand-rock"
+                @click="fightingResult()"
+            />
+        </div>
+        <div class="q-px-sm">
+            <q-btn
+                push
+                dense
+                color="accent"
+                icon="las la-hand-paper"
+                @click="fightingResult()"
+            />
+        </div>
+        <div class="q-px-sm">
+            <q-btn
+                push
+                dense
+                color="accent"
+                icon="las la-hand-scissors"
+                @click="fightingResult()"
+            />
+        </div>
+    </div>
+</template>

src/pages/dashboard-page.vue

@@ -3,11 +3,6 @@
     lang="ts"
 >
     import { ref } from 'vue';
-    import { Notify } from 'quasar';
-
-    const click_number = ref(1);
-    const icon = ref('las la-hand-peace');
-    const color = ref('accent');
 
     const LOREM_IPSUM = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et \
                 dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip \
@@ -16,25 +11,6 @@
                 deserunt mollit anim id est laborum."
 
     const slide = ref<string>('welcome');
-
-    const clickNotify = () => {
-        if (click_number.value % 7 === 0) {
-            icon.value = 'las la-hand-middle-finger';
-            color.value = 'negative';
-        } 
-        else { 
-            icon.value = 'las la-hand-peace';
-            color.value = 'accent';
-        }
-        Notify.create({
-            color: color.value,
-            icon: icon.value,
-            iconSize: '5em',
-            iconColor: 'white',
-        });
-
-        click_number.value += 1;
-    }
 </script>
 
 <template>
@@ -105,14 +81,6 @@
                     </div>
                 </q-carousel-slide>
             </q-carousel>
-            <div class="col column flex-center">
-                <q-btn
-                    push
-                    color="accent"
-                    label="Click Me"
-                    @click="clickNotify"
-                />
-            </div>
         </q-card>
     </q-page>
 </template>