aaron_nad/cannery
1
0
Fork 0
forked from shibao/cannery
Code Pull Requests Activity

fix layout

Browse Source
This commit is contained in:
shibao 2022-02-25 21:39:22 -05:00 committed by oliviasculley
parent 95a339fe02
commit c3f5744ad6
13 changed files with 436 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
assets/css/app.scss
View File

@ -10,6 +10,30 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
@import "components";
/* fix firefox scrollbars */
* {
scrollbar-width: auto;
scrollbar-color: rgba(161, 161, 170, var(--tw-bg-opacity)) white;
}
.fa-fade {
animation: pulse 1s ease-in-out 0s infinite alternate;
}
@keyframes pulse {
0% { scale: 0.95; opacity: 0.5; }
100% { scale: 1.0; opacity: 1; }
}
.phx-connected > #disconnect, #loading {
opacity: 0 !important;
pointer-events: none;
}
.phx-loading:not(.phx-error) > #loading, .phx-error > #disconnect {
opacity: 0.95 !important;
}
/* Alerts and form errors used by phx.new */
.alert {
padding: 15px;

38
assets/css/components.scss
View File

@ -1,15 +1,15 @@
@layer components {
.input {
@apply rounded-lg px-4 py-2 border;
@apply rounded-lg px-4 py-2 border focus:outline-none;
@apply shadow-sm focus:shadow-lg;
@apply transition-all duration-300 ease-in-out;
}
.input-primary {
@apply border-primary-500 hover:border-primary-600 active:border-primary-600;
@apply text-black;
}
.checkbox {
-ms-transform: scale(1.5);
-moz-transform: scale(1.5);
@ -17,25 +17,41 @@
-o-transform: scale(1.5);
transform: scale(1.5);
padding: 10px;
margin: 1em auto;
}
.title {
@apply leading-5 tracking-wide;
}
.btn {
@apply focus:outline-none px-4 py-2 rounded-lg;
@apply shadow-sm focus:shadow-lg;
@apply transition-all duration-300 ease-in-out;
}
.btn-primary {
@apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
@apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
@apply border-primary-500 focus:border-primary-600 active:border-primary-600;
@apply text-white;
}
.hr {
@apply border border-primary-500 w-full max-w-2xl;
.btn-alert {
@apply bg-red-600 focus:bg-red-700 active:bg-red-800;
@apply border-red-600 focus:border-red-700 active:border-red-800;
@apply text-white;
}
}
.hr {
@apply border border-primary-300 w-full max-w-2xl;
}
.hr-light {
@apply border border-white w-full max-w-2xl;
}
.link {
@apply hover:underline;
@apply transition-colors duration-500 ease-in-out;
}
}

34
lib/lokal_web/templates/error/error.html.heex Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en" class="m-0 p-0 w-full h-full">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<%= dgettext("errors", "Error") %>| Lokal
</title>
<link rel="stylesheet" href="/css/app.css" />
<script defer type="text/javascript" src="/js/app.js"></script>
</head>
<body class="pb-8 m-0 p-0 w-full h-full">
<header>
<.topbar current_user={assigns[:current_user]}></.topbar>
</header>
<div class="pb-8 w-full flex flex-col justify-center items-center text-center">
<div
class="p-8 sm:p-16 w-full flex flex-col justify-center items-center space-y-4 max-w-3xl"
>
<h1 class="title text-primary-600 text-3xl">
<%= @error_string %>
</h1>
<hr class="w-full hr" />
<a href={Routes.live_path(Endpoint, PageLive)} class="link title text-primary-600 text-lg">
<%= dgettext("errors", "Go back home") %>
</a>
</div>
</div>
</body>
</html>

33
lib/lokal_web/templates/layout/app.html.heex
View File

@ -1,17 +1,22 @@
<main class="m-0 p-0 w-full h-full">
<main role="main" class="min-h-full min-w-full">
<header>
<.topbar current_user={assigns[:current_user]}>
</.topbar>
<%= if get_flash(@conn, :info) do %>
<p class="alert alert-info" role="alert">
<%= get_flash(@conn, :info) %>
</p>
<% end %>
<%= if get_flash(@conn, :error) do %>
<p class="alert alert-danger" role="alert">
<%= get_flash(@conn, :error) %>
</p>
<% end %>
<.topbar current_user={assigns[:current_user]}></.topbar>
<div class="mx-8 my-2 flex flex-col space-y-4 text-center">
<%= if get_flash(@conn, :info) do %>
<p class="alert alert-info" role="alert">
<%= get_flash(@conn, :info) %>
</p>
<% end %>
<%= if get_flash(@conn, :error) do %>
<p class="alert alert-danger" role="alert">
<%= get_flash(@conn, :error) %>
</p>
<% end %>
</div>
</header>
<%= @inner_content %>
<div class="mx-4 sm:mx-8 md:mx-16">
<%= @inner_content %>
</div>
</main>

65
lib/lokal_web/templates/layout/live.html.heex
View File

@ -1,17 +1,54 @@
<main class="m-0 p-0 w-full h-full">
<main class="mb-8 min-w-full">
<header>
<.topbar current_user={assigns[:current_user]}>
</.topbar>
<%= if @flash && @flash |> Map.has_key?(:info) do %>
<p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
<%= live_flash(@flash, :info) %>
</p>
<% end %>
<%= if @flash && @flash |> Map.has_key?(:error) do %>
<p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error">
<%= live_flash(@flash, :error) %>
</p>
<% end %>
<.topbar current_user={assigns[:current_user]}></.topbar>
<div class="mx-8 my-2 flex flex-col space-y-4 text-center">
<%= if @flash && @flash |> Map.has_key?("info") do %>
<p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
<%= live_flash(@flash, "info") %>
</p>
<% end %>
<%= if @flash && @flash |> Map.has_key?("error") do %>
<p
class="alert alert-danger"
role="alert"
phx-click="lv:clear-flash"
phx-value-key="error"
>
<%= live_flash(@flash, "error") %>
</p>
<% end %>
</div>
</header>
<%= @inner_content %>
<div class="mx-4 sm:mx-8 md:mx-16">
<%= @inner_content %>
</div>
</main>
<div
id="loading"
class="fixed opacity-0 top-0 left-0 w-screen h-screen bg-white z-50
flex flex-col justify-center items-center space-y-4
transition-opacity ease-in-out duration-500"
>
<h1 class="title text-2xl title-primary-500">
<%= gettext("Loading...") %>
</h1>
<i class="fas fa-3x fa-spin fa-cog"></i>
</div>
<div
id="disconnect"
class="fixed opacity-0 top-0 left-0 w-screen h-screen bg-white z-50
flex flex-col justify-center items-center space-y-4
transition-opacity ease-in-out duration-500"
>
<h1 class="title text-2xl title-primary-500">
<%= gettext("Reconnecting...") %>
</h1>
<i class="fas fa-3x fa-fade fa-satellite-dish"></i>
</div>

4
lib/lokal_web/templates/layout/root.html.heex
View File

@ -5,7 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<%= csrf_meta_tag() %>
<%= live_title_tag(assigns[:page_title] || "Lokal", suffix: "") %>
<%= if(assigns |> Map.has_key?(:page_title), do: @page_title, else: "Lokal")
|> live_title_tag(suffix: " | Lokal") %>
<link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")} />
<script
defer
@ -15,6 +16,7 @@
>
</script>
</head>
<body class="m-0 p-0 w-full h-full">
<%= @inner_content %>
</body>

49
lib/lokal_web/templates/user_confirmation/new.html.heex
View File

@ -1,26 +1,35 @@
<div class="flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl">
Resend confirmation instructions
<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-600 text-xl">
<%= dgettext("actions", "Resend confirmation instructions") %>
</h1>
<%= form_for :user,
Routes.user_confirmation_path(@conn, :create),
[class: "flex flex-col justify-center items-center space-y-4"],
[
class:
"flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
],
fn f -> %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :email, class: "title text-lg text-primary-500") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
</div>
<%= submit("Resend confirmation instructions", class: "btn btn-primary") %>
<hr class="hr">
<div class="flex flex-row justify-center items-center space-x-4">
<%= link("Register",
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<%= link("Log in",
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
</div>
<%= label(f, :email, class: "title text-lg text-primary-600") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
<%= submit(dgettext("actions", "Resend confirmation instructions"),
class: "mx-auto btn btn-primary col-span-3"
) %>
<% end %>
<hr class="hr" />
<div class="flex flex-row justify-center items-center space-x-4">
<%= if Accounts.allow_registration?() do %>
<%= link(dgettext("actions", "Register"),
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<% end %>
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
</div>
</div>

67
lib/lokal_web/templates/user_registration/new.html.heex
View File

@ -1,37 +1,48 @@
<div class="flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl">
Register
<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-600 text-xl">
<%= dgettext("actions", "Register") %>
</h1>
<%= form_for @changeset,
Routes.user_registration_path(@conn, :create),
[class: "flex flex-col justify-center items-center space-y-4"],
[
class:
"flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
],
fn f -> %>
<%= if @changeset.action && not @changeset.valid? do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
<div class="alert alert-danger col-span-3">
<p>
<%= dgettext("errors", "Oops, something went wrong! Please check the errors below.") %>
</p>
</div>
<% end %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :email, class: "title text-lg text-primary-500") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
</div>
<%= error_tag(f, :email) %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :password, class: "title text-lg text-primary-500") %>
<%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
</div>
<%= error_tag(f, :password) %>
<%= submit("Register", class: "btn btn-primary") %>
<hr class="hr">
<div class="flex flex-row justify-center items-center space-x-4">
<%= link("Log in",
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
<%= link("Forgot your password?",
to: Routes.user_reset_password_path(@conn, :new),
class: "btn btn-primary"
) %>
</div>
<%= if @invite do %>
<%= hidden_input(f, :invite_token, value: @invite.token) %>
<% end %>
<%= label(f, :email, class: "title text-lg text-primary-600") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
<%= error_tag(f, :email, "col-span-3") %>
<%= label(f, :password, class: "title text-lg text-primary-600") %>
<%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
<%= error_tag(f, :password, "col-span-3") %>
<%= submit(dgettext("actions", "Register"), class: "mx-auto btn btn-primary col-span-3") %>
<% end %>
<hr class="hr" />
<div class="flex flex-row justify-center items-center space-x-4">
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
<%= link(dgettext("actions", "Forgot your password?"),
to: Routes.user_reset_password_path(@conn, :new),
class: "btn btn-primary"
) %>
</div>
</div>

72
lib/lokal_web/templates/user_reset_password/edit.html.heex
View File

@ -1,37 +1,53 @@
<div class="flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl">
Reset password
<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-600 text-xl">
<%= dgettext("actions", "Reset password") %>
</h1>
<%= form_for @changeset,
Routes.user_reset_password_path(@conn, :update, @token),
[class: "flex flex-col justify-center items-center space-y-4"],
[
class:
"flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
],
fn f -> %>
<%= if @changeset.action && not @changeset.valid? do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
<div class="alert alert-danger col-span-3">
<p>
<%= dgettext("errors", "Oops, something went wrong! Please check the errors below.") %>
</p>
</div>
<% end %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :password, "New password", class: "title text-lg text-primary-500") %>
<%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
</div>
<%= error_tag(f, :password) %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :password_confirmation, "Confirm new password", class: "title text-lg text-primary-500") %>
<%= password_input(f, :password_confirmation, required: true, class: "input input-primary col-span-2") %>
</div>
<%= error_tag(f, :password_confirmation) %>
<%= submit("Reset password", class: "btn btn-primary") %>
<hr class="hr">
<div class="flex flex-row justify-center items-center space-x-4">
<%= link("Register",
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<%= link("Log in",
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
</div>
<%= label(f, :password, "New password", class: "title text-lg text-primary-600") %>
<%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
<%= error_tag(f, :password, "col-span-3") %>
<%= label(f, :password_confirmation, "Confirm new password",
class: "title text-lg text-primary-600"
) %>
<%= password_input(f, :password_confirmation,
required: true,
class: "input input-primary col-span-2"
) %>
<%= error_tag(f, :password_confirmation, "col-span-3") %>
<%= submit(dgettext("actions", "Reset password"),
class: "mx-auto btn btn-primary col-span-3"
) %>
<% end %>
<hr class="hr" />
<div class="flex flex-row justify-center items-center space-x-4">
<%= if Accounts.allow_registration?() do %>
<%= link(dgettext("actions", "Register"),
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<% end %>
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
</div>
</div>

49
lib/lokal_web/templates/user_reset_password/new.html.heex
View File

@ -1,26 +1,35 @@
<div class="flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl">
Forgot your password?
<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-600 text-xl">
<%= dgettext("actions", "Forgot your password?") %>
</h1>
<%= form_for :user,
Routes.user_reset_password_path(@conn, :create),
[class: "flex flex-col justify-center items-center space-y-4"],
[
class:
"flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
],
fn f -> %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :email, class: "title text-lg text-primary-500") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
</div>
<%= submit("Send instructions to reset password", class: "btn btn-primary") %>
<hr class="hr">
<div class="flex flex-row justify-center items-center space-x-4">
<%= link("Register",
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<%= link("Log in",
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
</div>
<%= label(f, :email, class: "title text-lg text-primary-600") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
<%= submit(dgettext("actions", "Send instructions to reset password"),
class: "mx-auto btn btn-primary col-span-3"
) %>
<% end %>
<hr class="hr" />
<div class="flex flex-row justify-center items-center space-x-4">
<%= if Accounts.allow_registration?() do %>
<%= link(dgettext("actions", "Register"),
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<% end %>
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
</div>
</div>

67
lib/lokal_web/templates/user_session/new.html.heex
View File

@ -1,41 +1,50 @@
<div class="flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl">
Log in
<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-600 text-xl">
<%= dgettext("actions", "Log in") %>
</h1>
<%= form_for @conn,
Routes.user_session_path(@conn, :create),
[as: :user, class: "flex flex-col justify-center items-center space-y-4"],
[
as: :user,
class:
"flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
],
fn f -> %>
<%= if @error_message do %>
<div class="alert alert-danger">
<div class="alert alert-danger col-span-3">
<p>
<%= @error_message %>
</p>
</div>
<% end %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :email, class: "title text-lg text-primary-500") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
</div>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :password, class: "title text-lg text-primary-500") %>
<%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
</div>
<div class="flex flex-row justify-center items-center text-center space-x-4">
<%= label(f, :remember_me, "Keep me logged in for 60 days", class: "title text-lg text-primary-500") %>
<%= checkbox(f, :remember_me, class: "checkbox") %>
</div>
<%= submit("Log in", class: "btn btn-primary") %>
<hr class="hr">
<div class="flex flex-row justify-center items-center space-x-4">
<%= link("Register",
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<%= link("Forgot your password?",
to: Routes.user_reset_password_path(@conn, :new),
class: "btn btn-primary"
) %>
</div>
<%= label(f, :email, class: "title text-lg text-primary-600") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
<%= label(f, :password, class: "title text-lg text-primary-600") %>
<%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
<%= label(f, :remember_me, gettext("Keep me logged in for 60 days"),
class: "title text-lg text-primary-600"
) %>
<%= checkbox(f, :remember_me, class: "checkbox col-span-2") %>
<%= submit(dgettext("actions", "Log in"), class: "mx-auto btn btn-primary col-span-3") %>
<% end %>
<hr class="hr" />
<div class="flex flex-row justify-center items-center space-x-4">
<%= if Accounts.allow_registration?() do %>
<%= link(dgettext("actions", "Register"),
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary"
) %>
<% end %>
<%= link(dgettext("actions", "Forgot your password?"),
to: Routes.user_reset_password_path(@conn, :new),
class: "btn btn-primary"
) %>
</div>
</div>

164
lib/lokal_web/templates/user_settings/edit.html.heex
View File

@ -1,82 +1,114 @@
<div class="flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl">
Settings
<div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="pb-4 title text-primary-600 text-xl">
<%= gettext("Settings") %>
</h1>
<h3 class="title text-primary-500 text-lg">
Change email
</h3>
<hr class="hr" />
<%= form_for @email_changeset,
Routes.user_settings_path(@conn, :update),
[class: "flex flex-col justify-center items-center space-y-4"],
[
class:
"flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
],
fn f -> %>
<%= if @email_changeset.action do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
<h3 class="title text-primary-600 text-lg col-span-3">
<%= dgettext("actions", "Change email") %>
</h3>
<%= if @email_changeset.action && not @email_changeset.valid? do %>
<div class="alert alert-danger col-span-3">
<p>
<%= dgettext("errors", "Oops, something went wrong! Please check the errors below.") %>
</p>
</div>
<% end %>
<%= hidden_input(f, :action, name: "action", value: "update_email") %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :email, class: "title text-lg text-primary-500") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
</div>
<%= error_tag(f, :email) %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :current_password,
for: "current_password_for_email",
class: "title text-lg text-primary-500"
) %>
<%= password_input(f, :current_password,
required: true,
name: "current_password",
id: "current_password_for_email",
class: "input input-primary col-span-2"
) %>
</div>
<%= error_tag(f, :current_password) %>
<%= submit("Change email", class: "btn btn-primary") %>
<%= label(f, :email, class: "title text-lg text-primary-600") %>
<%= email_input(f, :email, required: true, class: "mx-2 my-1 input input-primary col-span-2") %>
<%= error_tag(f, :email, "col-span-3") %>
<%= label(f, :current_password, gettext("Current password"),
for: "current_password_for_email",
class: "mx-2 my-1 title text-lg text-primary-600"
) %>
<%= password_input(f, :current_password,
required: true,
name: "current_password",
id: "current_password_for_email",
class: "mx-2 my-1 input input-primary col-span-2"
) %>
<%= error_tag(f, :current_password, "col-span-3") %>
<%= submit(dgettext("actions", "Change email"),
class: "mx-auto btn btn-primary col-span-3"
) %>
<% end %>
<h3 class="title text-primary-500 text-lg">
Change password
</h3>
<hr class="hr" />
<%= form_for @password_changeset,
Routes.user_settings_path(@conn, :update),
[class: "flex flex-col justify-center items-center space-y-4"],
[
class:
"flex flex-col space-y-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 justify-center items-center"
],
fn f -> %>
<%= if @password_changeset.action do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
<h3 class="title text-primary-600 text-lg col-span-3">
<%= dgettext("actions", "Change password") %>
</h3>
<%= if @password_changeset.action && not @password_changeset.valid? do %>
<div class="alert alert-danger col-span-3">
<p>
<%= dgettext("errors", "Oops, something went wrong! Please check the errors below.") %>
</p>
</div>
<% end %>
<%= hidden_input(f, :action, name: "action", value: "update_password") %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :password, "New password", class: "title text-lg text-primary-500") %>
<%= password_input(f, :password,
required: true,
class: "input input-primary col-span-2"
) %>
</div>
<%= error_tag(f, :password) %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :password_confirmation, "Confirm new password", class: "title text-lg text-primary-500") %>
<%= password_input(f, :password_confirmation,
required: true,
class: "input input-primary col-span-2"
) %>
</div>
<%= error_tag(f, :password_confirmation) %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :current_password,
for: "current_password_for_password",
class: "title text-lg text-primary-500"
) %>
<%= password_input(f, :current_password,
required: true,
name: "current_password",
id: "current_password_for_password",
class: "input input-primary col-span-2"
) %>
</div>
<%= error_tag(f, :current_password) %>
<%= submit("Change password", class: "btn btn-primary") %>
<%= label(f, :password, gettext("New password"), class: "title text-lg text-primary-600") %>
<%= password_input(f, :password,
required: true,
class: "mx-2 my-1 input input-primary col-span-2"
) %>
<%= error_tag(f, :password, "col-span-3") %>
<%= label(f, :password_confirmation, gettext("Confirm new password"),
class: "title text-lg text-primary-600"
) %>
<%= password_input(f, :password_confirmation,
required: true,
class: "mx-2 my-1 input input-primary col-span-2"
) %>
<%= error_tag(f, :password_confirmation, "col-span-3") %>
<%= label(f, :current_password, gettext("Current password"),
for: "current_password_for_password",
class: "title text-lg text-primary-600"
) %>
<%= password_input(f, :current_password,
required: true,
name: "current_password",
id: "current_password_for_password",
class: "mx-2 my-1 input input-primary col-span-2"
) %>
<%= error_tag(f, :current_password, "col-span-3") %>
<%= submit(dgettext("actions", "Change password"),
class: "mx-auto btn btn-primary col-span-3"
) %>
<% end %>
<hr class="hr" />
<%= link(dgettext("actions", "Delete User"),
to: Routes.user_settings_path(@conn, :delete, @current_user),
method: :delete,
class: "btn btn-alert",
data: [confirm: dgettext("prompts", "Are you sure you want to delete your account?")]
) %>
</div>

1
lib/lokal_web/views/layout_view.ex
View File

@ -1,6 +1,7 @@
defmodule LokalWeb.LayoutView do
use LokalWeb, :view
import LokalWeb.Components.Topbar
alias LokalWeb.{Endpoint, PageLive}
# Phoenix LiveDashboard is available only in development by default,
# so we instruct Elixir to not warn if the dashboard route is missing.