frontend/auth.js

import React from "https://esm.sh/react@18.3.1";

import { html } from "./constants.js?v=33";
import { StatusText, RoleChip } from "./components.js?v=32";

export function AuthModal({
  mode,
  setMode,
  loginForm,
  setLoginForm,
  createResult,
  status,
  roleSearchInput,
  setRoleSearchInput,
  onRoleSearchInput,
  roleSearchItems,
  selectedRoles,
  onToggleRole,
  onCreate,
  onLogin,
  onFinishCreate,
  onClose,
  onOpenRole,
}) {
  return html`
    <div className="modal-backdrop">
      <div className="modal" role="dialog" aria-modal="true" aria-labelledby="auth-modal-title" aria-describedby="auth-modal-description">
        <h2 id="auth-modal-title">
          ${createResult
            ? "Create profile and choose your roles"
            : mode === "login"
              ? "Open your profile"
              : "Create a profile"}
        </h2>
        <p className="helper" id="auth-modal-description">
          ${createResult
            ? "Roles stay separate from plays. Pick any that fit now, or skip and change them later."
            : "Use your profile ID and pass. Partner links stay private."}
        </p>
        ${
          createResult
            ? html`
                <div className="creds">
                  <div><strong>Profile ID</strong></div>
                  <code>${createResult.id}</code>
                  <div style=${{ marginTop: "10px" }}><strong>Private pass</strong></div>
                  <code>${createResult.private_token}</code>
                </div>
                <div className="stack" style=${{ marginTop: "14px" }}>
                  <div>
                    <strong>Choose roles</strong>
                    <div className="tiny">Optional, but better to capture this now than bury it later.</div>
                  </div>
                  <input
                    placeholder="Search roles and dynamics"
                    value=${roleSearchInput}
                    onInput=${(e) => {
                      setRoleSearchInput(e.target.value);
                      onRoleSearchInput(e.target.value);
                    }}
                  />
                  ${selectedRoles.length
                    ? html`
                        <div className="play-flow">
                          ${selectedRoles.map(
                            (item) => html`<${RoleChip}
                              key=${item.id}
                              kink=${item}
                              selected=${true}
                              onOpen=${onOpenRole}
                              onToggle=${onToggleRole}
                            />`,
                          )}
                        </div>
                      `
                    : html`<div className="tiny">No roles selected yet.</div>`}
                  ${roleSearchItems.length
                    ? html`
                        <div className="play-flow">
                          ${roleSearchItems.map(
                            (item) => html`<${RoleChip}
                              key=${item.kink.id}
                              kink=${item.kink}
                              selected=${selectedRoles.some((role) => role.id === item.kink.id)}
                              onOpen=${onOpenRole}
                              onToggle=${onToggleRole}
                            />`,
                          )}
                        </div>
                      `
                    : roleSearchInput.trim()
                      ? html`<div className="tiny">No matching roles.</div>`
                      : null}
                </div>
                <div className="row" style=${{ marginTop: "14px" }}>
                  <button onClick=${onFinishCreate}>Open Play List</button>
                  <button className="ghost" onClick=${onFinishCreate}>Skip for now</button>
                </div>
              `
            : html`
                <div className="row" style=${{ marginBottom: "10px" }}>
                  <button
                    className=${mode === "login" ? "" : "ghost"}
                    aria-label="Switch to log in"
                    onClick=${() => setMode("login")}
                  >
                    Open existing
                  </button>
                  <button
                    className=${mode === "create" ? "" : "ghost"}
                    aria-label="Switch to create"
                    onClick=${() => setMode("create")}
                  >
                    Create new
                  </button>
                </div>
                ${
                  mode === "login"
                    ? html`
                        <div className="stack">
                          <input
                            placeholder="Profile ID"
                            value=${loginForm.user_id}
                            onInput=${(e) => setLoginForm((v) => ({ ...v, user_id: e.target.value }))}
                          />
                          <input
                            type="password"
                            placeholder="Private pass"
                            value=${loginForm.private_token}
                            onInput=${(e) => setLoginForm((v) => ({ ...v, private_token: e.target.value }))}
                          />
                          <div className="row">
                            <button aria-label="Submit login" onClick=${() => onLogin(loginForm.user_id, loginForm.private_token)}>Open profile</button>
                            <button className="ghost" onClick=${onClose}>Close</button>
                          </div>
                        </div>
                      `
                    : html`
                        <div className="row">
                          <button onClick=${onCreate}>Create profile</button>
                          <button className="ghost" onClick=${onClose}>Close</button>
                        </div>
                      `
                }
              `
        }
        <${StatusText} text=${status} />
      </div>
    </div>
  `;
}