ui/src/pages/Join.vue

@@ -11,7 +11,7 @@ import {
     StepperTrigger,
 } from '@/components/ui/stepper'
 import { useUserStore } from '@/stores/user';
-import { Check, Circle, Dot, Users } from 'lucide-vue-next'
+import { Check, Circle, Dot, Users, X } from 'lucide-vue-next'
 import { computed } from 'vue';
 import Application from './Application.vue';
 
@@ -62,10 +62,10 @@ const currentStep = computed<number>(() => {
             return 3;
             break;
         case "member":
-            return 4;
+            return 5;
             break;
         case "denied":
-            return 4;
+            return 5;
             break;
     }
 })
@@ -87,7 +87,10 @@ const currentStep = computed<number>(() => {
                             <Button :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
                                 size="icon" class="z-10 rounded-full shrink-0"
                                 :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']">
-                                <Check v-if="state === 'completed'" class="size-5" />
+                                <template v-if="state === 'completed'">
+                                    <X v-if="step.step === 4 && userStore.state === 'denied'" class="size-5" />
+                                    <Check v-else class="size-5" />
+                                </template>
                                 <Circle v-if="state === 'active'" />
                                 <Dot v-if="state === 'inactive'" />
                             </Button>
@@ -128,7 +131,7 @@ const currentStep = computed<number>(() => {
             </div>
             <Application v-else-if="currentStep === 2" @submit="userStore.loadUser()" :mode="'create'"></Application>
             <Application v-else-if="currentStep === 3" :mode="'view-self'"></Application>
-            <div v-if="currentStep === 4" class="w-full max-w-4xl p-8">
+            <div v-if="currentStep === 5" class="w-full max-w-4xl p-8">
                 <!-- Accepted message -->
                 <div v-if="userStore.state === 'member'">
                     <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">