brr

Author: Miodec

frontend/src/ts/components/pages/login/Login.tsx

@@ -72,7 +72,7 @@ export function Login(): JSXElement {
   };
 
   return (
-    <div class="grid grid-cols-1 justify-center gap-2">
+    <div class="grid w-full grid-cols-1 justify-center gap-2 sm:w-80">
       <div class="inline-flex items-baseline text-sub">
         <i class="fas fa-sign-in-alt mr-[0.5em]"></i>
         login
@@ -98,7 +98,6 @@ export function Login(): JSXElement {
         <input
           name="current-email"
           type="email"
-          class="w-68"
           placeholder="email"
           // oxlint-disable-next-line react/no-unknown-property
           autocomplete="current-email"
@@ -108,7 +107,6 @@ export function Login(): JSXElement {
         <input
           name="current-password"
           type="password"
-          class="w-68"
           placeholder="password"
           // oxlint-disable-next-line react/no-unknown-property
           autocomplete="current-password"

frontend/src/ts/components/pages/login/LoginPage.tsx

@@ -32,7 +32,7 @@ export function LoginPage(): JSXElement {
           </div>
         }
         else={
-          <div class="flex h-full items-center justify-around gap-4">
+          <div class="flex h-full flex-col items-center justify-around gap-4 md:flex-row">
             <Register />
             <Login />
           </div>

frontend/src/ts/components/pages/login/Register.tsx

@@ -108,7 +108,7 @@ export function Register(): JSXElement {
   };
 
   return (
-    <div class="grid grid-cols-1 justify-center gap-2">
+    <div class="grid w-full grid-cols-1 justify-center gap-2 sm:w-80">
       <div class="inline-flex items-baseline text-sub">
         <i class="fas fa-user-plus mr-[0.5em]"></i>
         register
@@ -122,7 +122,6 @@ export function Register(): JSXElement {
       >
         <ValidatedInput
           type="text"
-          class="w-68"
           placeholder="username"
           autocomplete="new-username"
           schema={UserNameSchema}
@@ -140,7 +139,6 @@ export function Register(): JSXElement {
         />
         <ValidatedInput
           type="email"
-          class="w-68"
           placeholder="email"
           autocomplete="new-email"
           schema={UserEmailSchema}
@@ -166,7 +164,6 @@ export function Register(): JSXElement {
         />
         <ValidatedInput
           type="email"
-          class="w-68"
           placeholder="verify email"
           autocomplete="verify-email"
           // oxlint-disable-next-line solid/reactivity
@@ -177,13 +174,13 @@ export function Register(): JSXElement {
           }
           disabled={!getLoginPageInputsEnabled()}
           debounceDelay={0}
+          revalidateOn={emailValue}
           callback={(result: ValidationResult) => {
             setEmailVerifyValid(emailValid() && result.success);
           }}
         />
         <ValidatedInput
           type="password"
-          class="w-68"
           placeholder="password"
           autocomplete="new-password"
           name="new-password"
@@ -196,7 +193,6 @@ export function Register(): JSXElement {
         />
         <ValidatedInput
           type="password"
-          class="w-68"
           placeholder="verify password"
           autocomplete="verify-password"
           disabled={!getLoginPageInputsEnabled()}
@@ -208,6 +204,7 @@ export function Register(): JSXElement {
               : "verify password not matching password"
           }
           debounceDelay={0}
+          revalidateOn={passwordValue}
           callback={(result: ValidationResult) => {
             setPasswordVerifyValid(passwordValid() && result.success);
           }}

frontend/src/ts/components/ui/ValidatedInput.tsx

@@ -2,6 +2,7 @@ import {
   splitProps,
   createEffect,
   JSXElement,
+  on,
   onCleanup,
   onMount,
 } from "solid-js";
@@ -23,6 +24,7 @@ export function ValidatedInput<T = string>(
     onInput?: (value: T) => void;
     onFocus?: () => void;
     disabled?: boolean;
+    revalidateOn?: () => unknown;
   },
 ): JSXElement {
   // Refs are assigned by SolidJS via the ref attribute
@@ -46,6 +48,7 @@ export function ValidatedInput<T = string>(
       "autocomplete",
       "name",
       "onFocus",
+      "revalidateOn",
     ]);
     validatedInput = new ValidatedHtmlInputElement(
       element,
@@ -54,20 +57,37 @@ export function ValidatedInput<T = string>(
     validatedInput.setValue(props.value ?? null);
   });
 
-  onCleanup(() => validatedInput?.remove());
+  createEffect(
+    on(
+      () => props.revalidateOn?.(),
+      () => {
+        if (validatedInput && inputEl()?.getValue() !== "") {
+          validatedInput.triggerValidation();
+        }
+      },
+      { defer: true },
+    ),
+  );
+
+  onCleanup(() => {
+    validatedInput?.destroy();
+  });
+
   return (
-    <input
-      ref={inputRef}
-      type={props.type ?? "text"}
-      class={props.class}
-      placeholder={props.placeholder}
-      value={props.value ?? ""}
-      disabled={props.disabled}
-      // oxlint-disable-next-line react/no-unknown-property
-      autocomplete={props.autocomplete}
-      name={props.name}
-      onInput={(e) => props.onInput?.(e.target.value as T)}
-      onFocus={() => props.onFocus?.()}
-    />
+    <div class="inputAndIndicator">
+      <input
+        ref={inputRef}
+        type={props.type ?? "text"}
+        class={props.class}
+        placeholder={props.placeholder}
+        value={props.value ?? ""}
+        disabled={props.disabled}
+        // oxlint-disable-next-line react/no-unknown-property
+        autocomplete={props.autocomplete}
+        name={props.name}
+        onInput={(e) => props.onInput?.(e.target.value as T)}
+        onFocus={() => props.onFocus?.()}
+      />
+    </div>
   );
 }

frontend/src/ts/elements/input-indicator.ts

@@ -18,10 +18,17 @@ export class InputIndicator {
     options: Record<string, InputIndicatorOption>,
   ) {
     this.inputElement = inputElement;
-    const wrapper = this.inputElement.wrapWith(
-      `<div class="inputAndIndicator"></div>`,
-    );
-    this.parentElement = wrapper;
+    const existingWrapper = inputElement.native.closest(".inputAndIndicator");
+    if (existingWrapper) {
+      existingWrapper.querySelector(".statusIndicator")?.remove();
+      this.parentElement = new ElementWithUtils(
+        existingWrapper as HTMLInputElement,
+      );
+    } else {
+      this.parentElement = this.inputElement.wrapWith(
+        `<div class="inputAndIndicator"></div>`,
+      );
+    }
     this.options = options;
     this.currentStatus = null;
 

frontend/src/ts/elements/input-validation.ts

@@ -234,6 +234,11 @@ export class ValidatedHtmlInputElement<
   triggerValidation(): void {
     this.dispatch("input");
   }
+
+  destroy(): void {
+    this.indicator.hide();
+    this.remove();
+  }
 }
 
 export type ConfigInputOptions<K extends ConfigKey, T = ConfigType[K]> = {