Packages

phoenix_kit

1.7.178
1.7.208 1.7.207 1.7.206 1.7.205 1.7.204 1.7.203 1.7.202 1.7.201 1.7.200 1.7.199 1.7.198 1.7.197 1.7.196 1.7.194 1.7.193 1.7.192 1.7.191 1.7.190 1.7.189 1.7.187 1.7.186 1.7.185 1.7.184 1.7.183 1.7.182 1.7.181 1.7.180 1.7.179 1.7.178 1.7.177 1.7.176 1.7.175 1.7.174 1.7.173 1.7.172 1.7.171 1.7.170 1.7.169 1.7.168 1.7.167 1.7.166 1.7.165 1.7.164 1.7.162 1.7.161 1.7.160 1.7.159 1.7.157 1.7.156 1.7.155 1.7.154 1.7.153 1.7.152 1.7.151 1.7.150 1.7.149 1.7.146 1.7.145 1.7.144 1.7.143 1.7.138 1.7.133 1.7.132 1.7.131 1.7.130 1.7.128 1.7.126 1.7.125 1.7.121 1.7.120 1.7.119 1.7.118 1.7.117 1.7.116 1.7.115 1.7.114 1.7.113 1.7.112 1.7.111 1.7.110 1.7.109 1.7.108 1.7.107 1.7.106 1.7.105 1.7.104 1.7.103 1.7.102 1.7.101 1.7.100 1.7.99 1.7.98 1.7.97 1.7.96 1.7.95 1.7.94 1.7.93 1.7.92 1.7.91 1.7.90 1.7.89 1.7.88 1.7.87 1.7.86 1.7.85 1.7.84 1.7.83 1.7.82 1.7.81 1.7.80 1.7.79 1.7.78 1.7.77 1.7.76 1.7.75 1.7.74 1.7.71 1.7.70 1.7.69 1.7.66 1.7.65 1.7.64 1.7.63 1.7.62 1.7.61 1.7.59 1.7.58 1.7.57 1.7.56 1.7.55 1.7.54 1.7.53 1.7.52 1.7.51 1.7.49 1.7.44 1.7.43 1.7.42 1.7.41 1.7.39 1.7.38 1.7.37 1.7.36 1.7.34 1.7.33 1.7.31 1.7.30 1.7.29 1.7.28 1.7.27 1.7.26 1.7.25 1.7.24 1.7.23 1.7.22 1.7.21 1.7.20 1.7.19 1.7.18 1.7.17 1.7.16 1.7.15 1.7.14 1.7.13 1.7.12 1.7.11 1.7.10 1.7.9 1.7.8 1.7.7 1.7.6 1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.20 1.6.19 1.6.18 1.6.17 1.6.16 1.6.15 1.6.14 1.6.13 1.6.12 1.6.11 1.6.10 1.6.9 1.6.8 1.6.7 1.6.6 1.6.5 1.6.4 1.6.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2 1.3.1 1.3.0 1.2.10 1.2.9 1.2.8 1.2.7 1.2.5 1.2.4 1.2.2 1.2.1 1.2.0 1.1.0 1.0.0

A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more

HexDocs

Current section

Files

Jump to
Readme
222 Versions
46 Dependencies
Dependants
Files
Activity
phoenix_kit lib phoenix_kit_web users registration.html.heex
Raw

lib/phoenix_kit_web/users/registration.html.heex 

<PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper

  flash={@flash}

  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

  page_title={"#{@project_title} - #{gettext("Create account")}"}

  current_path={assigns[:url_path] || "/users/register"}

  dev_mailbox_message={gettext("confirmation emails")}

