mirrors/homebox
1
0
Fork 0
mirror of https://github.com/sysadminsmedia/homebox.git synced 2025-12-21 21:33:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

run prettier on index.vue

Browse Source
This commit is contained in:
Jeff Rescignano
2025-09-07 02:57:43 -04:00
parent 05a9db9105
commit aa22330a23
1 changed files with 326 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
frontend/pages/index.vue
View File

@@ -10,10 +10,21 @@
import MdiArrowRight from "~icons/mdi/arrow-right";
import MdiLock from "~icons/mdi/lock";
import MdiMastodon from "~icons/mdi/mastodon";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import {
Card,
CardContent,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import LanguageSelector from "~/components/App/LanguageSelector.vue";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
import AppLogo from "~/components/App/Logo.vue";
import FormTextField from "~/components/Form/TextField.vue";
import FormPassword from "~/components/Form/Password.vue";
@@ -55,7 +66,7 @@
return data;
});
whenever(status, status => {
whenever(status, (status) => {
if (status?.demo) {
email.value = "demo@example.com";
loginPassword.value = "demo";
@@ -78,7 +89,13 @@
"autumn",
"acid",
]);
const isEvilForegroundTheme = useIsThemeInList(["light", "aqua", "fantasy", "autumn", "night"]);
const isEvilForegroundTheme = useIsThemeInList([
"light",
"aqua",
"fantasy",
"autumn",
"night",
]);
const isLofiTheme = useIsThemeInList(["lofi"]);
const route = useRoute();
@@ -149,7 +166,10 @@
// Handle OIDC error notifications from URL parameters
const oidcErrorParam = route.query.oidc_error;
if (typeof oidcErrorParam === "string" && oidcErrorParam.startsWith("oidc_")) {
if (
typeof oidcErrorParam === "string" &&
oidcErrorParam.startsWith("oidc_")
) {
// Set the error state to prevent auto-redirect
oidcError.value = oidcErrorParam;
@@ -183,7 +203,12 @@
async function login() {
loading.value = true;
const { error } = await ctx.login(api, email.value, loginPassword.value, remember.value);
const { error } = await ctx.login(
api,
email.value,
loginPassword.value,
remember.value,
);
if (error) {
toast.error(t("index.toast.invalid_email_password"), {
@@ -203,7 +228,7 @@
}
function loginWithOIDC() {
window.location.href = '/api/v1/users/login/oidc';
window.location.href = "/api/v1/users/login/oidc";
}
const [registerForm, toggleLogin] = useToggle();
@@ -228,15 +253,26 @@
<div>
<header
class="mx-auto p-4 sm:flex sm:items-end sm:p-6 lg:p-14"
:class="{ 'text-accent': !isEvilAccentTheme, 'text-white': isLofiTheme }"
:class="{
'text-accent': !isEvilAccentTheme,
'text-white': isLofiTheme,
}"
>
<div class="z-10">
<h2 class="mt-1 flex text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl">
<h2
class="mt-1 flex text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl"
>
HomeB
<AppLogo class="-mb-4 w-12" />
x
</h2>
<p class="ml-1 text-lg" :class="{ 'text-foreground': !isEvilForegroundTheme, 'text-white': isLofiTheme }">
<p
class="ml-1 text-lg"
:class="{
'text-foreground': !isEvilForegroundTheme,
'text-white': isLofiTheme,
}"
>
{{ $t("index.tagline") }}
</p>
</div>
@@ -244,7 +280,11 @@
<div class="z-10 ml-auto mt-6 flex items-center gap-4 sm:mt-0">
<Tooltip>
<TooltipTrigger as-child>
<a href="https://github.com/sysadminsmedia/homebox" target="_blank" rel="noopener noreferrer">
<a
href="https://github.com/sysadminsmedia/homebox"
target="_blank"
rel="noopener noreferrer"
>
<MdiGithub class="size-8" />
</a>
</TooltipTrigger>
@@ -253,7 +293,11 @@
<Tooltip>
<TooltipTrigger as-child>
<a href="https://noc.social/@sysadminszone" target="_blank" rel="noopener noreferrer">
<a
href="https://noc.social/@sysadminszone"
target="_blank"
rel="noopener noreferrer"
>
<MdiMastodon class="size-8" />
</a>
</TooltipTrigger>
@@ -262,7 +306,11 @@
<Tooltip>
<TooltipTrigger as-child>
<a href="https://discord.gg/aY4DCkpNA9" target="_blank" rel="noopener noreferrer">
<a
href="https://discord.gg/aY4DCkpNA9"
target="_blank"
rel="noopener noreferrer"
>
<MdiDiscord class="size-8" />
</a>
</TooltipTrigger>
@@ -271,7 +319,11 @@
<Tooltip>
<TooltipTrigger as-child>
<a href="https://homebox.software/en/" target="_blank" rel="noopener noreferrer">
<a
href="https://homebox.software/en/"
target="_blank"
rel="noopener noreferrer"
>
<MdiFolder class="size-8" />
</a>
</TooltipTrigger>
@@ -294,16 +346,35 @@
</CardTitle>
</CardHeader>
<CardContent class="flex flex-col gap-2">
<FormTextField v-model="email" :label="$t('index.set_email')" data-testid="email-input" />
<FormTextField v-model="username" :label="$t('index.set_name')" data-testid="name-input" />
<FormTextField
v-model="email"
:label="$t('index.set_email')"
data-testid="email-input"
/>
<FormTextField
v-model="username"
:label="$t('index.set_name')"
data-testid="name-input"
/>
<div v-if="!(groupToken == '')" class="pb-1 pt-4 text-center">
<p>{{ $t("index.joining_group") }}</p>
<button type="button" class="text-xs underline" @click="groupToken = ''">
<button
type="button"
class="text-xs underline"
@click="groupToken = ''"
>
{{ $t("index.dont_join_group") }}
</button>
</div>
<FormPassword v-model="password" :label="$t('index.set_password')" data-testid="password-input" />
<PasswordScore v-model:valid="canRegister" :password="password" />
<FormPassword
v-model="password"
:label="$t('index.set_password')"
data-testid="password-input"
/>
<PasswordScore
v-model:valid="canRegister"
:password="password"
/>
</CardContent>
<CardFooter>
<Button
@@ -326,9 +397,14 @@
{{ $t("index.login") }}
</CardTitle>
</CardHeader>
<CardContent v-if="status?.oidc?.allowLocal !== false" class="flex flex-col gap-2">
<CardContent
v-if="status?.oidc?.allowLocal !== false"
class="flex flex-col gap-2"
>
<template v-if="status && status.demo">
<p class="text-center text-xs italic">{{ $t("global.demo_instance") }}</p>
<p class="text-center text-xs italic">
{{ $t("global.demo_instance") }}
</p>
<p class="text-center text-xs">
<b>{{ $t("global.email") }}</b> demo@example.com
</p>
@@ -337,19 +413,39 @@
</p>
</template>
<FormTextField v-model="email" :label="$t('global.email')" />
<FormPassword v-model="loginPassword" :label="$t('global.password')" />
<FormPassword
v-model="loginPassword"
:label="$t('global.password')"
/>
<div class="max-w-[140px]">
<FormCheckbox v-model="remember" :label="$t('index.remember_me')" />
<FormCheckbox
v-model="remember"
:label="$t('index.remember_me')"
/>
</div>
</CardContent>
<CardFooter class="flex flex-col gap-2">
<Button v-if="status?.oidc?.allowLocal !== false" class="w-full" type="submit" :class="loading ? 'loading' : ''" :disabled="loading">
<Button
v-if="status?.oidc?.allowLocal !== false"
class="w-full"
type="submit"
:class="loading ? 'loading' : ''"
:disabled="loading"
>
{{ $t("index.login") }}
</Button>
<div v-if="status?.oidc?.enabled && status?.oidc?.allowLocal !== false" class="flex w-full items-center gap-2">
<div
v-if="
status?.oidc?.enabled &&
status?.oidc?.allowLocal !== false
"
class="flex w-full items-center gap-2"
>
<hr class="flex-1" />
<span class="text-xs text-muted-foreground">{{ $t("index.or") }}</span>
<span class="text-xs text-muted-foreground">{{
$t("index.or")
}}</span>
<hr class="flex-1" />
</div>
@@ -360,7 +456,7 @@
class="w-full"
@click="loginWithOIDC"
>
{{ status.oidc.buttonText || 'Sign in with OIDC' }}
{{ status.oidc.buttonText || "Sign in with OIDC" }}
</Button>
</CardFooter>
</Card>
@@ -368,7 +464,11 @@
</Transition>
<div class="mt-6 text-center">
<Button
v-if="status && status.allowRegistration && status?.oidc?.allowLocal !== false"
v-if="
status &&
status.allowRegistration &&
status?.oidc?.allowLocal !== false
"
class="group"
variant="link"
data-testid="register-button"
@@ -378,7 +478,10 @@
<div
class="absolute inset-0 flex items-center justify-center transition-transform duration-300 group-hover:rotate-[360deg]"
>
<MdiAccountPlus v-if="!registerForm" class="size-5 group-hover:hidden" />
<MdiAccountPlus
v-if="!registerForm"
class="size-5 group-hover:hidden"
/>
<MdiLogin v-else class="size-5 group-hover:hidden" />
<MdiArrowRight class="hidden size-5 group-hover:block" />
</div>