Packages

webauthn_components

0.8.0
0.8.0 0.7.3 0.7.2 0.7.1 0.7.0 0.6.5 0.6.4 0.6.3 0.6.2 0.6.1 0.6.0 0.5.3 0.5.2 0.5.1 0.5.0 0.4.1 0.4.0 0.3.3 0.3.2 0.3.1 0.3.0 0.2.2

Passkey authentication for Phoenix LiveView applications.

HexDocs

Current section

Files

Jump to
Readme
22 Versions
9 Dependencies
Dependants
Files
Activity
webauthn_components templates live_views registration_live.html.heex
Raw

templates/live_views/registration_live.html.heex 

<section class="mx-auto w-96 space-y-6">

  <.live_component module={SupportComponent} id="support-component" />



  <.simple_form

    :let={form}

    :if={@form}

    for={@form}

    phx-change="update-form"

    phx-submit={JS.dispatch("click", to: "#registration-component")}

    class="grid gap-8"

  >

    <fieldset

      :if={@show_registration?}

      id="fieldset-registration"

      class="grid gap-4 bg-gray-50 ring-1 ring-gray-200 shadow-lg p-6 rounded-lg"

    >

      <p>Create a <strong>new</strong> account:</p>



      <.input type="email" field={form[:email]} label="Email" phx-debounce="250" autocomplete="username webauthn" />

      <.live_component

        disabled={@form.source.valid? == false}

        module={RegistrationComponent}

        id="registration-component"

        app={<%= inspect @app_pascal_case %>}

        check_uvpa_available={false}

        class={[

          "bg-gray-200 hover:bg-gray-300 hover:text-black rounded transition",

          "ring ring-transparent focus:ring-gray-400 focus:outline-none",

          "flex gap-2 items-center justify-center px-4 py-2 w-full",

          "disabled:cursor-not-allowed disabled:opacity-25"

        ]}

      />





      <.link navigate={~p"/sign-in"} class="underline">Sign into an existing account</.link>

    </fieldset>



    <%= "<#{inspect(@web_pascal_case)}.PasskeyComponents.guidance />" %>

  </.simple_form>



  <%= "<#{inspect(@web_pascal_case)}.PasskeyComponents.token_form form={@token_form} />" %>

</section>