mirror of
https://github.com/unraid/api.git
synced 2026-01-05 08:00:33 -06:00
6c042cbe01
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Refactor** - Streamlined the activation steps display with improved conditional rendering and enhanced interactive button styling. - **New Features** - Introduced a new welcome page featuring a dummy server switcher and refreshed welcome modal. - Expanded the activation interface with a new activation code section for clearer navigation. - **Chores** - Removed the welcome modal from the home page to simplify the layout. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Zack Spear <hi@zackspear.com>
118 lines
3.0 KiB
Vue
118 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import { CheckIcon, KeyIcon, ServerStackIcon } from '@heroicons/vue/24/outline';
|
|
import {
|
|
KeyIcon as KeyIconSolid,
|
|
LockClosedIcon,
|
|
ServerStackIcon as ServerStackIconSolid,
|
|
} from '@heroicons/vue/24/solid';
|
|
import {
|
|
Button,
|
|
Stepper,
|
|
StepperDescription,
|
|
StepperItem,
|
|
StepperSeparator,
|
|
StepperTitle,
|
|
StepperTrigger,
|
|
} from '@unraid/ui';
|
|
|
|
import type { Component } from 'vue';
|
|
|
|
type StepState = 'inactive' | 'active' | 'completed';
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
activeStep?: number;
|
|
}>(),
|
|
{
|
|
activeStep: 1,
|
|
}
|
|
);
|
|
|
|
interface Step {
|
|
step: number;
|
|
title: string;
|
|
description: string;
|
|
icon: {
|
|
inactive: Component;
|
|
active: Component;
|
|
completed: Component;
|
|
};
|
|
}
|
|
const steps: readonly Step[] = [
|
|
{
|
|
step: 1,
|
|
title: 'Create Device Password',
|
|
description: 'Secure your device',
|
|
icon: {
|
|
inactive: LockClosedIcon,
|
|
active: LockClosedIcon,
|
|
completed: CheckIcon,
|
|
},
|
|
},
|
|
{
|
|
step: 2,
|
|
title: 'Activate License',
|
|
description: 'Create an Unraid.net account and activate your key',
|
|
icon: {
|
|
inactive: KeyIcon,
|
|
active: KeyIconSolid,
|
|
completed: CheckIcon,
|
|
},
|
|
},
|
|
{
|
|
step: 3,
|
|
title: 'Unleash Your Hardware',
|
|
description: 'Device is ready to configure',
|
|
icon: {
|
|
inactive: ServerStackIcon,
|
|
active: ServerStackIconSolid,
|
|
completed: CheckIcon,
|
|
},
|
|
},
|
|
] as const;
|
|
</script>
|
|
|
|
<template>
|
|
<Stepper :default-value="activeStep" class="text-foreground flex w-full items-start gap-2 text-16px">
|
|
<StepperItem
|
|
v-for="(step, index) in steps"
|
|
:key="step.step"
|
|
v-slot="{ state }: { state: StepState }"
|
|
class="relative flex w-full flex-col items-center justify-center data-[disabled]:opacity-100"
|
|
:step="step.step"
|
|
:disabled="true"
|
|
>
|
|
<StepperTrigger>
|
|
<div class="flex items-center justify-center">
|
|
<Button
|
|
:variant="state === 'completed' ? 'primary' : state === 'active' ? 'primary' : 'outline'"
|
|
size="md"
|
|
:class="`z-10 rounded-full ${
|
|
state !== 'inactive'
|
|
? 'ring-2 ring-offset-2 ring-offset-background *:cursor-default ' +
|
|
(state === 'completed' ? 'ring-success' : 'ring-primary')
|
|
: ''
|
|
}`"
|
|
:disabled="state === 'inactive'"
|
|
>
|
|
<component :is="step.icon[state]" class="size-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="mt-2 flex flex-col items-center text-center">
|
|
<StepperTitle
|
|
:class="[state === 'active' && 'text-primary']"
|
|
class="text-2xs font-semibold transition"
|
|
>
|
|
{{ step.title }}
|
|
</StepperTitle>
|
|
<StepperDescription class="text-2xs font-normal">
|
|
{{ step.description }}
|
|
</StepperDescription>
|
|
</div>
|
|
</StepperTrigger>
|
|
<StepperSeparator v-if="index < steps.length - 1" class="w-[50px] bg-black h-[30px]" />
|
|
</StepperItem>
|
|
</Stepper>
|
|
</template>
|