ajdj100
5a7b3ba2ab
Some checks failed
Continuous Deployment / Update Deployment (push) Failing after 1m12s
259 lines
13 KiB
Vue
259 lines
13 KiB
Vue
<script setup lang="ts">
|
||
import ApplicationForm from '@/components/application/ApplicationForm.vue';
|
||
import Button from '@/components/ui/button/Button.vue';
|
||
import {
|
||
Stepper,
|
||
StepperDescription,
|
||
StepperIndicator,
|
||
StepperItem,
|
||
StepperSeparator,
|
||
StepperTitle,
|
||
StepperTrigger,
|
||
} from '@/components/ui/stepper'
|
||
import { useUserStore } from '@/stores/user';
|
||
import { Check, Circle, Dot, Users, X } from 'lucide-vue-next'
|
||
import { computed, ref } from 'vue';
|
||
import Application from './Application.vue';
|
||
|
||
function goToLogin() {
|
||
const redirectUrl = encodeURIComponent(window.location.origin + '/join')
|
||
window.location.href = `https://aj17thdevapi.nexuszone.net/login?redirect=${redirectUrl}`;
|
||
}
|
||
|
||
let userStore = useUserStore();
|
||
|
||
const steps = computed(() => {
|
||
const isDenied = userStore.state === 'denied'
|
||
|
||
return [
|
||
{
|
||
step: 1,
|
||
title: 'Create account',
|
||
description: 'Begin by setting up your account',
|
||
},
|
||
{
|
||
step: 2,
|
||
title: 'Submit application',
|
||
description: 'Provide a few details about yourself',
|
||
},
|
||
{
|
||
step: 3,
|
||
title: 'Application review',
|
||
description: 'Our team will review your submission',
|
||
},
|
||
{
|
||
step: 4,
|
||
title: isDenied ? 'Application denied' : 'Acceptance',
|
||
description: isDenied
|
||
? 'Your application was not approved'
|
||
: 'Get started with the 17th Rangers',
|
||
},
|
||
]
|
||
})
|
||
|
||
const currentStep = computed<number>(() => {
|
||
if (!userStore.isLoggedIn)
|
||
return 1;
|
||
switch (userStore.state) {
|
||
case "guest":
|
||
return 2;
|
||
break;
|
||
case "applicant":
|
||
return 3;
|
||
break;
|
||
case "member":
|
||
return 5;
|
||
break;
|
||
case "denied":
|
||
return 5;
|
||
break;
|
||
}
|
||
})
|
||
|
||
const finalPanel = ref<'app' | 'message'>('message');
|
||
</script>
|
||
|
||
<template>
|
||
<div class="flex flex-col items-center mt-10 w-full">
|
||
|
||
<!-- Stepper Container -->
|
||
<div class="w-full flex justify-center">
|
||
<div class="w-full max-w-7xl">
|
||
<Stepper class="flex w-full items-start gap-2" v-model="currentStep">
|
||
<StepperItem v-for="step in steps" :key="step.step" v-slot="{ state }"
|
||
class="relative flex w-full flex-col items-center" :step="step.step">
|
||
<StepperSeparator v-if="step.step !== steps[steps.length - 1]?.step"
|
||
class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 rounded-full bg-muted group-data-[state=completed]:bg-primary" />
|
||
|
||
<StepperTrigger as-child>
|
||
<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']">
|
||
<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>
|
||
</StepperTrigger>
|
||
|
||
<div class="mt-2 flex flex-col items-center text-center">
|
||
<StepperTitle class="text-sm font-semibold transition lg:text-base"
|
||
:class="[state === 'active' && 'text-primary']">
|
||
{{ step.title }}
|
||
</StepperTitle>
|
||
|
||
<StepperDescription
|
||
class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
|
||
:class="[state === 'active' && 'text-primary']">
|
||
{{ step.description }}
|
||
</StepperDescription>
|
||
</div>
|
||
</StepperItem>
|
||
</Stepper>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Content -->
|
||
<div class="mt-12 mb-20 flex w-full max-w-6xl justify-center">
|
||
<div v-if="currentStep === 1" class="w-full max-w-2xl p-8">
|
||
<h1 class="text-3xl sm:text-4xl font-bold mb-4 text-left">
|
||
Create your account
|
||
</h1>
|
||
|
||
<p class="text-left text-muted-foreground mb-6">
|
||
You'll be redirected to our secure sign-in system to set up your account
|
||
and begin your application.
|
||
</p>
|
||
|
||
<Button class="px-6 py-3" @click="goToLogin">
|
||
Continue to account creation
|
||
</Button>
|
||
</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 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">
|
||
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>
|
||
</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>
|
||
</div>
|
||
</template>
|