Packages

phoenix_kit

1.7.193
1.7.209 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
223 Versions
46 Dependencies
Dependants
Files
Activity
phoenix_kit lib phoenix_kit_web users login.html.heex
Raw

lib/phoenix_kit_web/users/login.html.heex 

<PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper

  flash={@flash}

  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}

  page_title={"#{@project_title} - #{gettext("Sign in")}"}

  current_path={assigns[:url_path] || "/users/log-in"}

  dev_mailbox_message={gettext("confirmation emails")}

>

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

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

    {gettext("Sign in to %{project_title}", project_title: @project_title)}

  </p>

  <.form

    for={@form}

    id="login_form"

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

    phx-update="ignore"

  >

    <input :if={@return_to} type="hidden" name="user[return_to]" value={@return_to} />

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

      <legend class="fieldset-legend sr-only">{gettext("Login with Password")}</legend>



      <label class="label" for="user_email_or_username">

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

      </label>

      <.input

        type="text"

        id="user_email_or_username"

        name="user[email_or_username]"

        value={@form.params["email_or_username"] || ""}

        autocomplete="username"

        required

      >

        <:icon>

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

        </:icon>

      </.input>



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

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

      </label>

      <.input

        type="password"

        id="user_password"

        name="user[password]"

        value=""

        autocomplete="current-password"

        required

      >

        <:icon>

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

        </:icon>

      </.input>



      <div class="form-control mt-4">

        <.checkbox

          id="user_remember_me"

          name="user[remember_me]"

          label={gettext("Keep me logged in")}

        />

      </div>



      <div class="text-center mt-2">

        <.link

          navigate={Routes.path("/users/reset-password")}

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

        >

          {gettext("Forgot your password?")}

        </.link>

      </div>



      <button

        type="submit"

        phx-disable-with={gettext("Logging in...")}

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

      >

        <PhoenixKitWeb.Components.Core.Icons.icon_login class="w-5 h-5 mr-2" /> {gettext("Log in")}

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

      </button>

    </fieldset>

  </.form>



  <%!-- Alternative authentication methods --%>

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

  <%= if @magic_link_enabled or @qr_login_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 authentication --%>

        <%= if @magic_link_enabled do %>

          <.link

            navigate={Routes.path("/users/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("Sign in with Magic Link")}

          </.link>

        <% end %>

        <%!-- QR code sign-in --%>

        <%= if @qr_login_enabled do %>

          <.link

            navigate={Routes.path("/users/qr-login")}

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

          >

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

            {gettext("Sign in with QR code")}

          </.link>

        <% end %>

        <%!-- OAuth authentication --%>

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

      </div>

    </div>

  <% end %>



  <%!-- Registration link --%>

  <%= if @allow_registration do %>

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

      <span>{gettext("New to %{project_title}?", project_title: @project_title)}</span>

      <.link

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

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

      >

        {gettext("Create an account")}

      </.link>

    </div>

  <% end %>

</PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper>