@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/ui/components/nordman-login/nordman-login.css

@@ -0,0 +1,195 @@
+.nm-login {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  min-height: 100dvh;
+  overflow: clip;
+  background: var(--nm-canvas);
+  color: var(--nm-fg);
+  font-family: var(--nm-font);
+}
+
+.nm-login__visual {
+  display: grid;
+  place-items: center;
+  height: 100dvh;
+  min-height: 100dvh;
+}
+
+.nm-login .glow i,
+.nm-login .glow.gl i {
+  background: var(--nm-canvas);
+}
+
+.nm-login__panel {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  place-items: center;
+  padding: var(--nm-gap-block) var(--nm-page-x);
+}
+
+.nm-login__stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nm-gap-block);
+  width: min(100%, var(--nm-login-form));
+}
+
+.nm-login__title {
+  margin: 0;
+  text-align: center;
+  font-size: var(--nm-type-section);
+  font-weight: var(--nm-weight-medium);
+  line-height: var(--nm-leading-tight);
+}
+
+.nm-login__error {
+  margin: 0;
+  color: var(--nm-fg);
+  border: var(--nm-rule) solid var(--nm-line-strong);
+  border-radius: var(--nm-control-r);
+  padding: var(--control-px);
+  font-size: var(--control-fs);
+}
+
+.nm-login__form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nm-gap-copy);
+}
+
+.nm-login__field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--field-label-gap);
+}
+
+.nm-login__label-row {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--nm-gap-copy);
+}
+
+.nm-login__label,
+.nm-login__forgot,
+.nm-login__switch {
+  margin: 0;
+  font-size: var(--field-label-fs);
+  color: var(--nm-fg-subtle);
+}
+
+.nm-login__control-wrap {
+  position: relative;
+}
+
+.nm-login__control {
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--nm-field-h);
+  padding: 0 var(--control-px);
+  border: var(--nm-rule) solid var(--nm-line-strong);
+  border-radius: var(--nm-control-r);
+  background: var(--nm-raised);
+  color: var(--nm-fg);
+  font: inherit;
+  font-size: var(--control-fs);
+}
+
+.nm-login__control:focus {
+  border-color: var(--nm-stroke);
+  outline: none;
+}
+
+.nm-login__control--secret {
+  padding-inline-end: var(--nm-login-reveal);
+}
+
+.nm-login__reveal {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  display: grid;
+  place-items: center;
+  width: var(--nm-login-reveal);
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--nm-fg-muted);
+  cursor: pointer;
+}
+
+.nm-login__reveal-icon {
+  width: var(--nm-icon-button);
+  height: var(--nm-icon-button);
+}
+
+.nm-login__notice {
+  margin: 0;
+  color: var(--nm-fg-muted);
+  font-size: var(--nm-type-spec);
+  text-align: center;
+}
+
+.nm-login__control::placeholder {
+  color: var(--nm-stroke);
+}
+
+.nm-login__submit {
+  margin-top: var(--nm-gap-copy);
+}
+
+.nm-login__switch {
+  text-align: center;
+}
+
+.nm-login__forgot,
+.nm-login__switch-action {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--nm-fg);
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.nm-login__skip {
+  position: absolute;
+  left: var(--nm-page-x);
+  top: -4rem;
+  z-index: 20;
+  padding: var(--nm-pad-cta-y) var(--nm-pad-cta-x);
+  background: var(--nm-fg);
+  color: var(--nm-canvas);
+}
+
+.nm-login__skip:focus {
+  top: var(--nm-rail);
+}
+
+@media (max-width: 48rem) {
+  .nm-login {
+    grid-template-columns: 1fr;
+  }
+
+  .nm-login__visual {
+    height: 40dvh;
+    min-height: var(--nm-login-visual-mobile);
+  }
+}
+
+.nm-login--google-only .nm-login__stack {
+  gap: 5rem;
+}
+
+.nm-login--google-only .nm-login__title {
+  font-size: 2rem;
+  font-weight: var(--nm-weight-medium);
+  color: var(--nm-fg);
+}
+
+.nm-login__google-wrap {
+  width: 100%;
+}

package/registry/ui/components/nordman-login/nordman-login.tsx

@@ -0,0 +1,136 @@
+import { useEffect, type ReactNode } from 'react';
+import {
+  NORDMAN_LOGIN_FORM_ID,
+  NORDMAN_LOGIN_INTERFACE,
+  NORDMAN_LOGIN_VIEWS,
+  type NordmanLoginView,
+} from '../../config/nordman-login.ts';
+import { NordmanLoginRegister } from '../nordman-login-register/nordman-login-register.tsx';
+import { NordmanLoginSignIn } from '../nordman-login-sign-in/nordman-login-sign-in.tsx';
+import { NordmanLoginForgot } from '../nordman-login-forgot/nordman-login-forgot.tsx';
+import { NordmanLoginGoogle } from '../nordman-login-google/nordman-login-google.tsx';
+import { NordmanLoginReset } from '../nordman-login-reset/nordman-login-reset.tsx';
+import { nordmanLoginCopy } from '../../content/nordman-login.ts';
+import { NordmanLoginHero, type NordmanLoginShape } from '../nordman-login-hero/nordman-login-hero.tsx';
+
+export type NordmanLoginProps = {
+  title: string;
+  view: NordmanLoginView;
+  error: string | null;
+  notice: string | null;
+  pending: boolean;
+  sent: boolean;
+  passwordMin: number;
+  onView: (view: NordmanLoginView) => void;
+  onSignIn: (input: { username: string; password: string }) => void;
+  onRegister: (input: { username: string; displayName: string; password: string }) => void;
+  onRequestReset: (input: { identifier: string }) => void;
+  onResetPassword: (input: { password: string }) => void;
+  children?: ReactNode;
+  hideSwitch?: boolean;
+  after?: ReactNode;
+  shape: NordmanLoginShape;
+  /** Google-only sign-in via Supabase Auth (hides email/password UI). */
+  googleOnly?: boolean;
+  onContinueWithGoogle?: () => void;
+};
+
+function loginBody(props: NordmanLoginProps): ReactNode {
+  if (props.view === NORDMAN_LOGIN_VIEWS.register) {
+    return (
+      <NordmanLoginRegister
+        pending={props.pending}
+        passwordMin={props.passwordMin}
+        onRegister={props.onRegister}
+      />
+    );
+  }
+  if (props.view === NORDMAN_LOGIN_VIEWS.forgot) {
+    return (
+      <NordmanLoginForgot
+        pending={props.pending}
+        sent={props.sent}
+        onRequestReset={props.onRequestReset}
+      />
+    );
+  }
+  if (props.view === NORDMAN_LOGIN_VIEWS.reset) {
+    return (
+      <NordmanLoginReset
+        pending={props.pending}
+        passwordMin={props.passwordMin}
+        onResetPassword={props.onResetPassword}
+      />
+    );
+  }
+  if (props.googleOnly) {
+    return (
+      <NordmanLoginGoogle
+        pending={props.pending}
+        onContinueWithGoogle={() => props.onContinueWithGoogle?.()}
+      />
+    );
+  }
+  return (
+    <NordmanLoginSignIn
+      pending={props.pending}
+      passwordMin={props.passwordMin}
+      onForgot={() => props.onView(NORDMAN_LOGIN_VIEWS.forgot)}
+      onSignIn={props.onSignIn}
+    />
+  );
+}
+
+export function NordmanLogin(props: NordmanLoginProps): ReactNode {
+  const register = props.view === NORDMAN_LOGIN_VIEWS.register;
+  const signIn = props.view === NORDMAN_LOGIN_VIEWS.signIn;
+
+  useEffect(() => {
+    document.documentElement.dataset.interface = NORDMAN_LOGIN_INTERFACE;
+  }, []);
+
+  return (
+    <div
+      className={props.googleOnly ? 'nm-login nm-login--google-only' : 'nm-login'}
+      data-testid="nordman-login"
+    >
+      <a className="nm-login__skip" href={`#${NORDMAN_LOGIN_FORM_ID}`}>
+        {nordmanLoginCopy.skip}
+      </a>
+      <div className="nm-login__visual">
+        <NordmanLoginHero shape={props.shape} />
+      </div>
+      <section className="nm-login__panel">
+        <div className="nm-login__stack">
+          <h1 className="nm-login__title">{props.title}</h1>
+          {props.error ? (
+            <p className="nm-login__error" role="alert">
+              {props.error}
+            </p>
+          ) : null}
+          {props.notice && props.view !== NORDMAN_LOGIN_VIEWS.forgot ? (
+            <p className="nm-login__notice">{props.notice}</p>
+          ) : null}
+          {props.children ?? loginBody(props)}
+          {props.after}
+          {props.children == null && props.hideSwitch !== true && !props.googleOnly ? (
+            <p className="nm-login__switch">
+              {signIn ? nordmanLoginCopy.registerPrompt : nordmanLoginCopy.signInPrompt}{' '}
+              <button
+                className="nm-login__switch-action"
+                type="button"
+                onClick={() =>
+                  props.onView(
+                    register || !signIn ? NORDMAN_LOGIN_VIEWS.signIn : NORDMAN_LOGIN_VIEWS.register,
+                  )
+                }
+              >
+                {signIn ? nordmanLoginCopy.registerAction : nordmanLoginCopy.signInAction}
+              </button>
+            </p>
+          ) : null}
+        </div>
+      </section>
+    </div>
+  );
+}

package/registry/ui/components/nordman-login-field/nordman-login-field.tsx

@@ -0,0 +1,55 @@
+import { useState, type ReactNode } from 'react';
+import { NordmanLoginReveal } from '../nordman-login-reveal/nordman-login-reveal.tsx';
+
+export type NordmanLoginFieldProps = {
+  id: string;
+  name: string;
+  label: string;
+  type: 'text' | 'email' | 'password';
+  autoComplete: string;
+  placeholder?: string;
+  minLength?: number;
+  required?: boolean;
+  accessory?: ReactNode;
+};
+
+export function NordmanLoginField(props: NordmanLoginFieldProps): ReactNode {
+  const secret = props.type === 'password';
+  const [revealed, setRevealed] = useState(false);
+  const inputType = secret && revealed ? 'text' : props.type;
+
+  const control = (
+    <input
+      className={secret ? 'nm-login__control nm-login__control--secret' : 'nm-login__control'}
+      id={props.id}
+      name={props.name}
+      type={inputType}
+      autoComplete={props.autoComplete}
+      placeholder={props.placeholder}
+      minLength={props.minLength}
+      required={props.required}
+    />
+  );
+
+  return (
+    <div className="nm-login__field">
+      <div className="nm-login__label-row">
+        <label className="nm-login__label" htmlFor={props.id}>
+          {props.label}
+        </label>
+        {props.accessory}
+      </div>
+      {secret ? (
+        <div className="nm-login__control-wrap">
+          {control}
+          <NordmanLoginReveal
+            revealed={revealed}
+            onToggle={() => setRevealed((current) => !current)}
+          />
+        </div>
+      ) : (
+        control
+      )}
+    </div>
+  );
+}

package/registry/ui/components/nordman-login-forgot/nordman-login-forgot.tsx

@@ -0,0 +1,56 @@
+import { type FormEvent, type ReactNode } from 'react';
+import { NORDMAN_LOGIN_FIELDS, NORDMAN_LOGIN_FORM_ID } from '../../config/nordman-login.ts';
+import { NordmanLoginField } from '../nordman-login-field/nordman-login-field.tsx';
+import { nordmanLoginCopy } from '../../content/nordman-login.ts';
+import { createLogger } from '../../kit-logger.ts';
+import { NmButton } from '../nm-button/nm-button.tsx';
+
+const logger = createLogger('interface-nordman-login-forgot');
+
+export type NordmanLoginForgotProps = {
+  pending: boolean;
+  sent: boolean;
+  onRequestReset: (input: { identifier: string }) => void;
+};
+
+export function NordmanLoginForgot(props: NordmanLoginForgotProps): ReactNode {
+  function onSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const identifier = String(data.get(NORDMAN_LOGIN_FIELDS.username) ?? '');
+    logger.debug('submit', 'start');
+    props.onRequestReset({ identifier });
+  }
+
+  if (props.sent) {
+    return (
+      <p className="nm-login__notice" data-testid="forgot-sent">
+        {nordmanLoginCopy.forgotSent}
+      </p>
+    );
+  }
+
+  return (
+    <form className="nm-login__form" id={NORDMAN_LOGIN_FORM_ID} onSubmit={onSubmit}>
+      <NordmanLoginField
+        id={NORDMAN_LOGIN_FIELDS.username}
+        name={NORDMAN_LOGIN_FIELDS.username}
+        label={nordmanLoginCopy.identifier}
+        type="text"
+        autoComplete="username"
+        placeholder={nordmanLoginCopy.identifierPlaceholder}
+      />
+      <div className="nm-login__submit">
+        <NmButton
+          label={props.pending ? nordmanLoginCopy.forgotPending : nordmanLoginCopy.forgotSubmit}
+          tone="filled"
+          size="large"
+          block
+          type="submit"
+          disabled={props.pending}
+          testId="cta-forgot-submit"
+        />
+      </div>
+    </form>
+  );
+}

