From 4e6745553bd607417e796bcb6820af1c9270e7a3 Mon Sep 17 00:00:00 2001
From: ajdj100 <ajairplane@gmail.com>
Date: Wed, 3 Dec 2025 17:44:41 -0500
Subject: [PATCH] added application view to final stage of onboarding

---
 ui/src/pages/Join.vue | 195 +++++++++++++++++++++++-------------------
 1 file changed, 107 insertions(+), 88 deletions(-)

diff --git a/ui/src/pages/Join.vue b/ui/src/pages/Join.vue
index 3e4386d..233ad70 100644
--- a/ui/src/pages/Join.vue
+++ b/ui/src/pages/Join.vue
@@ -12,7 +12,7 @@ import {
 } from '@/components/ui/stepper'
 import { useUserStore } from '@/stores/user';
 import { Check, Circle, Dot, Users, X } from 'lucide-vue-next'
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import Application from './Application.vue';
 
 function goToLogin() {
@@ -69,6 +69,8 @@ const currentStep = computed<number>(() => {
             break;
     }
 })
+
+const finalPanel = ref<'app' | 'message'>('message');
 </script>
 
 <template>
@@ -131,107 +133,124 @@ 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 === 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">
-                        Welcome to the 17th Ranger Battalion
-                    </h1>
-                    <div class="space-y-4 text-muted-foreground text-left leading-relaxed">
-                        <p>
-                            Your application to the 17th Ranger Battalion has been <strong>accepted</strong>!
-                            We’re excited to welcome you to the community.
-                        </p>
-                        <p>
-                            There are just a couple of steps to complete before joining us on the battlefield:
-                        </p>
-                        <!-- MODPACK SECTION -->
-                        <h2 class="text-xl font-semibold text-foreground mt-6">1. Download the Modpack</h2>
-                        <p>
-                            You’ll need to download our private server modpack. This can take some time, so we recommend
-                            starting as soon as possible. The link below leads to our
-                            <strong>Shadow Mod</strong>, which automatically pulls all required dependencies.
-                        </p>
-                        <ul class="list-disc pl-6 space-y-1">
-                            <li>Subscribe to the Shadow Mod.</li>
-                            <li>When prompted, choose <em>“Yes”</em> to download all associated mods.</li>
-                        </ul>
-                        <p>
-                            <a href="https://www.guilded.gg/Iceberg-gaming/groups/v3j2vAP3/channels/6979335e-60f7-4ab9-9590-66df69367d1e/docs/2013948655"
-                                class="text-primary underline" target="_blank">
-                                Click here for the full installation guide
-                            </a>
-                        </p>
-                        <!-- CONTACT SECTION -->
-                        <h2 class="text-xl font-semibold text-foreground mt-6">2. Contact a Corporal or Higher</h2>
-                        <p>
-                            Once you have the modpack installed, connect on TeamSpeak or post in Discord. Anyone with
-                            the
-                            rank of <strong>Corporal or above</strong> can help get you set up.
-                        </p>
-                        <ul class="list-none pl-0 space-y-1">
-                            <li><strong>TeamSpeak:</strong><a href="ts3server://ts.iceberg-gaming.com"
-                                    class="text-primary underline" target="_blank">ts3server://ts.iceberg-gaming.com</a>
-                            </li>
-                            <li>
-                                <strong>Discord:</strong>
-                                <a href="https://discord.gg/7hDQCEb" class="text-primary underline"
-                                    target="_blank">https://discord.gg/7hDQCEb</a>
-                            </li>
-                        </ul>
-                        <p>
-                            They will assist you with your initial assessments and training. Basic trainings run on a
-                            rotating schedule or can be requested through our Battalion Forms. Don’t hesitate to hop in
-                            during weeknights or Saturday operations to start playing with us!
-                        </p>
-                        <!-- FINAL NOTES -->
-                        <h2 class="text-xl font-semibold text-foreground mt-6">3. Get Familiar with the Unit</h2>
-                        <p>
-                            Please take a moment to read through our <strong>Code of Conduct</strong>,
-                            <strong>Ranks</strong>, and <strong>Structure</strong> pages. We also encourage you to
-                            browse
-                            our forums and introduce yourself.
-                        </p>
-                        <p>
-                            If you have any questions, feel free to reach out on TeamSpeak, Discord, or Guilded, someone
-                            will always be around to help.
-                        </p>
+            <div v-if="currentStep === 5" class="w-full max-w-4xl p-8 pt-0">
+                <div class="mb-5">
+                    <div class="flex w-min *:px-10 pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
+                        <label :class="finalPanel === 'message' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
+                            @click="finalPanel = 'message'">Message
+                        </label>
+                        <label :class="finalPanel === 'app' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
+                            @click="finalPanel = 'app'">Application
+                        </label>
                     </div>
                 </div>
-                <!-- Denied message -->
-                <div v-else-if="userStore.state === 'denied'">
-                    <div class="w-full max-w-2xl p-8">
-                        <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left text-destructive">
-                            Application Not Approved
+                <div v-if="finalPanel === 'message'">
+                    <!-- Accepted message -->
+                    <div v-if="userStore.state === 'member'">
+                        <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">
+                            Welcome to the 17th Ranger Battalion
                         </h1>
-
                         <div class="space-y-4 text-muted-foreground text-left leading-relaxed">
                             <p>
-                                Thank you for your interest in joining the <strong>17th Ranger Battalion</strong>.
-                                After reviewing your application, we regret to inform you that we are not able to
-                                approve it at this time.
+                                Your application to the 17th Ranger Battalion has been <strong>accepted</strong>!
+                                We’re excited to welcome you to the community.
                             </p>
-
                             <p>
-                                If you would like more information, you are encouraged to
-                                <strong>reach out and inquire</strong> about the reason your application was not
-                                approved.
-                                We are always happy to provide clarification where possible.
+                                There are just a couple of steps to complete before joining us on the battlefield:
                             </p>
-
+                            <!-- MODPACK SECTION -->
+                            <h2 class="text-xl font-semibold text-foreground mt-6">1. Download the Modpack</h2>
                             <p>
-                                You are welcome to <strong>resubmit your application in the future</strong> should your
-                                circumstances change or when we may be better able to incorporate you into the unit.
+                                You’ll need to download our private server modpack. This can take some time, so we
+                                recommend
+                                starting as soon as possible. The link below leads to our
+                                <strong>Shadow Mod</strong>, which automatically pulls all required dependencies.
                             </p>
-
+                            <ul class="list-disc pl-6 space-y-1">
+                                <li>Subscribe to the Shadow Mod.</li>
+                                <li>When prompted, choose <em>“Yes”</em> to download all associated mods.</li>
+                            </ul>
                             <p>
-                                All the best,<br />
-                                <span class="text-foreground font-medium">The 17th Ranger Battalion Recruitment
-                                    Team</span>
+                                <a href="https://www.guilded.gg/Iceberg-gaming/groups/v3j2vAP3/channels/6979335e-60f7-4ab9-9590-66df69367d1e/docs/2013948655"
+                                    class="text-primary underline" target="_blank">
+                                    Click here for the full installation guide
+                                </a>
+                            </p>
+                            <!-- CONTACT SECTION -->
+                            <h2 class="text-xl font-semibold text-foreground mt-6">2. Contact a Corporal or Higher</h2>
+                            <p>
+                                Once you have the modpack installed, connect on TeamSpeak or post in Discord. Anyone
+                                with
+                                the
+                                rank of <strong>Corporal or above</strong> can help get you set up.
+                            </p>
+                            <ul class="list-none pl-0 space-y-1">
+                                <li><strong>TeamSpeak:</strong><a href="ts3server://ts.iceberg-gaming.com"
+                                        class="text-primary underline"
+                                        target="_blank">ts3server://ts.iceberg-gaming.com</a>
+                                </li>
+                                <li>
+                                    <strong>Discord:</strong>
+                                    <a href="https://discord.gg/7hDQCEb" class="text-primary underline"
+                                        target="_blank">https://discord.gg/7hDQCEb</a>
+                                </li>
+                            </ul>
+                            <p>
+                                They will assist you with your initial assessments and training. Basic trainings run on
+                                a
+                                rotating schedule or can be requested through our Battalion Forms. Don’t hesitate to hop
+                                in
+                                during weeknights or Saturday operations to start playing with us!
+                            </p>
+                            <!-- FINAL NOTES -->
+                            <h2 class="text-xl font-semibold text-foreground mt-6">3. Get Familiar with the Unit</h2>
+                            <p>
+                                Please take a moment to read through our <strong>Code of Conduct</strong>,
+                                <strong>Ranks</strong>, and <strong>Structure</strong> pages. We also encourage you to
+                                browse
+                                our forums and introduce yourself.
+                            </p>
+                            <p>
+                                If you have any questions, feel free to reach out on TeamSpeak, Discord, or Guilded,
+                                someone
+                                will always be around to help.
                             </p>
                         </div>
                     </div>
-
+                    <!-- Denied message -->
+                    <div v-else-if="userStore.state === 'denied'">
+                        <div class="w-full max-w-2xl p-8">
+                            <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left text-destructive">
+                                Application Not Approved
+                            </h1>
+                            <div class="space-y-4 text-muted-foreground text-left leading-relaxed">
+                                <p>
+                                    Thank you for your interest in joining the <strong>17th Ranger Battalion</strong>.
+                                    After reviewing your application, we regret to inform you that we are not able to
+                                    approve it at this time.
+                                </p>
+                                <p>
+                                    If you would like more information, you are encouraged to
+                                    <strong>reach out and inquire</strong> about the reason your application was not
+                                    approved.
+                                    We are always happy to provide clarification where possible.
+                                </p>
+                                <p>
+                                    You are welcome to <strong>resubmit your application in the future</strong> should
+                                    your
+                                    circumstances change or when we may be better able to incorporate you into the unit.
+                                </p>
+                                <p>
+                                    All the best,<br />
+                                    <span class="text-foreground font-medium">The 17th Ranger Battalion Recruitment
+                                        Team</span>
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="finalPanel === 'app'">
+                    <Application :mode="'view-self'"></Application>
                 </div>
             </div>
         </div>