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'
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,7 +133,18 @@ 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">
<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 -->
<div v-if="userStore.state === 'member'">
<h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">
@@ -148,7 +161,8 @@ const currentStep = computed<number>(() => {
<!-- 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
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>
@@ -165,13 +179,15 @@ const currentStep = computed<number>(() => {
<!-- 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
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>
class="text-primary underline"
target="_blank">ts3server://ts.iceberg-gaming.com</a>
</li>
<li>
<strong>Discord:</strong>
@@ -180,8 +196,10 @@ const currentStep = computed<number>(() => {
</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
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 -->
@@ -193,7 +211,8 @@ const currentStep = computed<number>(() => {
our forums and introduce yourself.
</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.
</p>
</div>
@@ -204,26 +223,23 @@ const currentStep = computed<number>(() => {
<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
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
@@ -231,7 +247,10 @@ const currentStep = computed<number>(() => {
</p>
</div>
</div>
</div>
</div>
<div v-if="finalPanel === 'app'">
<Application :mode="'view-self'"></Application>
</div>
</div>
</div>