olvidar contraseña

This commit is contained in:
santiago.sferco 2024-07-10 16:20:16 -03:00
parent eedaa8a439
commit d22e2a9197
5 changed files with 61 additions and 20 deletions

View File

@ -61,6 +61,17 @@ body{
height: max-content;
}
.pw_forgot{
background-color: #297177;
margin-top: 20px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 5px;
padding: 15px;
height: max-content;
}
.auth_form{
background-color: #297177;
display: flex;

View File

@ -316,7 +316,7 @@ defmodule DerivantesWeb.CoreComponents do
name={@name}
value="true"
checked={@checked}
class="rounded border-zinc-300 text-white focus:ring-0"
class="rounded border-zinc-300 text-[#297177] focus:ring-0 accent-[#297177]"
{@rest}
/>
<%= @label %>
@ -426,6 +426,7 @@ defmodule DerivantesWeb.CoreComponents do
slot :actions
def header(assigns) do
IO.inspect(assigns)
~H"""
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
<div>
@ -441,6 +442,30 @@ defmodule DerivantesWeb.CoreComponents do
"""
end
@doc """
Renders a header with title.
"""
attr :class, :string, default: nil
slot :inner_block, required: true
slot :subtitle
slot :actions
def header_SA(assigns) do
~H"""
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
<div>
<h1 class="text-3xl font-semibold leading-8 text-white mt-4">
<%= render_slot(@inner_block) %>
</h1>
<p :if={@subtitle != []} class="mt-6 text-md leading-6 text-white">
<%= render_slot(@subtitle) %>
</p>
</div>
<div class="flex-none"><%= render_slot(@actions) %></div>
</header>
"""
end
@doc ~S"""
Renders a table with generic styling.

View File

@ -5,23 +5,26 @@ defmodule DerivantesWeb.UserForgotPasswordLive do
def render(assigns) do
~H"""
<div class="mx-auto max-w-sm">
<.header class="text-center">
Forgot your password?
<:subtitle>We'll send a password reset link to your inbox</:subtitle>
</.header>
<div class="mx-auto max-w-sm pw_forgot">
<.header_SA class="text-center text-white">
<img src={~p"/images/sana_americano_logo.png"} alt="Sanatorio Americano Logo"/>
<br>
¿Olvidó su contraseña?
<:subtitle>Le enviaremos un link para reestablecerla.</:subtitle>
</.header_SA>
<.simple_form for={@form} id="reset_password_form" phx-submit="send_email">
<.input field={@form[:email]} type="email" placeholder="Email" required />
<br>
<:actions>
<.button phx-disable-with="Sending..." class="w-full">
Send password reset instructions
<.button phx-disable-with="Enviando..." class="w-full background-color-[#297177]">
Enviar instrucciones de reestablecimiento de contraseña
</.button>
</:actions>
</.simple_form>
<p class="text-center text-sm mt-4">
<.link href={~p"/derivantes/register"}>Register</.link>
| <.link href={~p"/derivantes/log_in"}>Log in</.link>
<.link href={~p"/derivantes/register"}>Registrarse</.link>
| <.link href={~p"/derivantes/log_in"}>Ingresar</.link>
</p>
</div>
"""
@ -40,7 +43,7 @@ defmodule DerivantesWeb.UserForgotPasswordLive do
end
info =
"If your email is in our system, you will receive instructions to reset your password shortly."
"Su su email está en nuestro sistema, recibirá instrucciones para reestablecer su contraseña en unos minutos"
{:noreply,
socket

View File

@ -31,7 +31,7 @@ defmodule DerivantesWeb.UserLoginLive do
/>
<:actions>
<.input field={@form[:remember_me]} type="checkbox" label="Mantenerme conectado" class="accent-[#297177]"/>
<.input field={@form[:remember_me]} type="checkbox" label="Mantenerme conectado"/>
<.link href={~p"/derivantes/reset_password"} class="text-sm text-white font-semibold">
¿Olvidó su contraseña?
</.link>

View File

@ -5,8 +5,9 @@ defmodule DerivantesWeb.UserResetPasswordLive do
def render(assigns) do
~H"""
<div class="mx-auto max-w-sm">
<.header class="text-center">Reset Password</.header>
<div class="mx-auto max-w-sm pw_forgot">
<img src={~p"/images/sana_americano_logo.png"} alt="Sanatorio Americano Logo"/>
<.header_SA class="text-center">Reestablecer contraseña.</.header_SA>
<.simple_form
for={@form}
@ -15,24 +16,25 @@ defmodule DerivantesWeb.UserResetPasswordLive do
phx-change="validate"
>
<.error :if={@form.errors != []}>
Oops, something went wrong! Please check the errors below.
Ups!, Algo salió mal.
</.error>
<.input field={@form[:password]} type="password" label="New password" required />
<.input field={@form[:password]} type="password" placeholder="Nueva contraseña" required />
<.input
field={@form[:password_confirmation]}
type="password"
label="Confirm new password"
placeholder="Repetir nueva contraseña"
required
/>
<br>
<:actions>
<.button phx-disable-with="Resetting..." class="w-full">Reset Password</.button>
<.button phx-disable-with="Resetting..." class="w-full">Reestablecer contraseña</.button>
</:actions>
</.simple_form>
<p class="text-center text-sm mt-4">
<.link href={~p"/derivantes/register"}>Register</.link>
| <.link href={~p"/derivantes/log_in"}>Log in</.link>
<.link href={~p"/derivantes/register"}>Registrarse</.link>
| <.link href={~p"/derivantes/log_in"}>Ingresar</.link>
</p>
</div>
"""