run prettier on index.vue

frontend/pages/index.vue

@@ -1,212 +1,237 @@
 <script setup lang="ts">
-  import { useI18n } from "vue-i18n";
+import { useI18n } from "vue-i18n";
-  import { toast } from "@/components/ui/sonner";
+import { toast } from "@/components/ui/sonner";
-  import MdiGithub from "~icons/mdi/github";
+import MdiGithub from "~icons/mdi/github";
-  import MdiDiscord from "~icons/mdi/discord";
+import MdiDiscord from "~icons/mdi/discord";
-  import MdiFolder from "~icons/mdi/folder";
+import MdiFolder from "~icons/mdi/folder";
-  import MdiAccount from "~icons/mdi/account";
+import MdiAccount from "~icons/mdi/account";
-  import MdiAccountPlus from "~icons/mdi/account-plus";
+import MdiAccountPlus from "~icons/mdi/account-plus";
-  import MdiLogin from "~icons/mdi/login";
+import MdiLogin from "~icons/mdi/login";
-  import MdiArrowRight from "~icons/mdi/arrow-right";
+import MdiArrowRight from "~icons/mdi/arrow-right";
-  import MdiLock from "~icons/mdi/lock";
+import MdiLock from "~icons/mdi/lock";
-  import MdiMastodon from "~icons/mdi/mastodon";
+import MdiMastodon from "~icons/mdi/mastodon";
-  import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import {
-  import { Button } from "@/components/ui/button";
+  Card,
-  import LanguageSelector from "~/components/App/LanguageSelector.vue";
+  CardContent,
-  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+  CardFooter,
-  import AppLogo from "~/components/App/Logo.vue";
+  CardHeader,
-  import FormTextField from "~/components/Form/TextField.vue";
+  CardTitle,
-  import FormPassword from "~/components/Form/Password.vue";
+} from "@/components/ui/card";
-  import FormCheckbox from "~/components/Form/Checkbox.vue";
+import { Button } from "@/components/ui/button";
-  import PasswordScore from "~/components/global/PasswordScore.vue";
+import LanguageSelector from "~/components/App/LanguageSelector.vue";
+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";
+import FormCheckbox from "~/components/Form/Checkbox.vue";
+import PasswordScore from "~/components/global/PasswordScore.vue";
 
-  const { t } = useI18n();
+const { t } = useI18n();
 
-  useHead({
+useHead({
-    title: "HomeBox | " + t("index.title"),
+  title: "HomeBox | " + t("index.title"),
-  });
+});
 
