dexi/lib/dexi_web/components/account_components.ex

defmodule DexiWeb.AccountComponents do
  @moduledoc false

  use DexiWeb, :html

  alias Dexi.Accounts

  attr :user, :any, required: true

  def account_preview(assigns) do
    ~H"""
    <section
      id="account-preview"
      class={[
        "space-y-6"
      ]}
    >
      <div class={["grid gap-5 sm:grid-cols-2"]}>
        <.detail label="Public key" value={@user.pubkey} id="account-pubkey" wide monospace />
        <.detail label="Name" value={@user.name || "Not provided"} id="account-name" />
        <div>
          <.detail label="Email" value={@user.email || "Not provided"} id="account-email" />
          <p
            :if={Accounts.email_confirmed?(@user)}
            id="account-email-confirmed"
            class={["mt-1 text-xs font-semibold text-positive"]}
          >
            Email confirmed
          </p>
        </div>
        <.detail label="Role" value={@user.role} id="account-role" capitalize />
      </div>

      <button
        id="edit-account"
        type="button"
        phx-click="edit-profile"
        class={[
          "inline-flex items-center justify-center rounded-full bg-electric-cyan px-5 py-2.5 text-sm font-semibold text-midnight shadow-sm transition hover:bg-bright-cyan focus:outline-none focus:ring-2 focus:ring-soft-violet focus:ring-offset-2"
        ]}
      >
        Edit account
      </button>
    </section>
    """
  end

  attr :form, :any, required: true

  def profile_editor(assigns) do
    ~H"""
    <section id="account-editor">
      <button
        id="cancel-account-edit"
        type="button"
        phx-click="cancel-edit"
        class={[
          "mb-5 inline-flex items-center justify-center rounded-full border border-muted-steel bg-deep-slate px-5 py-2.5 text-sm font-semibold text-cool-white transition hover:bg-slate-blue focus:outline-none focus:ring-2 focus:ring-soft-violet focus:ring-offset-2"
        ]}
      >
        Cancel editing
      </button>

      <.form
        for={@form}
        id="profile-form"
        phx-change="validate"
        phx-submit="save"
        class={["space-y-5"]}
      >
        <.input
          field={@form[:email]}
          type="email"
          label="Email (optional, we may reach out to you)"
        />
        <.input field={@form[:name]} type="text" label="Name (optional)" />
        <button
          id="save-profile"
          type="submit"
          class={[
            "w-full rounded-xl bg-electric-cyan px-5 py-3 font-bold text-midnight transition hover:-translate-y-0.5 hover:bg-bright-cyan phx-submit-loading:opacity-60"
          ]}
        >
          Save account
        </button>
      </.form>
    </section>
    """
  end

  attr :user, :any, required: true
  attr :form, :any, required: true

  def email_confirmation_panel(assigns) do
    ~H"""
    <section
      :if={is_binary(@user.email) and !Accounts.email_confirmed?(@user)}
      id="email-confirmation"
      class={["mt-8 border-t border-muted-steel pt-6"]}
    >
      <p class={["text-sm font-bold"]}>Confirm {@user.email}</p>
      <p class={["mt-1 text-sm text-blue-grey"]}>
        Enter the six-digit code sent to your email. Codes expire after 15 minutes.
      </p>

      <button
        :if={!Accounts.email_confirmation_active?(@user)}
        id="send-confirmation"
        type="button"
        phx-click="send-confirmation"
        class={[
          "mt-5 inline-flex items-center justify-center rounded-full bg-electric-cyan px-5 py-2.5 text-sm font-semibold text-midnight shadow-sm transition hover:bg-bright-cyan focus:outline-none focus:ring-2 focus:ring-soft-violet focus:ring-offset-2"
        ]}
      >
        Send confirmation code
      </button>

      <.form
        :if={Accounts.email_confirmation_active?(@user)}
        for={@form}
        id="email-confirmation-form"
        phx-submit="confirm-email"
        class={["mt-4 space-y-4"]}
      >
        <.input
          field={@form[:code]}
          type="text"
          label="Confirmation code"
          inputmode="numeric"
          autocomplete="one-time-code"
          maxlength="6"
          required
        />
        <div class={["flex flex-col gap-3 sm:flex-row"]}>
          <button
            id="confirm-email"
            type="submit"
            class={[
              "flex-1 rounded-xl bg-electric-cyan px-5 py-3 font-bold text-midnight transition hover:bg-bright-cyan"
            ]}
          >
            Confirm email
          </button>
          <button
            id="resend-confirmation"
            type="button"
            phx-click="send-confirmation"
            class={[
              "flex-1 rounded-xl border border-muted-steel px-5 py-3 font-bold transition hover:border-bright-cyan"
            ]}
          >
            Resend code
          </button>
        </div>
      </.form>
    </section>
    """
  end

  attr :label, :string, required: true
  attr :value, :any, required: true
  attr :id, :string, required: true
  attr :wide, :boolean, default: false
  attr :monospace, :boolean, default: false
  attr :capitalize, :boolean, default: false

  defp detail(assigns) do
    ~H"""
    <div class={[@wide && "sm:col-span-2"]}>
      <p class={["text-xs font-bold uppercase tracking-[0.18em] text-blue-grey"]}>{@label}</p>
      <p
        class={[
          "mt-1.5 break-all text-base font-semibold text-cool-white",
          @monospace && "font-mono text-sm",
          @capitalize && "capitalize"
        ]}
        id={@id}
      >
        {@value}
      </p>
    </div>
    """
  end
end