17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 22 Pull Requests 1 Actions 2 Packages Projects Releases Wiki Activity

added application view to final stage of onboarding

Browse Source
This commit is contained in:
ajdj100
2025-12-03 17:44:41 -05:00
parent faf183a23d
commit 4e6745553b
1 changed files with 107 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
ui/src/pages/Join.vue
View File

@@ -12,7 +12,7 @@ import {
} from '@/components/ui/stepper' } from '@/components/ui/stepper'
import { useUserStore } from '@/stores/user'; import { useUserStore } from '@/stores/user';
import { Check, Circle, Dot, Users, X } from 'lucide-vue-next' import { Check, Circle, Dot, Users, X } from 'lucide-vue-next'
import { computed } from 'vue'; import { computed, ref } from 'vue';
import Application from './Application.vue'; import Application from './Application.vue';
function goToLogin() { function goToLogin() {
@@ -69,6 +69,8 @@ const currentStep = computed<number>(() => {
break; break;
} }
}) })
const finalPanel = ref<'app' | 'message'>('message');
</script> </script>
<template> <template>
@@ -131,7 +133,18 @@ const currentStep = computed<number>(() => {
</div> </div>
<Application v-else-if="currentStep === 2" @submit="userStore.loadUser()" :mode="'create'"></Application> <Application v-else-if="currentStep === 2" @submit="userStore.loadUser()" :mode="'create'"></Application>
<Application v-else-if="currentStep === 3" :mode="'view-self'"></Application> <Application v-else-if="currentStep === 3" :mode="'view-self'"></Application>
<div v-if="currentStep === 5" class="w-full max-w-4xl p-8"> <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>
<div v-if="finalPanel === 'message'">
<!-- Accepted message --> <!-- Accepted message -->
<div v-if="userStore.state === 'member'"> <div v-if="userStore.state === 'member'">
<h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left"> <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">
@@ -148,7 +161,8 @@ const currentStep = computed<number>(() => {
<!-- MODPACK SECTION --> <!-- MODPACK SECTION -->
<h2 class="text-xl font-semibold text-foreground mt-6">1. Download the Modpack</h2> <h2 class="text-xl font-semibold text-foreground mt-6">1. Download the Modpack</h2>
<p> <p>
You’ll need to download our private server modpack. This can take some time, so we recommend 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 starting as soon as possible. The link below leads to our
<strong>Shadow Mod</strong>, which automatically pulls all required dependencies. <strong>Shadow Mod</strong>, which automatically pulls all required dependencies.
</p> </p>
@@ -165,13 +179,15 @@ const currentStep = computed<number>(() => {
<!-- CONTACT SECTION --> <!-- CONTACT SECTION -->
<h2 class="text-xl font-semibold text-foreground mt-6">2. Contact a Corporal or Higher</h2> <h2 class="text-xl font-semibold text-foreground mt-6">2. Contact a Corporal or Higher</h2>
<p> <p>
Once you have the modpack installed, connect on TeamSpeak or post in Discord. Anyone with Once you have the modpack installed, connect on TeamSpeak or post in Discord. Anyone
with
the the
rank of <strong>Corporal or above</strong> can help get you set up. rank of <strong>Corporal or above</strong> can help get you set up.
</p> </p>
<ul class="list-none pl-0 space-y-1"> <ul class="list-none pl-0 space-y-1">
<li><strong>TeamSpeak:</strong><a href="ts3server://ts.iceberg-gaming.com" <li><strong>TeamSpeak:</strong><a href="ts3server://ts.iceberg-gaming.com"
class="text-primary underline" target="_blank">ts3server://ts.iceberg-gaming.com</a> class="text-primary underline"
target="_blank">ts3server://ts.iceberg-gaming.com</a>
</li> </li>
<li> <li>
<strong>Discord:</strong> <strong>Discord:</strong>
@@ -180,8 +196,10 @@ const currentStep = computed<number>(() => {
</li> </li>
</ul> </ul>
<p> <p>
They will assist you with your initial assessments and training. Basic trainings run on a They will assist you with your initial assessments and training. Basic trainings run on
rotating schedule or can be requested through our Battalion Forms. Don’t hesitate to hop in 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! during weeknights or Saturday operations to start playing with us!
</p> </p>
<!-- FINAL NOTES --> <!-- FINAL NOTES -->
@@ -193,7 +211,8 @@ const currentStep = computed<number>(() => {
our forums and introduce yourself. our forums and introduce yourself.
</p> </p>
<p> <p>
If you have any questions, feel free to reach out on TeamSpeak, Discord, or Guilded, someone If you have any questions, feel free to reach out on TeamSpeak, Discord, or Guilded,
someone
will always be around to help. will always be around to help.
</p> </p>
</div> </div>
@@ -204,26 +223,23 @@ const currentStep = computed<number>(() => {
<h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left text-destructive"> <h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left text-destructive">
Application Not Approved Application Not Approved
</h1> </h1>
<div class="space-y-4 text-muted-foreground text-left leading-relaxed"> <div class="space-y-4 text-muted-foreground text-left leading-relaxed">
<p> <p>
Thank you for your interest in joining the <strong>17th Ranger Battalion</strong>. 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 After reviewing your application, we regret to inform you that we are not able to
approve it at this time. approve it at this time.
</p> </p>
<p> <p>
If you would like more information, you are encouraged to If you would like more information, you are encouraged to
<strong>reach out and inquire</strong> about the reason your application was not <strong>reach out and inquire</strong> about the reason your application was not
approved. approved.
We are always happy to provide clarification where possible. We are always happy to provide clarification where possible.
</p> </p>
<p> <p>
You are welcome to <strong>resubmit your application in the future</strong> should your 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. circumstances change or when we may be better able to incorporate you into the unit.
</p> </p>
<p> <p>
All the best,<br /> All the best,<br />
<span class="text-foreground font-medium">The 17th Ranger Battalion Recruitment <span class="text-foreground font-medium">The 17th Ranger Battalion Recruitment
@@ -231,7 +247,10 @@ const currentStep = computed<number>(() => {
</p> </p>
</div> </div>
</div> </div>
</div>
</div>
<div v-if="finalPanel === 'app'">
<Application :mode="'view-self'"></Application>
</div> </div>
</div> </div>
</div> </div>