-  definePageMeta({
+definePageMeta({
-    layout: "empty",
+  layout: "empty",
-    middleware: [
+  middleware: [
-      () => {
+    () => {
-        const ctx = useAuthContext();
+      const ctx = useAuthContext();
-        if (ctx.isAuthorized()) {
+      if (ctx.isAuthorized()) {
-          return "/home";
+        return "/home";
-        }
+      }
+    },
+  ],
+});
+
+const ctx = useAuthContext();
+
+const api = usePublicApi();
+
+// Use useState for OIDC error state management
+const oidcError = useState<string | null>("oidc_error", () => null);
+
+const { data: status } = useAsyncData(async () => {
+  const { data } = await api.status();
+
+  if (data.demo) {
+    username.value = "demo@example.com";
+    password.value = "demo";
+  }
+  return data;
+});
+
+whenever(status, (status) => {
+  if (status?.demo) {
+    email.value = "demo@example.com";
+    loginPassword.value = "demo";
+  }
+
+  // Auto-redirect to OIDC if force is enabled, but not if there's an OIDC error
+  if (status?.oidc?.enabled && status?.oidc?.force && !oidcError.value) {
+    loginWithOIDC();
+  }
+});
+
+const isEvilAccentTheme = useIsThemeInList([
+  "bumblebee",
+  "corporate",
+  "forest",
+  "pastel",
+  "wireframe",
+  "black",
+  "dracula",
+  "autumn",
+  "acid",
+]);
+const isEvilForegroundTheme = useIsThemeInList([
+  "light",
+  "aqua",
+  "fantasy",
+  "autumn",
+  "night",
+]);
+const isLofiTheme = useIsThemeInList(["lofi"]);
+
+const route = useRoute();
+const router = useRouter();
+
+const username = ref("");
+const email = ref("");
+const password = ref("");
+const canRegister = ref(false);
+const remember = ref(false);
+
+const groupToken = computed<string>({
+  get() {
+    const params = route.query.token;
+
+    if (typeof params === "string") {
+      return params;
+    }
+
+    return "";
+  },
+  set(v) {
+    router.push({
+      query: {
+        token: v,
       },
-    ],
-  });
-
-  const ctx = useAuthContext();
-
-  const api = usePublicApi();
-  
-  // Use useState for OIDC error state management
-  const oidcError = useState<string | null>("oidc_error", () => null);
-
-  const { data: status } = useAsyncData(async () => {
-    const { data } = await api.status();
-
-    if (data.demo) {
-      username.value = "demo@example.com";
-      password.value = "demo";
-    }
-    return data;
-  });
-
-  whenever(status, status => {
-    if (status?.demo) {
-      email.value = "demo@example.com";
-      loginPassword.value = "demo";
-    }
-    
-    // Auto-redirect to OIDC if force is enabled, but not if there's an OIDC error
-    if (status?.oidc?.enabled && status?.oidc?.force && !oidcError.value) {
-      loginWithOIDC();
-    }
-  });
-
-  const isEvilAccentTheme = useIsThemeInList([
-    "bumblebee",
-    "corporate",
-    "forest",
-    "pastel",
-    "wireframe",
-    "black",
-    "dracula",
-    "autumn",
-    "acid",
-  ]);
-  const isEvilForegroundTheme = useIsThemeInList(["light", "aqua", "fantasy", "autumn", "night"]);
-  const isLofiTheme = useIsThemeInList(["lofi"]);
-
-  const route = useRoute();
-  const router = useRouter();
-
-  const username = ref("");
-  const email = ref("");
-  const password = ref("");
-  const canRegister = ref(false);
-  const remember = ref(false);
-
-  const groupToken = computed<string>({
-    get() {
-      const params = route.query.token;
-
-      if (typeof params === "string") {
-        return params;
-      }
-
-      return "";
-    },
-    set(v) {
-      router.push({
-        query: {
-          token: v,
-        },
-      });
-    },
-  });
-
-  async function registerUser() {
-    loading.value = true;
-
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-    if (!emailRegex.test(email.value)) {
-      toast.error(t("index.toast.invalid_email"));
-      loading.value = false;
-      return;
-    }
-
-    const { error } = await api.register({
-      name: username.value,
-      email: email.value,
-      password: password.value,
-      token: groupToken.value,
     });
+  },
+});
 
-    if (error) {
+async function registerUser() {
-      toast.error(t("index.toast.problem_registering"), {
+  loading.value = true;
-        classes: {
-          title: "login-error",
-        },
-      });
-      return;
-    }
 
-    toast.success(t("index.toast.user_registered"));
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 
+  if (!emailRegex.test(email.value)) {
+    toast.error(t("index.toast.invalid_email"));
     loading.value = false;
-    registerForm.value = false;
+    return;
   }
 
-  onMounted(() => {
+  const { error } = await api.register({
-    if (groupToken.value !== "") {
+    name: username.value,
-      registerForm.value = true;
+    email: email.value,
-    }
+    password: password.value,
-    
+    token: groupToken.value,
-    // Handle OIDC error notifications from URL parameters
-    const oidcErrorParam = route.query.oidc_error;
-    if (typeof oidcErrorParam === "string" && oidcErrorParam.startsWith("oidc_")) {
-      // Set the error state to prevent auto-redirect
-      oidcError.value = oidcErrorParam;
-      
-      const translationKey = `index.toast.${oidcErrorParam}`;
-      let errorMessage = t(translationKey);
-      
-      // If there are additional details, append them
-      const details = route.query.details;
-      if (typeof details === "string" && details.trim() !== "") {
-        errorMessage += `: ${details}`;
-      }
-      
-      toast.error(errorMessage);
-      
-      // Clean up the URL by removing the error parameters
-      const newQuery = { ...route.query };
-      delete newQuery.oidc_error;
-      delete newQuery.details;
-      router.replace({ query: newQuery });
-      
-      // Clear the error state after showing the message (with a delay to ensure auto-redirect doesn't trigger)
-      setTimeout(() => {
-        oidcError.value = null;
-      }, 1000);
-    }
   });
 
-  const loading = ref(false);
+  if (error) {
-  const loginPassword = ref("");
+    toast.error(t("index.toast.problem_registering"), {
-  const redirectTo = useState("authRedirect");
+      classes: {
+        title: "login-error",
+      },
+    });
+    return;
+  }
 
-  async function login() {
+  toast.success(t("index.toast.user_registered"));
-    loading.value = true;
-    const { error } = await ctx.login(api, email.value, loginPassword.value, remember.value);
 
-    if (error) {
+  loading.value = false;
-      toast.error(t("index.toast.invalid_email_password"), {
+  registerForm.value = false;
-        classes: {
+}
-          title: "login-error",
+
-        },
+onMounted(() => {
-      });
+  if (groupToken.value !== "") {
-      loading.value = false;
+    registerForm.value = true;
-      return;
+  }
+
+  // Handle OIDC error notifications from URL parameters
+  const oidcErrorParam = route.query.oidc_error;
+  if (
+    typeof oidcErrorParam === "string" &&
+    oidcErrorParam.startsWith("oidc_")
+  ) {
+    // Set the error state to prevent auto-redirect
+    oidcError.value = oidcErrorParam;
+
+    const translationKey = `index.toast.${oidcErrorParam}`;
+    let errorMessage = t(translationKey);
+
+    // If there are additional details, append them
+    const details = route.query.details;
+    if (typeof details === "string" && details.trim() !== "") {
+      errorMessage += `: ${details}`;
     }
 
-    toast.success(t("index.toast.login_success"));
+    toast.error(errorMessage);
 
-    navigateTo(redirectTo.value || "/home");
+    // Clean up the URL by removing the error parameters
-    redirectTo.value = null;
+    const newQuery = { ...route.query };
+    delete newQuery.oidc_error;
+    delete newQuery.details;
+    router.replace({ query: newQuery });
+
+    // Clear the error state after showing the message (with a delay to ensure auto-redirect doesn't trigger)
+    setTimeout(() => {
+      oidcError.value = null;
+    }, 1000);
+  }
+});
+
+const loading = ref(false);
+const loginPassword = ref("");
+const redirectTo = useState("authRedirect");
+
+async function login() {
+  loading.value = true;
+  const { error } = await ctx.login(
+    api,
+    email.value,
+    loginPassword.value,
+    remember.value,
+  );
+
+  if (error) {
+    toast.error(t("index.toast.invalid_email_password"), {
+      classes: {
+        title: "login-error",
+      },
+    });
     loading.value = false;
+    return;
   }
 
-  function loginWithOIDC() {
+  toast.success(t("index.toast.login_success"));
-    window.location.href = '/api/v1/users/login/oidc';
-  }
 
-  const [registerForm, toggleLogin] = useToggle();
+  navigateTo(redirectTo.value || "/home");
+  redirectTo.value = null;
+  loading.value = false;
+}
+
+function loginWithOIDC() {
+  window.location.href = "/api/v1/users/login/oidc";
+}
+
+const [registerForm, toggleLogin] = useToggle();
 </script>
 
 <template>
@@ -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
-                  <FormTextField v-model="username" :label="$t('index.set_name')" data-testid="name-input" />
+                    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" />
+                  <FormPassword
-                  <PasswordScore v-model:valid="canRegister" :password="password" />
+                    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,30 +413,50 @@
                     </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>
-                  
+
-                  <Button 
+                  <Button
                     v-if="status?.oidc?.enabled"
                     type="button"
                     variant="outline"
                     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>
@@ -403,18 +506,18 @@
 </template>
 
 <style lang="css" scoped>
-  .slide-fade-enter-active {
+.slide-fade-enter-active {
-    transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
-  }
+}
 
-  .slide-fade-enter-from,
+.slide-fade-enter-from,
-  .slide-fade-leave-to {
+.slide-fade-leave-to {
-    position: absolute;
+  position: absolute;
-    transform: translateX(20px);
+  transform: translateX(20px);
-    opacity: 0;
+  opacity: 0;
-  }
+}
 
-  progress[value]::-webkit-progress-value {
+progress[value]::-webkit-progress-value {
-    transition: width 0.5s;
+  transition: width 0.5s;
-  }
+}
 </style>