>

  <h1 class="text-2xl font-bold text-center mb-2">{gettext("Create account")}</h1>

  <p class="text-center text-base-content/60 text-sm mb-6">

    {gettext("Join %{project_title} today", project_title: @project_title)}

  </p>



  <%!-- Invitation banner: shown when user arrives via org invitation link --%>

  <%= if @pending_invitation do %>

    <div class="alert alert-info mb-4">

      <.icon name="hero-building-office-2" class="w-5 h-5 shrink-0" />

      <span>

        {gettext(

          "You've been invited to join %{organization}. Create an account to accept the invitation.",

          organization: @pending_invitation.organization.organization_name

        )}

      </span>

    </div>

  <% end %>



  <.form

    for={@form}

    id="registration_form"

    phx-submit="save"

    phx-change="validate"

    phx-trigger-action={@trigger_submit}

    action={Routes.path("/users/log-in?_action=registered")}

    method="post"

  >

    <fieldset class="fieldset min-w-0">

      <legend class="fieldset-legend sr-only">{gettext("Account Information")}</legend>



      <div phx-feedback-for="user[email]">

        <label class="label" for="user_email">

          <span class="label-text">{gettext("Email")}</span>

        </label>

        <.input field={@form[:email]} type="email" autocomplete="email" required>

          <:icon>

            <PhoenixKitWeb.Components.Core.Icons.icon_email class="h-[1em] w-[1em] opacity-50" />

          </:icon>

        </.input>

      </div>



      <%!-- Username Field (optional, controlled by admin setting) --%>

      <%= if @show_username do %>

        <div phx-feedback-for="user[username]">

          <label class="label" for="user_username">

            <span class="label-text">{gettext("Username")}</span>

          </label>

          <.input field={@form[:username]} type="text" autocomplete="username">

            <:icon>

              <PhoenixKitWeb.Components.Core.Icons.icon_user_profile class="h-[1em] w-[1em] opacity-50" />

            </:icon>

          </.input>

          <div class="text-xs text-base-content/60 mt-1">

            {gettext("Auto-filled from your email — edit it to choose your own")}

          </div>

        </div>

      <% end %>



      <%!-- Referral Code Field (shown when referral codes are enabled) --%>

      <%= if @referral_codes_enabled do %>

        <div phx-feedback-for="referral_code">

          <.label for="referral_code">

            {gettext("Referral Code")}

            <%= if @referral_codes_required do %>

              *

            <% end %>

          </.label>

          <input

            id="referral_code"

            name="referral_code"

            type="text"

            class={[

              "input w-full",

              (@referral_code_error ||

                 (@check_errors && @referral_codes_required &&

                    (is_nil(@referral_code) || @referral_code == ""))) && "input-error"

            ]}

            value={@referral_code || ""}

            required={@referral_codes_required}

          />

          <%= if @referral_code_error do %>

            <.error>{@referral_code_error}</.error>

          <% end %>

        </div>

      <% end %>



      <%!-- Account Type (only when organization accounts enabled) --%>

      <%= if @org_accounts_enabled do %>

        <div phx-feedback-for="user[account_type]">

          <label class="label" for="user_account_type">

            <span class="label-text">{gettext("Account Type")}</span>

          </label>

          <select

            id="user_account_type"

            name="user[account_type]"

            class="select select-bordered w-full"

          >

            <option

              value="person"

              selected={Phoenix.HTML.Form.input_value(@form, :account_type) != "organization"}

            >

              {gettext("Person")}

            </option>

            <option

              value="organization"

              selected={Phoenix.HTML.Form.input_value(@form, :account_type) == "organization"}

            >

              {gettext("Organization")}

            </option>

          </select>

        </div>



        <%!-- Organization Name (only for organization type) --%>

        <%= if Phoenix.HTML.Form.input_value(@form, :account_type) == "organization" do %>

          <div phx-feedback-for="user[organization_name]">

            <label class="label" for="user_organization_name">

              <span class="label-text">{gettext("Organization Name")}</span>

            </label>

            <.input field={@form[:organization_name]} type="text" required>

              <:icon>

                <.icon name="hero-building-office" class="h-[1em] w-[1em] opacity-50" />

              </:icon>

            </.input>

          </div>

        <% end %>

      <% end %>



      <div phx-feedback-for="user[password]">

        <label class="label" for="user_password">

          <span class="label-text">{gettext("Password")}</span>

        </label>

        <.input field={@form[:password]} type="password" autocomplete="new-password" required>

          <:icon>

            <PhoenixKitWeb.Components.Core.Icons.icon_lock class="h-[1em] w-[1em] opacity-50" />

          </:icon>

        </.input>

      </div>



      <button

        type="submit"

        class="btn btn-primary w-full mt-4 transition-all hover:scale-[1.02] active:scale-[0.98]"

      >

        <PhoenixKitWeb.Components.Core.Icons.icon_user_add class="w-5 h-5 mr-2" /> {gettext(

          "Create account"

        )}

        <span aria-hidden="true">→</span>

      </button>

    </fieldset>

  </.form>



  <%!-- Alternative registration methods --%>

  <%!-- Only show this section if at least one alternative method is available --%>

  <%= if @magic_link_registration_enabled or PhoenixKit.Users.OAuthAvailability.oauth_available?() do %>

    <div class="mt-6">

      <div class="relative">

        <div class="absolute inset-0 flex items-center">

          <div class="w-full border-t border-base-300" />

        </div>

        <div class="relative flex justify-center text-sm">

          <span class="px-2 bg-base-100 text-base-content/60">{gettext("Or continue with")}</span>

        </div>

      </div>



      <div class="mt-4 space-y-2">

        <%!-- Magic Link Registration --%>

        <%= if @magic_link_registration_enabled do %>

          <.link

            navigate={Routes.path("/users/register/magic-link")}

            class="btn btn-outline w-full transition-all hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg"

          >

            <PhoenixKitWeb.Components.Core.Icons.icon_email class="w-5 h-5 mr-2" />

            {gettext("Register with Magic Link")}

          </.link>

        <% end %>

        <%!-- OAuth authentication --%>

        <PhoenixKitWeb.Components.OAuthButtons.oauth_buttons show_divider={false} />

      </div>

    </div>

  <% end %>



  <%!-- Login link --%>

  <div class="text-center mt-4 text-sm">

    <span>{gettext("Already have an account?")}</span>

    <.link

      navigate={Routes.path("/users/log-in")}

      class="font-semibold text-primary hover:underline"

    >

      {gettext("Sign in")}

    </.link>

  </div>

</PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper>