UI consolidation
This commit is contained in:
Michael Freno
49
src/components/PageHead.tsx
Normal file
49
src/components/PageHead.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { Title, Meta, Link } from "@solidjs/meta";
|
||||
|
||||
export interface PageHeadProps {
|
||||
title: string;
|
||||
description?: string;
|
||||
ogImage?: string;
|
||||
ogTitle?: string;
|
||||
ogDescription?: string;
|
||||
canonical?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* PageHead component for consistent page metadata across the application.
|
||||
* Automatically appends " | Michael Freno" to the title.
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* <PageHead
|
||||
* title="Blog"
|
||||
* description="Technical blog posts about web development"
|
||||
* ogImage="https://example.com/og-image.jpg"
|
||||
* />
|
||||
* ```
|
||||
*/
|
||||
export default function PageHead(props: PageHeadProps) {
|
||||
const fullTitle = () => `${props.title} | Michael Freno`;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Title>{fullTitle()}</Title>
|
||||
{props.description && (
|
||||
<Meta name="description" content={props.description} />
|
||||
)}
|
||||
{props.canonical && <Link rel="canonical" href={props.canonical} />}
|
||||
|
||||
{/* Open Graph / Social Media Tags */}
|
||||
{(props.ogTitle || props.title) && (
|
||||
<Meta property="og:title" content={props.ogTitle || props.title} />
|
||||
)}
|
||||
{(props.ogDescription || props.description) && (
|
||||
<Meta
|
||||
property="og:description"
|
||||
content={props.ogDescription || props.description}
|
||||
/>
|
||||
)}
|
||||
{props.ogImage && <Meta property="og:image" content={props.ogImage} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import TagMaker from "~/components/blog/TagMaker";
|
||||
import AddAttachmentSection from "~/components/blog/AddAttachmentSection";
|
||||
import XCircle from "~/components/icons/XCircle";
|
||||
import AddImageToS3 from "~/lib/s3upload";
|
||||
import Input from "~/components/ui/Input";
|
||||
|
||||
interface PostFormProps {
|
||||
mode: "create" | "edit";
|
||||
@@ -435,32 +436,26 @@ export default function PostForm(props: PostFormProps) {
|
||||
<form onSubmit={handleSubmit} class="w-full max-w-full px-4">
|
||||
<div class="mx-auto w-full md:w-3/4 xl:w-1/2">
|
||||
{/* Title */}
|
||||
<div class="input-group mx-4">
|
||||
<input
|
||||
type="text"
|
||||
value={title()}
|
||||
onInput={(e) => setTitle(e.currentTarget.value)}
|
||||
name="title"
|
||||
placeholder=" "
|
||||
class="underlinedInput w-full bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">Title</label>
|
||||
</div>
|
||||
<Input
|
||||
type="text"
|
||||
value={title()}
|
||||
onInput={(e) => setTitle(e.currentTarget.value)}
|
||||
name="title"
|
||||
label="Title"
|
||||
containerClass="input-group mx-4"
|
||||
class="w-full"
|
||||
/>
|
||||
|
||||
{/* Subtitle */}
|
||||
<div class="input-group mx-4">
|
||||
<input
|
||||
type="text"
|
||||
value={subtitle()}
|
||||
onInput={(e) => setSubtitle(e.currentTarget.value)}
|
||||
name="subtitle"
|
||||
placeholder=" "
|
||||
class="underlinedInput w-full bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">Subtitle</label>
|
||||
</div>
|
||||
<Input
|
||||
type="text"
|
||||
value={subtitle()}
|
||||
onInput={(e) => setSubtitle(e.currentTarget.value)}
|
||||
name="subtitle"
|
||||
label="Subtitle"
|
||||
containerClass="input-group mx-4"
|
||||
class="w-full"
|
||||
/>
|
||||
|
||||
{/* Banner */}
|
||||
<div class="pt-8 text-center text-xl">Banner</div>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { JSX, splitProps, Show } from "solid-js";
|
||||
import LoadingSpinner from "~/components/LoadingSpinner";
|
||||
|
||||
export interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: "primary" | "secondary" | "danger" | "ghost";
|
||||
@@ -22,18 +23,28 @@ export default function Button(props: ButtonProps) {
|
||||
const size = () => local.size || "md";
|
||||
|
||||
const baseClasses =
|
||||
"flex justify-center items-center rounded font-semibold transition-all duration-300 ease-out disabled:opacity-50 disabled:cursor-not-allowed";
|
||||
"flex justify-center items-center rounded transition-all duration-300 ease-out";
|
||||
|
||||
const variantClasses = () => {
|
||||
const isDisabledOrLoading = local.disabled || local.loading;
|
||||
|
||||
switch (variant()) {
|
||||
case "primary":
|
||||
return "bg-blue-400 hover:bg-blue-500 active:scale-90 dark:bg-blue-600 dark:hover:bg-blue-700 text-white shadow-lg shadow-blue-300 dark:shadow-blue-700";
|
||||
return isDisabledOrLoading
|
||||
? "bg-blue cursor-not-allowed brightness-75"
|
||||
: "bg-blue hover:brightness-125 active:scale-90";
|
||||
case "secondary":
|
||||
return "bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white";
|
||||
return isDisabledOrLoading
|
||||
? "bg-surface0 cursor-not-allowed brightness-75"
|
||||
: "bg-surface0 hover:brightness-125 active:scale-90";
|
||||
case "danger":
|
||||
return "bg-red-500 hover:bg-red-600 active:scale-90 text-white shadow-lg shadow-red-300 dark:shadow-red-700";
|
||||
return isDisabledOrLoading
|
||||
? "bg-red cursor-not-allowed brightness-75"
|
||||
: "bg-red hover:brightness-125 active:scale-90";
|
||||
case "ghost":
|
||||
return "bg-transparent hover:bg-gray-100 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300";
|
||||
return isDisabledOrLoading
|
||||
? "cursor-not-allowed opacity-50"
|
||||
: "hover:brightness-125 active:scale-90";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
@@ -61,27 +72,7 @@ export default function Button(props: ButtonProps) {
|
||||
class={`${baseClasses} ${variantClasses()} ${sizeClasses()} ${widthClass()} ${local.class || ""}`}
|
||||
>
|
||||
<Show when={local.loading} fallback={local.children}>
|
||||
<svg
|
||||
class="mr-2 h-5 w-5 animate-spin"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
class="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="4"
|
||||
/>
|
||||
<path
|
||||
class="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
/>
|
||||
</svg>
|
||||
Loading...
|
||||
<LoadingSpinner height={24} width={24} />
|
||||
</Show>
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -4,6 +4,8 @@ export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
helperText?: string;
|
||||
containerClass?: string;
|
||||
ref?: HTMLInputElement | ((el: HTMLInputElement) => void);
|
||||
}
|
||||
|
||||
export default function Input(props: InputProps) {
|
||||
@@ -11,13 +13,16 @@ export default function Input(props: InputProps) {
|
||||
"label",
|
||||
"error",
|
||||
"helperText",
|
||||
"class"
|
||||
"class",
|
||||
"containerClass",
|
||||
"ref"
|
||||
]);
|
||||
|
||||
return (
|
||||
<div class="input-group">
|
||||
<div class={local.containerClass || "input-group"}>
|
||||
<input
|
||||
{...others}
|
||||
ref={local.ref}
|
||||
placeholder=" "
|
||||
class={`underlinedInput bg-transparent ${local.class || ""}`}
|
||||
aria-invalid={!!local.error}
|
||||
|
||||
65
src/components/ui/PasswordInput.tsx
Normal file
65
src/components/ui/PasswordInput.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import { JSX, splitProps, createSignal, Show } from "solid-js";
|
||||
import Input, { InputProps } from "./Input";
|
||||
import Eye from "~/components/icons/Eye";
|
||||
import EyeSlash from "~/components/icons/EyeSlash";
|
||||
import PasswordStrengthMeter from "~/components/PasswordStrengthMeter";
|
||||
|
||||
export interface PasswordInputProps extends Omit<InputProps, "type"> {
|
||||
showStrength?: boolean;
|
||||
defaultVisible?: boolean;
|
||||
passwordValue?: string;
|
||||
}
|
||||
|
||||
export default function PasswordInput(props: PasswordInputProps) {
|
||||
const [local, inputProps] = splitProps(props, [
|
||||
"showStrength",
|
||||
"defaultVisible",
|
||||
"passwordValue",
|
||||
"class",
|
||||
"containerClass"
|
||||
]);
|
||||
|
||||
const [showPassword, setShowPassword] = createSignal(
|
||||
local.defaultVisible || false
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class={local.containerClass || "input-group relative mx-4 mb-2"}>
|
||||
<Input
|
||||
{...inputProps}
|
||||
type={showPassword() ? "text" : "password"}
|
||||
class={`w-full pr-10 ${local.class || ""}`}
|
||||
containerClass=""
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword())}
|
||||
class="text-subtext0 absolute top-2 right-0 transition-all hover:brightness-125"
|
||||
aria-label={showPassword() ? "Hide password" : "Show password"}
|
||||
>
|
||||
<Show
|
||||
when={showPassword()}
|
||||
fallback={
|
||||
<EyeSlash
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Eye height={24} width={24} strokeWidth={1} class="stroke-text" />
|
||||
</Show>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{local.showStrength && local.passwordValue !== undefined && (
|
||||
<div class="px-4 pt-1">
|
||||
<PasswordStrengthMeter password={local.passwordValue} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -72,3 +72,32 @@ export function insertSoftHyphens(
|
||||
})
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
export function glitchText(
|
||||
originalText: string,
|
||||
setter: (text: string) => void,
|
||||
glitchInterval: number = 300,
|
||||
glitchLength: number = 80
|
||||
) {
|
||||
const glitchChars = "!@#$%^&*()_+-=[]{}|;':\",./<>?~`";
|
||||
|
||||
const interval = setInterval(() => {
|
||||
if (Math.random() > 0.9) {
|
||||
let glitched = "";
|
||||
for (let i = 0; i < originalText.length; i++) {
|
||||
if (Math.random() > 0.8) {
|
||||
glitched +=
|
||||
glitchChars[Math.floor(Math.random() * glitchChars.length)];
|
||||
} else {
|
||||
glitched += originalText[i];
|
||||
}
|
||||
}
|
||||
setter(glitched);
|
||||
|
||||
setTimeout(() => {
|
||||
setter(originalText);
|
||||
}, glitchLength);
|
||||
}
|
||||
}, glitchInterval);
|
||||
return interval;
|
||||
}
|
||||
|
||||
@@ -2,8 +2,6 @@ import { createSignal, Show, createEffect } from "solid-js";
|
||||
import { Title, Meta } from "@solidjs/meta";
|
||||
import { useNavigate, redirect, query, createAsync } from "@solidjs/router";
|
||||
import { getEvent } from "vinxi/http";
|
||||
import Eye from "~/components/icons/Eye";
|
||||
import EyeSlash from "~/components/icons/EyeSlash";
|
||||
import XCircle from "~/components/icons/XCircle";
|
||||
import GoogleLogo from "~/components/icons/GoogleLogo";
|
||||
import GitHub from "~/components/icons/GitHub";
|
||||
@@ -14,6 +12,9 @@ import { validatePassword, isValidEmail } from "~/lib/validation";
|
||||
import { TerminalSplash } from "~/components/TerminalSplash";
|
||||
import { VALIDATION_CONFIG } from "~/config";
|
||||
import { api } from "~/lib/api";
|
||||
import Input from "~/components/ui/Input";
|
||||
import PasswordInput from "~/components/ui/PasswordInput";
|
||||
import Button from "~/components/ui/Button";
|
||||
|
||||
import type { UserProfile } from "~/types/user";
|
||||
import PasswordStrengthMeter from "~/components/PasswordStrengthMeter";
|
||||
@@ -87,10 +88,6 @@ export default function AccountPage() {
|
||||
const [passwordDeletionError, setPasswordDeletionError] = createSignal(false);
|
||||
const [newPassword, setNewPassword] = createSignal("");
|
||||
|
||||
const [showOldPasswordInput, setShowOldPasswordInput] = createSignal(false);
|
||||
const [showPasswordInput, setShowPasswordInput] = createSignal(false);
|
||||
const [showPasswordConfInput, setShowPasswordConfInput] = createSignal(false);
|
||||
|
||||
const [showImageSuccess, setShowImageSuccess] = createSignal(false);
|
||||
const [showEmailSuccess, setShowEmailSuccess] = createSignal(false);
|
||||
const [showDisplayNameSuccess, setShowDisplayNameSuccess] =
|
||||
@@ -662,25 +659,19 @@ export default function AccountPage() {
|
||||
JavaScript required to update email
|
||||
</div>
|
||||
</noscript>
|
||||
<div class="input-group mx-4">
|
||||
<input
|
||||
ref={emailRef}
|
||||
type="email"
|
||||
required
|
||||
disabled={
|
||||
emailButtonLoading() ||
|
||||
(userProfile().email !== null &&
|
||||
!userProfile().emailVerified)
|
||||
}
|
||||
placeholder=" "
|
||||
title="Please enter a valid email address"
|
||||
class="underlinedInput bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">
|
||||
{userProfile().email ? "Update Email" : "Add Email"}
|
||||
</label>
|
||||
</div>
|
||||
<Input
|
||||
ref={emailRef}
|
||||
type="email"
|
||||
required
|
||||
disabled={
|
||||
emailButtonLoading() ||
|
||||
(userProfile().email !== null &&
|
||||
!userProfile().emailVerified)
|
||||
}
|
||||
title="Please enter a valid email address"
|
||||
label={userProfile().email ? "Update Email" : "Add Email"}
|
||||
containerClass="input-group mx-4"
|
||||
/>
|
||||
<Show
|
||||
when={
|
||||
userProfile().provider !== "email" &&
|
||||
@@ -739,22 +730,15 @@ export default function AccountPage() {
|
||||
JavaScript required to update display name
|
||||
</div>
|
||||
</noscript>
|
||||
<div class="input-group mx-4">
|
||||
<input
|
||||
ref={displayNameRef}
|
||||
type="text"
|
||||
required
|
||||
disabled={displayNameButtonLoading()}
|
||||
placeholder=" "
|
||||
title="Please enter your display name"
|
||||
class="underlinedInput bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">
|
||||
Set {userProfile().displayName ? "New " : ""}Display
|
||||
Name
|
||||
</label>
|
||||
</div>
|
||||
<Input
|
||||
ref={displayNameRef}
|
||||
type="text"
|
||||
required
|
||||
disabled={displayNameButtonLoading()}
|
||||
title="Please enter your display name"
|
||||
label={`Set ${userProfile().displayName ? "New " : ""}Display Name`}
|
||||
containerClass="input-group mx-4"
|
||||
/>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
@@ -806,136 +790,40 @@ export default function AccountPage() {
|
||||
</Show>
|
||||
|
||||
<Show when={userProfile().hasPassword}>
|
||||
<div class="input-group relative mx-4 mb-6">
|
||||
<input
|
||||
ref={oldPasswordRef}
|
||||
type={showOldPasswordInput() ? "text" : "password"}
|
||||
required
|
||||
minlength={VALIDATION_CONFIG.MIN_PASSWORD_LENGTH}
|
||||
disabled={passwordChangeLoading()}
|
||||
placeholder=" "
|
||||
title="Password must be at least 8 characters"
|
||||
class="underlinedInput w-full bg-transparent pr-10"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">Old Password</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setShowOldPasswordInput(!showOldPasswordInput())
|
||||
}
|
||||
class="text-subtext0 absolute top-2 right-0 transition-all hover:brightness-125"
|
||||
>
|
||||
<Show
|
||||
when={showOldPasswordInput()}
|
||||
fallback={
|
||||
<EyeSlash
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Eye
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
</Show>
|
||||
</button>
|
||||
</div>
|
||||
<PasswordInput
|
||||
ref={oldPasswordRef}
|
||||
required
|
||||
minlength={VALIDATION_CONFIG.MIN_PASSWORD_LENGTH}
|
||||
disabled={passwordChangeLoading()}
|
||||
title="Password must be at least 8 characters"
|
||||
label="Old Password"
|
||||
containerClass="input-group relative mx-4 mb-6"
|
||||
/>
|
||||
</Show>
|
||||
|
||||
<div class="input-group relative mx-4 mb-2">
|
||||
<input
|
||||
ref={newPasswordRef}
|
||||
type={showPasswordInput() ? "text" : "password"}
|
||||
required
|
||||
minlength="8"
|
||||
onInput={handleNewPasswordChange}
|
||||
onBlur={handlePasswordBlur}
|
||||
disabled={passwordChangeLoading()}
|
||||
placeholder=" "
|
||||
title="Password must be at least 8 characters"
|
||||
class="underlinedInput w-full bg-transparent pr-10"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">New Password</label>
|
||||
<div class="pt-1">
|
||||
<PasswordStrengthMeter password={newPassword()} />
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setShowPasswordInput(!showPasswordInput())
|
||||
}
|
||||
class="text-subtext0 absolute top-2 right-0 transition-all hover:brightness-125"
|
||||
>
|
||||
<Show
|
||||
when={showPasswordInput()}
|
||||
fallback={
|
||||
<EyeSlash
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Eye
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
</Show>
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-group relative mx-4 mb-2">
|
||||
<input
|
||||
ref={newPasswordConfRef}
|
||||
type={showPasswordConfInput() ? "text" : "password"}
|
||||
required
|
||||
minlength="8"
|
||||
onInput={handlePasswordConfChange}
|
||||
disabled={passwordChangeLoading()}
|
||||
placeholder=" "
|
||||
title="Password must be at least 8 characters"
|
||||
class="underlinedInput w-full bg-transparent pr-10"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">
|
||||
New Password Confirmation
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
setShowPasswordConfInput(!showPasswordConfInput())
|
||||
}
|
||||
class="text-subtext0 absolute top-2 right-0 transition-all hover:brightness-125"
|
||||
>
|
||||
<Show
|
||||
when={showPasswordConfInput()}
|
||||
fallback={
|
||||
<EyeSlash
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Eye
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
</Show>
|
||||
</button>
|
||||
</div>
|
||||
<PasswordInput
|
||||
ref={newPasswordRef}
|
||||
required
|
||||
minlength="8"
|
||||
onInput={handleNewPasswordChange}
|
||||
onBlur={handlePasswordBlur}
|
||||
disabled={passwordChangeLoading()}
|
||||
title="Password must be at least 8 characters"
|
||||
label="New Password"
|
||||
showStrength
|
||||
passwordValue={newPassword()}
|
||||
containerClass="input-group relative mx-4 mb-2"
|
||||
/>
|
||||
<PasswordInput
|
||||
ref={newPasswordConfRef}
|
||||
required
|
||||
minlength="8"
|
||||
onInput={handlePasswordConfChange}
|
||||
disabled={passwordChangeLoading()}
|
||||
title="Password must be at least 8 characters"
|
||||
label="New Password Confirmation"
|
||||
containerClass="input-group relative mx-4 mb-2"
|
||||
/>
|
||||
|
||||
<Show
|
||||
when={
|
||||
@@ -1039,22 +927,15 @@ export default function AccountPage() {
|
||||
>
|
||||
<form onSubmit={deleteAccountTrigger}>
|
||||
<div class="flex w-full justify-center">
|
||||
<div class="input-group delete mx-4">
|
||||
<input
|
||||
ref={deleteAccountPasswordRef}
|
||||
type="password"
|
||||
required
|
||||
minlength={VALIDATION_CONFIG.MIN_PASSWORD_LENGTH}
|
||||
disabled={deleteAccountButtonLoading()}
|
||||
placeholder=" "
|
||||
title="Enter your password to confirm account deletion"
|
||||
class="underlinedInput bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">
|
||||
Enter Password
|
||||
</label>
|
||||
</div>
|
||||
<PasswordInput
|
||||
ref={deleteAccountPasswordRef}
|
||||
required
|
||||
minlength={VALIDATION_CONFIG.MIN_PASSWORD_LENGTH}
|
||||
disabled={deleteAccountButtonLoading()}
|
||||
title="Enter your password to confirm account deletion"
|
||||
label="Enter Password"
|
||||
containerClass="input-group delete mx-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
|
||||
@@ -852,3 +852,6 @@ pre {
|
||||
scrollbar-color: var(--color-text) transparent;
|
||||
}
|
||||
}
|
||||
img {
|
||||
max-height: 50vh !important;
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ import { getClientCookie, setClientCookie } from "~/lib/cookies.client";
|
||||
import CountdownCircleTimer from "~/components/CountdownCircleTimer";
|
||||
import LoadingSpinner from "~/components/LoadingSpinner";
|
||||
import RevealDropDown from "~/components/RevealDropDown";
|
||||
import Input from "~/components/ui/Input";
|
||||
import type { UserProfile } from "~/types/user";
|
||||
import { getCookie, setCookie } from "vinxi/http";
|
||||
import { z } from "zod";
|
||||
@@ -379,32 +380,26 @@ export default function ContactPage() {
|
||||
>
|
||||
<div class="flex w-full flex-col justify-evenly">
|
||||
<div class="mx-auto w-full justify-evenly md:flex md:flex-row">
|
||||
<div class="input-group md:mx-4">
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
name="name"
|
||||
value={user()?.displayName ?? ""}
|
||||
placeholder=" "
|
||||
title="Please enter your name"
|
||||
class="underlinedInput w-full bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">Name</label>
|
||||
</div>
|
||||
<div class="input-group md:mx-4">
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
name="email"
|
||||
value={user()?.email ?? ""}
|
||||
placeholder=" "
|
||||
title="Please enter a valid email address"
|
||||
class="underlinedInput w-full bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">Email</label>
|
||||
</div>
|
||||
<Input
|
||||
type="text"
|
||||
required
|
||||
name="name"
|
||||
value={user()?.displayName ?? ""}
|
||||
title="Please enter your name"
|
||||
label="Name"
|
||||
containerClass="input-group md:mx-4"
|
||||
class="w-full"
|
||||
/>
|
||||
<Input
|
||||
type="email"
|
||||
required
|
||||
name="email"
|
||||
value={user()?.email ?? ""}
|
||||
title="Please enter a valid email address"
|
||||
label="Email"
|
||||
containerClass="input-group md:mx-4"
|
||||
class="w-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="mx-auto w-full pt-6 md:pt-12">
|
||||
<div class="textarea-group">
|
||||
|
||||
@@ -2,9 +2,29 @@ import { Title, Meta } from "@solidjs/meta";
|
||||
import { A } from "@solidjs/router";
|
||||
import { createSignal, onMount, onCleanup } from "solid-js";
|
||||
import DownloadOnAppStore from "~/components/icons/DownloadOnAppStore";
|
||||
import { glitchText } from "~/lib/client-utils";
|
||||
|
||||
const DownloadButton = ({
|
||||
onClick,
|
||||
children
|
||||
}: {
|
||||
onClick: () => void;
|
||||
children: Element | string;
|
||||
}) => {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
class="bg-green hover:bg-green/90 cursor-pointer rounded-md px-6 py-3 font-mono text-base font-semibold shadow-lg transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
||||
>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default function DownloadsPage() {
|
||||
const [glitchText, setGlitchText] = createSignal("$ downloads");
|
||||
const [LaLText, setLaLText] = createSignal("Life and Lineage");
|
||||
const [SwAText, setSwAText] = createSignal("Shapes with Abigail!");
|
||||
const [corkText, setCorkText] = createSignal("Cork");
|
||||
|
||||
const download = (assetName: string) => {
|
||||
fetch(`/api/downloads/public/${assetName}`)
|
||||
@@ -17,30 +37,14 @@ export default function DownloadsPage() {
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
const originalText = "$ downloads";
|
||||
const glitchChars = "!@#$%^&*()_+-=[]{}|;':\",./<>?~`";
|
||||
|
||||
const glitchInterval = setInterval(() => {
|
||||
if (Math.random() > 0.9) {
|
||||
let glitched = "";
|
||||
for (let i = 0; i < originalText.length; i++) {
|
||||
if (Math.random() > 0.8) {
|
||||
glitched +=
|
||||
glitchChars[Math.floor(Math.random() * glitchChars.length)];
|
||||
} else {
|
||||
glitched += originalText[i];
|
||||
}
|
||||
}
|
||||
setGlitchText(glitched);
|
||||
|
||||
setTimeout(() => {
|
||||
setGlitchText(originalText);
|
||||
}, 80);
|
||||
}
|
||||
}, 300);
|
||||
const lalInterval = glitchText(LaLText(), setLaLText);
|
||||
const swaInterval = glitchText(SwAText(), setSwAText);
|
||||
const corkInterval = glitchText(corkText(), setCorkText);
|
||||
|
||||
onCleanup(() => {
|
||||
clearInterval(glitchInterval);
|
||||
clearInterval(lalInterval);
|
||||
clearInterval(swaInterval);
|
||||
clearInterval(corkInterval);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -65,18 +69,11 @@ export default function DownloadsPage() {
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="text-text mb-12 font-mono text-3xl tracking-wider">
|
||||
<span class="text-green">freno@downloads</span>
|
||||
<span class="text-subtext1">:</span>
|
||||
<span class="text-blue">~</span>
|
||||
<span class="text-subtext1 ml-2">{glitchText()}</span>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-5xl space-y-16">
|
||||
{/* Life and Lineage */}
|
||||
<div class="border-overlay0 rounded-lg border p-6 md:p-8">
|
||||
<h2 class="text-text mb-6 font-mono text-2xl">
|
||||
<span class="text-yellow">{">"}</span> Life and Lineage
|
||||
<span class="text-yellow">{">"}</span> {LaLText()}
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col gap-8 md:flex-row md:justify-around">
|
||||
@@ -84,12 +81,9 @@ export default function DownloadsPage() {
|
||||
<span class="text-subtext0 font-mono text-sm">
|
||||
platform: android
|
||||
</span>
|
||||
<button
|
||||
onClick={() => download("lineage")}
|
||||
class="bg-green hover:bg-green/90 rounded-md px-6 py-3 font-mono text-base font-semibold shadow-lg transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
||||
>
|
||||
<DownloadButton onClick={() => download("lineage")}>
|
||||
download.apk
|
||||
</button>
|
||||
</DownloadButton>
|
||||
<span class="text-subtext1 max-w-xs text-center text-xs italic">
|
||||
# android build not optimized
|
||||
</span>
|
||||
@@ -112,7 +106,7 @@ export default function DownloadsPage() {
|
||||
{/* Shapes with Abigail */}
|
||||
<div class="border-overlay0 rounded-lg border p-6 md:p-8">
|
||||
<h2 class="text-text mb-6 font-mono text-2xl">
|
||||
<span class="text-yellow">{">"}</span> Shapes with Abigail!
|
||||
<span class="text-yellow">{">"}</span> {SwAText()}
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col gap-8 md:flex-row md:justify-around">
|
||||
@@ -120,12 +114,11 @@ export default function DownloadsPage() {
|
||||
<span class="text-subtext0 font-mono text-sm">
|
||||
platform: android
|
||||
</span>
|
||||
<button
|
||||
<DownloadButton
|
||||
onClick={() => download("shapes-with-abigail")}
|
||||
class="bg-green hover:bg-green/90 rounded-md px-6 py-3 font-mono text-base font-semibold shadow-lg transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
||||
>
|
||||
download.apk
|
||||
</button>
|
||||
</DownloadButton>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
@@ -145,19 +138,16 @@ export default function DownloadsPage() {
|
||||
{/* Cork */}
|
||||
<div class="border-overlay0 rounded-lg border p-6 md:p-8">
|
||||
<h2 class="text-text mb-6 font-mono text-2xl">
|
||||
<span class="text-yellow">{">"}</span> Cork
|
||||
<span class="text-yellow">{">"}</span> {corkText()}
|
||||
</h2>
|
||||
|
||||
<div class="flex flex-col items-center gap-3">
|
||||
<span class="text-subtext0 font-mono text-sm">
|
||||
platform: macOS (13+)
|
||||
</span>
|
||||
<button
|
||||
onClick={() => download("cork")}
|
||||
class="bg-green hover:bg-green/90 rounded-md px-6 py-3 font-mono text-base font-semibold shadow-lg transition-all duration-200 ease-out hover:scale-105 active:scale-95"
|
||||
>
|
||||
<DownloadButton onClick={() => download("cork")}>
|
||||
download.zip
|
||||
</button>
|
||||
</DownloadButton>
|
||||
<span class="text-subtext1 text-xs">
|
||||
# unzip → drag to /Applications
|
||||
</span>
|
||||
|
||||
@@ -10,14 +10,14 @@ import { Title, Meta } from "@solidjs/meta";
|
||||
import { getEvent } from "vinxi/http";
|
||||
import GoogleLogo from "~/components/icons/GoogleLogo";
|
||||
import GitHub from "~/components/icons/GitHub";
|
||||
import Eye from "~/components/icons/Eye";
|
||||
import EyeSlash from "~/components/icons/EyeSlash";
|
||||
import CountdownCircleTimer from "~/components/CountdownCircleTimer";
|
||||
import PasswordStrengthMeter from "~/components/PasswordStrengthMeter";
|
||||
import { isValidEmail, validatePassword } from "~/lib/validation";
|
||||
import { getClientCookie } from "~/lib/cookies.client";
|
||||
import { env } from "~/env/client";
|
||||
import { VALIDATION_CONFIG, COUNTDOWN_CONFIG } from "~/config";
|
||||
import Input from "~/components/ui/Input";
|
||||
import PasswordInput from "~/components/ui/PasswordInput";
|
||||
|
||||
const checkAuth = query(async () => {
|
||||
"use server";
|
||||
@@ -49,8 +49,6 @@ export default function LoginPage() {
|
||||
const [emailSent, setEmailSent] = createSignal(false);
|
||||
const [showPasswordError, setShowPasswordError] = createSignal(false);
|
||||
const [showPasswordSuccess, setShowPasswordSuccess] = createSignal(false);
|
||||
const [showPasswordInput, setShowPasswordInput] = createSignal(false);
|
||||
const [showPasswordConfInput, setShowPasswordConfInput] = createSignal(false);
|
||||
const [passwordsMatch, setPasswordsMatch] = createSignal(false);
|
||||
const [password, setPassword] = createSignal("");
|
||||
const [passwordConf, setPasswordConf] = createSignal("");
|
||||
@@ -402,116 +400,47 @@ export default function LoginPage() {
|
||||
|
||||
<form onSubmit={formHandler} class="flex flex-col px-2 py-4">
|
||||
<div class="flex justify-center">
|
||||
<div class="input-group mx-4">
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
ref={emailRef}
|
||||
placeholder=" "
|
||||
title="Please enter a valid email address"
|
||||
class="underlinedInput bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">Email</label>
|
||||
</div>
|
||||
<Input
|
||||
type="email"
|
||||
required
|
||||
ref={emailRef}
|
||||
title="Please enter a valid email address"
|
||||
label="Email"
|
||||
containerClass="input-group mx-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Show when={usePassword() || register()}>
|
||||
<div class="-mt-4 flex justify-center">
|
||||
<div class="input-group mx-4 flex">
|
||||
<input
|
||||
type={showPasswordInput() ? "text" : "password"}
|
||||
required
|
||||
minLength={8}
|
||||
ref={passwordRef}
|
||||
onInput={register() ? handlePasswordChange : undefined}
|
||||
placeholder=" "
|
||||
title="Password must be at least 8 characters"
|
||||
class="underlinedInput bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">Password</label>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowPasswordInput(!showPasswordInput());
|
||||
passwordRef?.focus();
|
||||
}}
|
||||
class="absolute mt-14 ml-60"
|
||||
type="button"
|
||||
>
|
||||
<Show
|
||||
when={showPasswordInput()}
|
||||
fallback={
|
||||
<EyeSlash
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Eye
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
</Show>
|
||||
</button>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={register()}>
|
||||
<div class="mx-auto flex justify-center px-4 py-2">
|
||||
<PasswordStrengthMeter password={password()} />
|
||||
<PasswordInput
|
||||
required
|
||||
minLength={8}
|
||||
ref={passwordRef}
|
||||
onInput={register() ? handlePasswordChange : undefined}
|
||||
title="Password must be at least 8 characters"
|
||||
label="Password"
|
||||
containerClass="input-group mx-4 flex"
|
||||
showStrength={register()}
|
||||
passwordValue={register() ? password() : undefined}
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={register()}>
|
||||
<div class="flex justify-center">
|
||||
<div class="input-group mx-4">
|
||||
<input
|
||||
type={showPasswordConfInput() ? "text" : "password"}
|
||||
required
|
||||
minLength={8}
|
||||
ref={passwordConfRef}
|
||||
onInput={handlePasswordConfChange}
|
||||
placeholder=" "
|
||||
title="Password must be at least 8 characters and match the password above"
|
||||
class="underlinedInput bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">Confirm Password</label>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
setShowPasswordConfInput(!showPasswordConfInput());
|
||||
passwordConfRef?.focus();
|
||||
}}
|
||||
class="absolute mt-14 ml-60"
|
||||
type="button"
|
||||
>
|
||||
<Show
|
||||
when={showPasswordConfInput()}
|
||||
fallback={
|
||||
<EyeSlash
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Eye
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
</Show>
|
||||
</button>
|
||||
<PasswordInput
|
||||
required
|
||||
minLength={8}
|
||||
ref={passwordConfRef}
|
||||
onInput={handlePasswordConfChange}
|
||||
title="Password must be at least 8 characters and match the password above"
|
||||
label="Confirm Password"
|
||||
containerClass="input-group mx-4"
|
||||
/>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<Show when={register()}>
|
||||
<div
|
||||
class={`${
|
||||
!passwordsMatch() &&
|
||||
|
||||
@@ -2,11 +2,11 @@ import { createSignal, createEffect, Show } from "solid-js";
|
||||
import { A, useNavigate, useSearchParams } from "@solidjs/router";
|
||||
import { Title, Meta } from "@solidjs/meta";
|
||||
import CountdownCircleTimer from "~/components/CountdownCircleTimer";
|
||||
import Eye from "~/components/icons/Eye";
|
||||
import EyeSlash from "~/components/icons/EyeSlash";
|
||||
import { validatePassword } from "~/lib/validation";
|
||||
import { api } from "~/lib/api";
|
||||
import { VALIDATION_CONFIG, COUNTDOWN_CONFIG } from "~/config";
|
||||
import PasswordInput from "~/components/ui/PasswordInput";
|
||||
import PasswordStrengthMeter from "~/components/PasswordStrengthMeter";
|
||||
|
||||
export default function PasswordResetPage() {
|
||||
const navigate = useNavigate();
|
||||
@@ -22,8 +22,7 @@ export default function PasswordResetPage() {
|
||||
const [showRequestNewEmail, setShowRequestNewEmail] = createSignal(false);
|
||||
const [countDown, setCountDown] = createSignal(false);
|
||||
const [error, setError] = createSignal("");
|
||||
const [showPasswordInput, setShowPasswordInput] = createSignal(false);
|
||||
const [showPasswordConfInput, setShowPasswordConfInput] = createSignal(false);
|
||||
const [newPassword, setNewPassword] = createSignal("");
|
||||
|
||||
let newPasswordRef: HTMLInputElement | undefined;
|
||||
let newPasswordConfRef: HTMLInputElement | undefined;
|
||||
@@ -121,6 +120,7 @@ export default function PasswordResetPage() {
|
||||
|
||||
const handleNewPasswordChange = (e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
setNewPassword(target.value);
|
||||
checkPasswordLength(target.value);
|
||||
if (newPasswordConfRef) {
|
||||
checkForMatch(target.value, newPasswordConfRef.value);
|
||||
@@ -169,49 +169,19 @@ export default function PasswordResetPage() {
|
||||
>
|
||||
<div class="flex w-full max-w-md flex-col justify-center px-4">
|
||||
<div class="flex justify-center">
|
||||
<div class="input-group mx-4 flex">
|
||||
<input
|
||||
ref={newPasswordRef}
|
||||
name="newPassword"
|
||||
type={showPasswordInput() ? "text" : "password"}
|
||||
required
|
||||
autofocus
|
||||
onInput={handleNewPasswordChange}
|
||||
onBlur={handlePasswordBlur}
|
||||
disabled={passwordChangeLoading()}
|
||||
placeholder=" "
|
||||
class="underlinedInput bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">New Password</label>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowPasswordInput(!showPasswordInput());
|
||||
newPasswordRef?.focus();
|
||||
}}
|
||||
class="absolute mt-14 ml-60"
|
||||
>
|
||||
<Show
|
||||
when={showPasswordInput()}
|
||||
fallback={
|
||||
<EyeSlash
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Eye
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
</Show>
|
||||
</button>
|
||||
<PasswordInput
|
||||
ref={newPasswordRef}
|
||||
name="newPassword"
|
||||
required
|
||||
autofocus
|
||||
onInput={handleNewPasswordChange}
|
||||
onBlur={handlePasswordBlur}
|
||||
disabled={passwordChangeLoading()}
|
||||
label="New Password"
|
||||
containerClass="input-group mx-4 flex"
|
||||
showStrength
|
||||
passwordValue={newPassword()}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
@@ -224,49 +194,15 @@ export default function PasswordResetPage() {
|
||||
</div>
|
||||
|
||||
<div class="-mt-4 flex justify-center">
|
||||
<div class="input-group mx-4 flex">
|
||||
<input
|
||||
ref={newPasswordConfRef}
|
||||
name="newPasswordConf"
|
||||
onInput={handlePasswordConfChange}
|
||||
type={showPasswordConfInput() ? "text" : "password"}
|
||||
required
|
||||
disabled={passwordChangeLoading()}
|
||||
placeholder=" "
|
||||
class="underlinedInput bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">
|
||||
Password Confirmation
|
||||
</label>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setShowPasswordConfInput(!showPasswordConfInput());
|
||||
newPasswordConfRef?.focus();
|
||||
}}
|
||||
class="absolute mt-14 ml-60"
|
||||
>
|
||||
<Show
|
||||
when={showPasswordConfInput()}
|
||||
fallback={
|
||||
<EyeSlash
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Eye
|
||||
height={24}
|
||||
width={24}
|
||||
strokeWidth={1}
|
||||
class="stroke-text"
|
||||
/>
|
||||
</Show>
|
||||
</button>
|
||||
<PasswordInput
|
||||
ref={newPasswordConfRef}
|
||||
name="newPasswordConf"
|
||||
onInput={handlePasswordConfChange}
|
||||
required
|
||||
disabled={passwordChangeLoading()}
|
||||
label="Password Confirmation"
|
||||
containerClass="input-group mx-4 flex"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
@@ -5,6 +5,7 @@ import CountdownCircleTimer from "~/components/CountdownCircleTimer";
|
||||
import { isValidEmail } from "~/lib/validation";
|
||||
import { getClientCookie } from "~/lib/cookies.client";
|
||||
import { COUNTDOWN_CONFIG } from "~/config";
|
||||
import Input from "~/components/ui/Input";
|
||||
|
||||
export default function RequestPasswordResetPage() {
|
||||
const navigate = useNavigate();
|
||||
@@ -136,20 +137,17 @@ export default function RequestPasswordResetPage() {
|
||||
class="mt-4 flex w-full justify-center"
|
||||
>
|
||||
<div class="flex flex-col justify-center">
|
||||
<div class="input-group mx-4">
|
||||
<input
|
||||
ref={emailRef}
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
disabled={loading()}
|
||||
placeholder=" "
|
||||
title="Please enter a valid email address"
|
||||
class="underlinedInput w-full bg-transparent"
|
||||
/>
|
||||
<span class="bar"></span>
|
||||
<label class="underlinedInputLabel">Enter Email</label>
|
||||
</div>
|
||||
<Input
|
||||
ref={emailRef}
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
disabled={loading()}
|
||||
title="Please enter a valid email address"
|
||||
label="Enter Email"
|
||||
containerClass="input-group mx-4"
|
||||
class="w-full"
|
||||
/>
|
||||
|
||||
<Show
|
||||
when={countDown() > 0}
|
||||
|
||||
Reference in New Issue
Block a user