fix layout
This commit is contained in:
parent
5beef1806a
commit
08ae3c2355
@ -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;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
@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;
|
||||||
}
|
}
|
||||||
@ -17,6 +17,7 @@
|
|||||||
-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 {
|
||||||
@ -31,11 +32,26 @@
|
|||||||
|
|
||||||
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
@apply text-white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hr {
|
.hr {
|
||||||
@apply border border-primary-500 w-full max-w-2xl;
|
@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
34
lib/lokal_web/templates/error/error.html.heex
Normal 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>
|
@ -1,7 +1,8 @@
|
|||||||
<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>
|
|
||||||
|
<div class="mx-8 my-2 flex flex-col space-y-4 text-center">
|
||||||
<%= if get_flash(@conn, :info) do %>
|
<%= if get_flash(@conn, :info) do %>
|
||||||
<p class="alert alert-info" role="alert">
|
<p class="alert alert-info" role="alert">
|
||||||
<%= get_flash(@conn, :info) %>
|
<%= get_flash(@conn, :info) %>
|
||||||
@ -12,6 +13,10 @@
|
|||||||
<%= get_flash(@conn, :error) %>
|
<%= get_flash(@conn, :error) %>
|
||||||
</p>
|
</p>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="mx-4 sm:mx-8 md:mx-16">
|
||||||
<%= @inner_content %>
|
<%= @inner_content %>
|
||||||
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
@ -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">
|
||||||
|
<%= if @flash && @flash |> Map.has_key?("info") do %>
|
||||||
<p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
|
<p class="alert alert-info" role="alert" phx-click="lv:clear-flash" phx-value-key="info">
|
||||||
<%= live_flash(@flash, :info) %>
|
<%= live_flash(@flash, "info") %>
|
||||||
</p>
|
</p>
|
||||||
<% end %>
|
<% 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">
|
<%= if @flash && @flash |> Map.has_key?("error") do %>
|
||||||
<%= live_flash(@flash, :error) %>
|
<p
|
||||||
|
class="alert alert-danger"
|
||||||
|
role="alert"
|
||||||
|
phx-click="lv:clear-flash"
|
||||||
|
phx-value-key="error"
|
||||||
|
>
|
||||||
|
<%= live_flash(@flash, "error") %>
|
||||||
</p>
|
</p>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
<div class="mx-4 sm:mx-8 md:mx-16">
|
||||||
<%= @inner_content %>
|
<%= @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>
|
||||||
|
@ -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>
|
||||||
|
@ -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("Resend confirmation instructions", class: "btn btn-primary") %>
|
<%= submit(dgettext("actions", "Resend confirmation instructions"),
|
||||||
<hr class="hr">
|
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">
|
<div class="flex flex-row justify-center items-center space-x-4">
|
||||||
<%= link("Register",
|
<%= if Accounts.allow_registration?() do %>
|
||||||
|
<%= link(dgettext("actions", "Register"),
|
||||||
to: Routes.user_registration_path(@conn, :new),
|
to: Routes.user_registration_path(@conn, :new),
|
||||||
class: "btn btn-primary"
|
class: "btn btn-primary"
|
||||||
) %>
|
) %>
|
||||||
<%= link("Log in",
|
<% end %>
|
||||||
|
<%= link(dgettext("actions", "Log in"),
|
||||||
to: Routes.user_session_path(@conn, :new),
|
to: Routes.user_session_path(@conn, :new),
|
||||||
class: "btn btn-primary"
|
class: "btn btn-primary"
|
||||||
) %>
|
) %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
</div>
|
||||||
</div>
|
|
||||||
|
@ -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 %>
|
||||||
|
<%= 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") %>
|
<%= email_input(f, :email, required: true, class: "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, :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>
|
<%= error_tag(f, :password, "col-span-3") %>
|
||||||
<%= error_tag(f, :password) %>
|
|
||||||
<%= submit("Register", class: "btn btn-primary") %>
|
<%= submit(dgettext("actions", "Register"), class: "mx-auto btn btn-primary col-span-3") %>
|
||||||
<hr class="hr">
|
<% end %>
|
||||||
|
|
||||||
|
<hr class="hr" />
|
||||||
|
|
||||||
<div class="flex flex-row justify-center items-center space-x-4">
|
<div class="flex flex-row justify-center items-center space-x-4">
|
||||||
<%= link("Log in",
|
<%= link(dgettext("actions", "Log in"),
|
||||||
to: Routes.user_session_path(@conn, :new),
|
to: Routes.user_session_path(@conn, :new),
|
||||||
class: "btn btn-primary"
|
class: "btn btn-primary"
|
||||||
) %>
|
) %>
|
||||||
<%= link("Forgot your password?",
|
<%= link(dgettext("actions", "Forgot your password?"),
|
||||||
to: Routes.user_reset_password_path(@conn, :new),
|
to: Routes.user_reset_password_path(@conn, :new),
|
||||||
class: "btn btn-primary"
|
class: "btn btn-primary"
|
||||||
) %>
|
) %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
</div>
|
||||||
</div>
|
|
||||||
|
@ -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">
|
) %>
|
||||||
|
<%= 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">
|
<div class="flex flex-row justify-center items-center space-x-4">
|
||||||
<%= link("Register",
|
<%= if Accounts.allow_registration?() do %>
|
||||||
|
<%= link(dgettext("actions", "Register"),
|
||||||
to: Routes.user_registration_path(@conn, :new),
|
to: Routes.user_registration_path(@conn, :new),
|
||||||
class: "btn btn-primary"
|
class: "btn btn-primary"
|
||||||
) %>
|
) %>
|
||||||
<%= link("Log in",
|
<% end %>
|
||||||
|
<%= link(dgettext("actions", "Log in"),
|
||||||
to: Routes.user_session_path(@conn, :new),
|
to: Routes.user_session_path(@conn, :new),
|
||||||
class: "btn btn-primary"
|
class: "btn btn-primary"
|
||||||
) %>
|
) %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
</div>
|
||||||
</div>
|
|
||||||
|
@ -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("Send instructions to reset password", class: "btn btn-primary") %>
|
<%= submit(dgettext("actions", "Send instructions to reset password"),
|
||||||
<hr class="hr">
|
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">
|
<div class="flex flex-row justify-center items-center space-x-4">
|
||||||
<%= link("Register",
|
<%= if Accounts.allow_registration?() do %>
|
||||||
|
<%= link(dgettext("actions", "Register"),
|
||||||
to: Routes.user_registration_path(@conn, :new),
|
to: Routes.user_registration_path(@conn, :new),
|
||||||
class: "btn btn-primary"
|
class: "btn btn-primary"
|
||||||
) %>
|
) %>
|
||||||
<%= link("Log in",
|
<% end %>
|
||||||
|
<%= link(dgettext("actions", "Log in"),
|
||||||
to: Routes.user_session_path(@conn, :new),
|
to: Routes.user_session_path(@conn, :new),
|
||||||
class: "btn btn-primary"
|
class: "btn btn-primary"
|
||||||
) %>
|
) %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
</div>
|
||||||
</div>
|
|
||||||
|
@ -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>
|
|
||||||
<div class="flex flex-row justify-center items-center text-center space-x-4">
|
<%= label(f, :remember_me, gettext("Keep me logged in for 60 days"),
|
||||||
<%= label(f, :remember_me, "Keep me logged in for 60 days", class: "title text-lg text-primary-500") %>
|
class: "title text-lg text-primary-600"
|
||||||
<%= checkbox(f, :remember_me, class: "checkbox") %>
|
) %>
|
||||||
</div>
|
<%= checkbox(f, :remember_me, class: "checkbox col-span-2") %>
|
||||||
<%= submit("Log in", class: "btn btn-primary") %>
|
|
||||||
<hr class="hr">
|
<%= 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">
|
<div class="flex flex-row justify-center items-center space-x-4">
|
||||||
<%= link("Register",
|
<%= if Accounts.allow_registration?() do %>
|
||||||
|
<%= link(dgettext("actions", "Register"),
|
||||||
to: Routes.user_registration_path(@conn, :new),
|
to: Routes.user_registration_path(@conn, :new),
|
||||||
class: "btn btn-primary"
|
class: "btn btn-primary"
|
||||||
) %>
|
) %>
|
||||||
<%= link("Forgot your password?",
|
<% end %>
|
||||||
|
<%= link(dgettext("actions", "Forgot your password?"),
|
||||||
to: Routes.user_reset_password_path(@conn, :new),
|
to: Routes.user_reset_password_path(@conn, :new),
|
||||||
class: "btn btn-primary"
|
class: "btn btn-primary"
|
||||||
) %>
|
) %>
|
||||||
</div>
|
</div>
|
||||||
<% end %>
|
</div>
|
||||||
</div>
|
|
||||||
|
@ -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: "title text-lg text-primary-500"
|
class: "mx-2 my-1 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_email",
|
id: "current_password_for_email",
|
||||||
class: "input input-primary col-span-2"
|
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"
|
||||||
) %>
|
) %>
|
||||||
</div>
|
|
||||||
<%= error_tag(f, :current_password) %>
|
|
||||||
<%= submit("Change email", class: "btn btn-primary") %>
|
|
||||||
<% 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"
|
||||||
|
) %>
|
||||||
|
<%= error_tag(f, :password, "col-span-3") %>
|
||||||
|
|
||||||
|
<%= label(f, :password_confirmation, gettext("Confirm new password"),
|
||||||
|
class: "title text-lg text-primary-600"
|
||||||
) %>
|
) %>
|
||||||
</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,
|
<%= password_input(f, :password_confirmation,
|
||||||
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_confirmation, "col-span-3") %>
|
||||||
<%= error_tag(f, :password_confirmation) %>
|
|
||||||
<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_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"
|
||||||
|
) %>
|
||||||
|
<%= error_tag(f, :current_password, "col-span-3") %>
|
||||||
|
|
||||||
|
<%= submit(dgettext("actions", "Change password"),
|
||||||
|
class: "mx-auto btn btn-primary col-span-3"
|
||||||
) %>
|
) %>
|
||||||
</div>
|
|
||||||
<%= error_tag(f, :current_password) %>
|
|
||||||
<%= submit("Change password", class: "btn btn-primary") %>
|
|
||||||
<% 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,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.
|
||||||
|
Loading…
Reference in New Issue
Block a user