shibao/cannery
shibao/cannery
1
2
Fork 1
Code Issues 16 Pull Requests Projects 1 Releases 36 Wiki 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"; @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 */ /* Alerts and form errors used by phx.new */
.alert { .alert {
padding: 15px; padding: 15px;

38
assets/css/components.scss
View File

@ -1,15 +1,15 @@
@layer components { @layer components {
.input { .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 shadow-sm focus:shadow-lg;
@apply transition-all duration-300 ease-in-out; @apply transition-all duration-300 ease-in-out;
} }
.input-primary { .input-primary {
@apply border-primary-500 hover:border-primary-600 active:border-primary-600; @apply border-primary-500 hover:border-primary-600 active:border-primary-600;
@apply text-black; @apply text-black;
} }
.checkbox { .checkbox {
-ms-transform: scale(1.5); -ms-transform: scale(1.5);
-moz-transform: scale(1.5); -moz-transform: scale(1.5);
@ -17,25 +17,41 @@
-o-transform: scale(1.5); -o-transform: scale(1.5);
transform: scale(1.5); transform: scale(1.5);
padding: 10px; padding: 10px;
margin: 1em auto;
} }
.title { .title {
@apply leading-5 tracking-wide; @apply leading-5 tracking-wide;
} }
.btn { .btn {
@apply focus:outline-none px-4 py-2 rounded-lg; @apply focus:outline-none px-4 py-2 rounded-lg;
@apply shadow-sm focus:shadow-lg; @apply shadow-sm focus:shadow-lg;
@apply transition-all duration-300 ease-in-out; @apply transition-all duration-300 ease-in-out;
} }
.btn-primary { .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 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; @apply text-white;
} }
.hr { .btn-alert {
@apply border border-primary-500 w-full max-w-2xl; @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> <header>
<.topbar current_user={assigns[:current_user]}> <.topbar current_user={assigns[:current_user]}></.topbar>
</.topbar>
<%= if get_flash(@conn, :info) do %> <div class="mx-8 my-2 flex flex-col space-y-4 text-center">
<p class="alert alert-info" role="alert"> <%= if get_flash(@conn, :info) do %>
<%= get_flash(@conn, :info) %> <p class="alert alert-info" role="alert">
</p> <%= get_flash(@conn, :info) %>
<% end %> </p>
<%= if get_flash(@conn, :error) do %> <% end %>
<p class="alert alert-danger" role="alert"> <%= if get_flash(@conn, :error) do %>
<%= get_flash(@conn, :error) %> <p class="alert alert-danger" role="alert">
</p> <%= get_flash(@conn, :error) %>
<% end %> </p>
<% end %>
</div>
</header> </header>
<%= @inner_content %>
<div class="mx-4 sm:mx-8 md:mx-16">
<%= @inner_content %>
</div>
</main> </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> <header>
<.topbar current_user={assigns[:current_user]}> <.topbar current_user={assigns[:current_user]}></.topbar>
</.topbar>
<%= if @flash && @flash |> Map.has_key?(:info) do %> <div class="mx-8 my-2 flex flex-col space-y-4 text-center">
<p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info"> <%= if @flash && @flash |> Map.has_key?("info") do %>
<%= live_flash(@flash, :info) %> <p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
</p> <%= live_flash(@flash, "info") %>
<% end %> </p>
<%= if @flash && @flash |> Map.has_key?(:error) do %> <% end %>
<p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error">
<%= live_flash(@flash, :error) %> <%= if @flash && @flash |> Map.has_key?("error") do %>
</p> <p
<% end %> class="alert alert-danger"
role="alert"
phx-click="lv:clear-flash"
phx-value-key="error"
>
<%= live_flash(@flash, "error") %>
</p>
<% end %>
</div>
</header> </header>
<%= @inner_content %>
<div class="mx-4 sm:mx-8 md:mx-16">
<%= @inner_content %>
</div>
</main> </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 http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<%= csrf_meta_tag() %> <%= 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")} /> <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/css/app.css")} />
<script <script
defer defer
@ -15,6 +16,7 @@
> >
</script> </script>
</head> </head>
<body class="m-0 p-0 w-full h-full"> <body class="m-0 p-0 w-full h-full">
<%= @inner_content %> <%= @inner_content %>
</body> </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"> <div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl"> <h1 class="title text-primary-600 text-xl">
Resend confirmation instructions <%= dgettext("actions", "Resend confirmation instructions") %>
</h1> </h1>
<%= form_for :user, <%= form_for :user,
Routes.user_confirmation_path(@conn, :create), 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 -> %> 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-600") %>
<%= label(f, :email, class: "title text-lg text-primary-500") %> <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
</div> <%= submit(dgettext("actions", "Resend confirmation instructions"),
<%= submit("Resend confirmation instructions", class: "btn btn-primary") %> class: "mx-auto btn btn-primary col-span-3"
<hr class="hr"> ) %>
<div class="flex flex-row justify-center items-center space-x-4"> <% end %>
<%= link("Register",
to: Routes.user_registration_path(@conn, :new), <hr class="hr" />
class: "btn btn-primary"
) %> <div class="flex flex-row justify-center items-center space-x-4">
<%= link("Log in", <%= if Accounts.allow_registration?() do %>
to: Routes.user_session_path(@conn, :new), <%= link(dgettext("actions", "Register"),
class: "btn btn-primary" to: Routes.user_registration_path(@conn, :new),
) %> class: "btn btn-primary"
</div> ) %>
<% end %> <% end %>
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
</div> </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"> <div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl"> <h1 class="title text-primary-600 text-xl">
Register <%= dgettext("actions", "Register") %>
</h1> </h1>
<%= form_for @changeset, <%= form_for @changeset,
Routes.user_registration_path(@conn, :create), 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 -> %> fn f -> %>
<%= if @changeset.action && not @changeset.valid? do %> <%= if @changeset.action && not @changeset.valid? do %>
<div class="alert alert-danger"> <div class="alert alert-danger col-span-3">
<p>Oops, something went wrong! Please check the errors below.</p> <p>
<%= dgettext("errors", "Oops, something went wrong! Please check the errors below.") %>
</p>
</div> </div>
<% end %> <% 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") %> <%= if @invite do %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %> <%= hidden_input(f, :invite_token, value: @invite.token) %>
</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>
<% end %> <% 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>
</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"> <div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl"> <h1 class="title text-primary-600 text-xl">
Reset password <%= dgettext("actions", "Reset password") %>
</h1> </h1>
<%= form_for @changeset, <%= form_for @changeset,
Routes.user_reset_password_path(@conn, :update, @token), 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 -> %> fn f -> %>
<%= if @changeset.action && not @changeset.valid? do %> <%= if @changeset.action && not @changeset.valid? do %>
<div class="alert alert-danger"> <div class="alert alert-danger col-span-3">
<p>Oops, something went wrong! Please check the errors below.</p> <p>
<%= dgettext("errors", "Oops, something went wrong! Please check the errors below.") %>
</p>
</div> </div>
<% end %> <% 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") %> <%= 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") %> <%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
</div> <%= error_tag(f, :password, "col-span-3") %>
<%= 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",
<%= label(f, :password_confirmation, "Confirm new password", class: "title text-lg text-primary-500") %> class: "title text-lg text-primary-600"
<%= password_input(f, :password_confirmation, required: true, class: "input input-primary col-span-2") %> ) %>
</div> <%= password_input(f, :password_confirmation,
<%= error_tag(f, :password_confirmation) %> required: true,
<%= submit("Reset password", class: "btn btn-primary") %> class: "input input-primary col-span-2"
<hr class="hr"> ) %>
<div class="flex flex-row justify-center items-center space-x-4"> <%= error_tag(f, :password_confirmation, "col-span-3") %>
<%= link("Register",
to: Routes.user_registration_path(@conn, :new), <%= submit(dgettext("actions", "Reset password"),
class: "btn btn-primary" class: "mx-auto btn btn-primary col-span-3"
) %> ) %>
<%= link("Log in", <% end %>
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary" <hr class="hr" />
) %>
</div> <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 %> <% end %>
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
</div> </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"> <div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl"> <h1 class="title text-primary-600 text-xl">
Forgot your password? <%= dgettext("actions", "Forgot your password?") %>
</h1> </h1>
<%= form_for :user, <%= form_for :user,
Routes.user_reset_password_path(@conn, :create), 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 -> %> 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-600") %>
<%= label(f, :email, class: "title text-lg text-primary-500") %> <%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %>
</div> <%= submit(dgettext("actions", "Send instructions to reset password"),
<%= submit("Send instructions to reset password", class: "btn btn-primary") %> class: "mx-auto btn btn-primary col-span-3"
<hr class="hr"> ) %>
<div class="flex flex-row justify-center items-center space-x-4"> <% end %>
<%= link("Register",
to: Routes.user_registration_path(@conn, :new), <hr class="hr" />
class: "btn btn-primary"
) %> <div class="flex flex-row justify-center items-center space-x-4">
<%= link("Log in", <%= if Accounts.allow_registration?() do %>
to: Routes.user_session_path(@conn, :new), <%= link(dgettext("actions", "Register"),
class: "btn btn-primary" to: Routes.user_registration_path(@conn, :new),
) %> class: "btn btn-primary"
</div> ) %>
<% end %> <% end %>
<%= link(dgettext("actions", "Log in"),
to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary"
) %>
</div> </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"> <div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl"> <h1 class="title text-primary-600 text-xl">
Log in <%= dgettext("actions", "Log in") %>
</h1> </h1>
<%= form_for @conn, <%= form_for @conn,
Routes.user_session_path(@conn, :create), 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 -> %> fn f -> %>
<%= if @error_message do %> <%= if @error_message do %>
<div class="alert alert-danger"> <div class="alert alert-danger col-span-3">
<p> <p>
<%= @error_message %> <%= @error_message %>
</p> </p>
</div> </div>
<% end %> <% 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") %> <%= label(f, :email, class: "title text-lg text-primary-600") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %> <%= 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-600") %>
<%= label(f, :password, class: "title text-lg text-primary-500") %> <%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
<%= password_input(f, :password, required: true, class: "input input-primary col-span-2") %>
</div> <%= label(f, :remember_me, gettext("Keep me logged in for 60 days"),
<div class="flex flex-row justify-center items-center text-center space-x-4"> class: "title text-lg text-primary-600"
<%= label(f, :remember_me, "Keep me logged in for 60 days", class: "title text-lg text-primary-500") %> ) %>
<%= checkbox(f, :remember_me, class: "checkbox") %> <%= checkbox(f, :remember_me, class: "checkbox col-span-2") %>
</div>
<%= submit("Log in", class: "btn btn-primary") %> <%= submit(dgettext("actions", "Log in"), class: "mx-auto btn btn-primary col-span-3") %>
<hr class="hr"> <% end %>
<div class="flex flex-row justify-center items-center space-x-4">
<%= link("Register", <hr class="hr" />
to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary" <div class="flex flex-row justify-center items-center space-x-4">
) %> <%= if Accounts.allow_registration?() do %>
<%= link("Forgot your password?", <%= link(dgettext("actions", "Register"),
to: Routes.user_reset_password_path(@conn, :new), to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary" class: "btn btn-primary"
) %> ) %>
</div>
<% end %> <% end %>
<%= link(dgettext("actions", "Forgot your password?"),
to: Routes.user_reset_password_path(@conn, :new),
class: "btn btn-primary"
) %>
</div> </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"> <div class="mx-auto mb-8 max-w-2xl flex flex-col justify-center items-center space-y-4">
<h1 class="title text-primary-500 text-xl"> <h1 class="pb-4 title text-primary-600 text-xl">
Settings <%= gettext("Settings") %>
</h1> </h1>
<h3 class="title text-primary-500 text-lg">
Change email <hr class="hr" />
</h3>
<%= form_for @email_changeset, <%= form_for @email_changeset,
Routes.user_settings_path(@conn, :update), 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 -> %> fn f -> %>
<%= if @email_changeset.action do %> <h3 class="title text-primary-600 text-lg col-span-3">
<div class="alert alert-danger"> <%= dgettext("actions", "Change email") %>
<p>Oops, something went wrong! Please check the errors below.</p> </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> </div>
<% end %> <% end %>
<%= hidden_input(f, :action, name: "action", value: "update_email") %> <%= 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") %> <%= label(f, :email, class: "title text-lg text-primary-600") %>
<%= email_input(f, :email, required: true, class: "input input-primary col-span-2") %> <%= email_input(f, :email, required: true, class: "mx-2 my-1 input input-primary col-span-2") %>
</div> <%= error_tag(f, :email, "col-span-3") %>
<%= error_tag(f, :email) %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4"> <%= label(f, :current_password, gettext("Current password"),
<%= label(f, :current_password, for: "current_password_for_email",
for: "current_password_for_email", class: "mx-2 my-1 title text-lg text-primary-600"
class: "title text-lg text-primary-500" ) %>
) %> <%= password_input(f, :current_password,
<%= password_input(f, :current_password, required: true,
required: true, name: "current_password",
name: "current_password", id: "current_password_for_email",
id: "current_password_for_email", class: "mx-2 my-1 input input-primary col-span-2"
class: "input input-primary col-span-2" ) %>
) %> <%= error_tag(f, :current_password, "col-span-3") %>
</div>
<%= error_tag(f, :current_password) %> <%= submit(dgettext("actions", "Change email"),
<%= submit("Change email", class: "btn btn-primary") %> class: "mx-auto btn btn-primary col-span-3"
) %>
<% end %> <% end %>
<h3 class="title text-primary-500 text-lg">
Change password <hr class="hr" />
</h3>
<%= form_for @password_changeset, <%= form_for @password_changeset,
Routes.user_settings_path(@conn, :update), 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 -> %> fn f -> %>
<%= if @password_changeset.action do %> <h3 class="title text-primary-600 text-lg col-span-3">
<div class="alert alert-danger"> <%= dgettext("actions", "Change password") %>
<p>Oops, something went wrong! Please check the errors below.</p> </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> </div>
<% end %> <% end %>
<%= hidden_input(f, :action, name: "action", value: "update_password") %> <%= 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") %> <%= label(f, :password, gettext("New password"), class: "title text-lg text-primary-600") %>
<%= password_input(f, :password, <%= password_input(f, :password,
required: true, required: true,
class: "input input-primary col-span-2" class: "mx-2 my-1 input input-primary col-span-2"
) %> ) %>
</div> <%= error_tag(f, :password, "col-span-3") %>
<%= error_tag(f, :password) %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4"> <%= label(f, :password_confirmation, gettext("Confirm new password"),
<%= label(f, :password_confirmation, "Confirm new password", class: "title text-lg text-primary-500") %> class: "title text-lg text-primary-600"
<%= password_input(f, :password_confirmation, ) %>
required: true, <%= password_input(f, :password_confirmation,
class: "input input-primary col-span-2" required: true,
) %> class: "mx-2 my-1 input input-primary col-span-2"
</div> ) %>
<%= error_tag(f, :password_confirmation) %> <%= error_tag(f, :password_confirmation, "col-span-3") %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label(f, :current_password, <%= label(f, :current_password, gettext("Current password"),
for: "current_password_for_password", for: "current_password_for_password",
class: "title text-lg text-primary-500" class: "title text-lg text-primary-600"
) %> ) %>
<%= password_input(f, :current_password, <%= password_input(f, :current_password,
required: true, required: true,
name: "current_password", name: "current_password",
id: "current_password_for_password", id: "current_password_for_password",
class: "input input-primary col-span-2" class: "mx-2 my-1 input input-primary col-span-2"
) %> ) %>
</div> <%= error_tag(f, :current_password, "col-span-3") %>
<%= error_tag(f, :current_password) %>
<%= submit("Change password", class: "btn btn-primary") %> <%= submit(dgettext("actions", "Change password"),
class: "mx-auto btn btn-primary col-span-3"
) %>
<% end %> <% 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> </div>

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

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