package/registry/ui/components/nordman-login-google/nordman-login-google.tsx

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import { nordmanLoginCopy } from '../../content/nordman-login.ts';
+import { useNordmanUiLocale } from '../../lib/nordman-ui-locale.ts';
+import { NmButton } from '../nm-button/nm-button.tsx';
+
+export type NordmanLoginGoogleProps = {
+  pending: boolean;
+  onContinueWithGoogle: () => void;
+};
+
+export function NordmanLoginGoogle(props: NordmanLoginGoogleProps): ReactNode {
+  useNordmanUiLocale();
+
+  return (
+    <div className="nm-login__google-wrap">
+      <NmButton
+        label={props.pending ? nordmanLoginCopy.googlePending : nordmanLoginCopy.continueWithGoogle}
+        tone="filled"
+        size="large"
+        block
+        icon="google"
+        disabled={props.pending}
+        testId="cta-continue-google"
+        onClick={props.onContinueWithGoogle}
+      />
+    </div>
+  );
+}

package/registry/ui/components/nordman-login-hero/nordman-login-hero.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+
+export type NordmanLoginShape = 'square' | 'triangle' | 'circle';
+
+const GLOW_CLASS: Record<NordmanLoginShape, string> = {
+  square: 'glow',
+  triangle: 'glow tri',
+  circle: 'glow circle',
+};
+
+type NordmanUiHero = {
+  mountHero: (glow: HTMLElement, options: { shape: NordmanLoginShape; signal: AbortSignal }) => void;
+};
+
+/** The website hero. The app loads `nordman-ui.js` and `hero.css`, which live beside `site.css`. */
+export function NordmanLoginHero(props: { shape: NordmanLoginShape }): ReactNode {
+  const glowRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const ui = (window as unknown as { NordmanUI?: NordmanUiHero }).NordmanUI;
+    if (glowRef.current == null || ui == null) {
+      return;
+    }
+    const controller = new AbortController();
+    ui.mountHero(glowRef.current, { shape: props.shape, signal: controller.signal });
+    return () => controller.abort();
+  }, [props.shape]);
+
+  return (
+    <div
+      ref={glowRef}
+      className={GLOW_CLASS[props.shape]}
+      aria-hidden="true"
+    >
+      <i></i>
+    </div>
+  );
+}

package/registry/ui/components/nordman-login-register/nordman-login-register.tsx

@@ -0,0 +1,70 @@
+import { type FormEvent, type ReactNode } from 'react';
+import { NORDMAN_LOGIN_FIELDS, NORDMAN_LOGIN_FORM_ID } from '../../config/nordman-login.ts';
+import { NordmanLoginField } from '../nordman-login-field/nordman-login-field.tsx';
+import { nordmanLoginCopy } from '../../content/nordman-login.ts';
+import { createLogger } from '../../kit-logger.ts';
+import { NmButton } from '../nm-button/nm-button.tsx';
+
+const logger = createLogger('interface-nordman-login-register');
+
+export type NordmanLoginRegisterProps = {
+  pending: boolean;
+  passwordMin: number;
+  onRegister: (input: { username: string; displayName: string; password: string }) => void;
+};
+
+export function NordmanLoginRegister(props: NordmanLoginRegisterProps): ReactNode {
+  function onSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    logger.debug('submit', 'start');
+    props.onRegister({
+      username: String(data.get(NORDMAN_LOGIN_FIELDS.registerUsername) ?? ''),
+      displayName: String(data.get(NORDMAN_LOGIN_FIELDS.displayName) ?? ''),
+      password: String(data.get(NORDMAN_LOGIN_FIELDS.registerPassword) ?? ''),
+    });
+  }
+
+  return (
+    <form className="nm-login__form" id={NORDMAN_LOGIN_FORM_ID} onSubmit={onSubmit}>
+      <NordmanLoginField
+        id={NORDMAN_LOGIN_FIELDS.registerUsername}
+        name={NORDMAN_LOGIN_FIELDS.registerUsername}
+        label={nordmanLoginCopy.identifier}
+        type="email"
+        autoComplete="email"
+        placeholder={nordmanLoginCopy.identifierPlaceholder}
+        required
+      />
+      <NordmanLoginField
+        id={NORDMAN_LOGIN_FIELDS.displayName}
+        name={NORDMAN_LOGIN_FIELDS.displayName}
+        label={nordmanLoginCopy.displayName}
+        type="text"
+        autoComplete="name"
+        minLength={3}
+        required
+      />
+      <NordmanLoginField
+        id={NORDMAN_LOGIN_FIELDS.registerPassword}
+        name={NORDMAN_LOGIN_FIELDS.registerPassword}
+        label={nordmanLoginCopy.password}
+        type="password"
+        autoComplete="new-password"
+        minLength={props.passwordMin}
+        required
+      />
+      <div className="nm-login__submit">
+        <NmButton
+          label={props.pending ? nordmanLoginCopy.registerPending : nordmanLoginCopy.registerSubmit}
+          tone="filled"
+          size="large"
+          block
+          type="submit"
+          disabled={props.pending}
+          testId="cta-register"
+        />
+      </div>
+    </form>
+  );
+}

package/registry/ui/components/nordman-login-reset/nordman-login-reset.tsx

@@ -0,0 +1,71 @@
+import { useState, type FormEvent, type ReactNode } from 'react';
+import { NORDMAN_LOGIN_FIELDS, NORDMAN_LOGIN_FORM_ID } from '../../config/nordman-login.ts';
+import { NordmanLoginField } from '../nordman-login-field/nordman-login-field.tsx';
+import { nordmanLoginCopy } from '../../content/nordman-login.ts';
+import { createLogger } from '../../kit-logger.ts';
+import { NmButton } from '../nm-button/nm-button.tsx';
+
+const logger = createLogger('interface-nordman-login-reset');
+
+export type NordmanLoginResetProps = {
+  pending: boolean;
+  passwordMin: number;
+  onResetPassword: (input: { password: string }) => void;
+};
+
+export function NordmanLoginReset(props: NordmanLoginResetProps): ReactNode {
+  const [mismatch, setMismatch] = useState(false);
+
+  function onSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const password = String(data.get(NORDMAN_LOGIN_FIELDS.resetPassword) ?? '');
+    const confirm = String(data.get(NORDMAN_LOGIN_FIELDS.confirmPassword) ?? '');
+    if (password !== confirm) {
+      logger.warn('submit', 'mismatch');
+      setMismatch(true);
+      return;
+    }
+    setMismatch(false);
+    logger.debug('submit', 'start');
+    props.onResetPassword({ password });
+  }
+
+  return (
+    <form className="nm-login__form" id={NORDMAN_LOGIN_FORM_ID} onSubmit={onSubmit}>
+      {mismatch ? (
+        <p className="nm-login__error" role="alert">
+          {nordmanLoginCopy.mismatch}
+        </p>
+      ) : null}
+      <NordmanLoginField
+        id={NORDMAN_LOGIN_FIELDS.resetPassword}
+        name={NORDMAN_LOGIN_FIELDS.resetPassword}
+        label={nordmanLoginCopy.password}
+        type="password"
+        autoComplete="new-password"
+        placeholder={nordmanLoginCopy.passwordPlaceholder}
+        minLength={props.passwordMin}
+      />
+      <NordmanLoginField
+        id={NORDMAN_LOGIN_FIELDS.confirmPassword}
+        name={NORDMAN_LOGIN_FIELDS.confirmPassword}
+        label={nordmanLoginCopy.confirmPassword}
+        type="password"
+        autoComplete="new-password"
+        minLength={props.passwordMin}
+      />
+      <div className="nm-login__submit">
+        <NmButton
+          label={props.pending ? nordmanLoginCopy.resetPending : nordmanLoginCopy.resetSubmit}
+          tone="filled"
+          size="large"
+          block
+          type="submit"
+          disabled={props.pending}
+          testId="cta-reset-password"
+        />
+      </div>
+    </form>
+  );
+}

package/registry/ui/components/nordman-login-reveal/nordman-login-reveal.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import { NORDMAN_LOGIN_REVEAL } from '../../config/nordman-login.ts';
+import { nordmanLoginCopy } from '../../content/nordman-login.ts';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nordman-login-reveal');
+
+export type NordmanLoginRevealProps = {
+  revealed: boolean;
+  onToggle: () => void;
+};
+
+export function NordmanLoginReveal(props: NordmanLoginRevealProps): ReactNode {
+  const label = props.revealed ? nordmanLoginCopy.hidePassword : nordmanLoginCopy.showPassword;
+
+  return (
+    <button
+      className="nm-login__reveal"
+      type="button"
+      aria-label={label}
+      aria-pressed={props.revealed}
+      data-testid="cta-reveal-password"
+      onClick={() => {
+        logger.debug('toggle', props.revealed ? 'hide' : 'show');
+        props.onToggle();
+      }}
+    >
+      <svg
+        className="nm-login__reveal-icon"
+        viewBox={NORDMAN_LOGIN_REVEAL.viewBox}
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path
+          d={props.revealed ? NORDMAN_LOGIN_REVEAL.hide : NORDMAN_LOGIN_REVEAL.show}
+          fill="currentColor"
+        />
+      </svg>
+    </button>
+  );
+}