forked from shibao/cannery
		
	fix layout
This commit is contained in:
		| @@ -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; | ||||
|   | ||||
| @@ -1,6 +1,6 @@ | ||||
| @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; | ||||
|   } | ||||
| @@ -17,6 +17,7 @@ | ||||
|     -o-transform: scale(1.5); | ||||
|     transform: scale(1.5); | ||||
|     padding: 10px; | ||||
|     margin: 1em auto; | ||||
|   } | ||||
|  | ||||
|   .title { | ||||
| @@ -31,11 +32,26 @@ | ||||
|  | ||||
|   .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; | ||||
|   } | ||||
|  | ||||
|   .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-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> | ||||
|     <.topbar current_user={assigns[:current_user]}> | ||||
|     </.topbar> | ||||
|     <.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) %> | ||||
| @@ -12,6 +13,10 @@ | ||||
|           <%= get_flash(@conn, :error) %> | ||||
|         </p> | ||||
|       <% end %> | ||||
|     </div> | ||||
|   </header> | ||||
|  | ||||
|   <div class="mx-4 sm:mx-8 md:mx-16"> | ||||
|     <%= @inner_content %> | ||||
|   </div> | ||||
| </main> | ||||
|   | ||||
| @@ -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 %> | ||||
|     <.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) %> | ||||
|           <%= 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) %> | ||||
|  | ||||
|       <%= 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> | ||||
|  | ||||
|   <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> | ||||
|   | ||||
| @@ -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> | ||||
|   | ||||
| @@ -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") %> | ||||
|     <%= label(f, :email, class: "title text-lg text-primary-600") %> | ||||
|     <%= 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"> | ||||
|  | ||||
|     <%= 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"> | ||||
|         <%= link("Register", | ||||
|     <%= if Accounts.allow_registration?() do %> | ||||
|       <%= link(dgettext("actions", "Register"), | ||||
|         to: Routes.user_registration_path(@conn, :new), | ||||
|         class: "btn btn-primary" | ||||
|       ) %> | ||||
|         <%= link("Log in", | ||||
|     <% end %> | ||||
|     <%= link(dgettext("actions", "Log in"), | ||||
|       to: Routes.user_session_path(@conn, :new), | ||||
|       class: "btn btn-primary" | ||||
|     ) %> | ||||
|   </div> | ||||
|     <% end %> | ||||
|   </div> | ||||
| </div> | ||||
|   | ||||
| @@ -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") %> | ||||
|  | ||||
|     <%= 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") %> | ||||
|     </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") %> | ||||
|     <%= 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") %> | ||||
|     </div> | ||||
|     <%= error_tag(f, :password) %> | ||||
|     <%= submit("Register", class: "btn btn-primary") %> | ||||
|     <hr class="hr"> | ||||
|     <%= 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("Log in", | ||||
|     <%= link(dgettext("actions", "Log in"), | ||||
|       to: Routes.user_session_path(@conn, :new), | ||||
|       class: "btn btn-primary" | ||||
|     ) %> | ||||
|         <%= link("Forgot your password?", | ||||
|     <%= link(dgettext("actions", "Forgot your password?"), | ||||
|       to: Routes.user_reset_password_path(@conn, :new), | ||||
|       class: "btn btn-primary" | ||||
|     ) %> | ||||
|   </div> | ||||
|     <% end %> | ||||
|   </div> | ||||
| </div> | ||||
|   | ||||
| @@ -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") %> | ||||
|  | ||||
|     <%= 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") %> | ||||
|     </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"> | ||||
|     <%= 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"> | ||||
|         <%= link("Register", | ||||
|     <%= if Accounts.allow_registration?() do %> | ||||
|       <%= link(dgettext("actions", "Register"), | ||||
|         to: Routes.user_registration_path(@conn, :new), | ||||
|         class: "btn btn-primary" | ||||
|       ) %> | ||||
|         <%= link("Log in", | ||||
|     <% end %> | ||||
|     <%= link(dgettext("actions", "Log in"), | ||||
|       to: Routes.user_session_path(@conn, :new), | ||||
|       class: "btn btn-primary" | ||||
|     ) %> | ||||
|   </div> | ||||
|     <% end %> | ||||
|   </div> | ||||
| </div> | ||||
|   | ||||
| @@ -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") %> | ||||
|     <%= label(f, :email, class: "title text-lg text-primary-600") %> | ||||
|     <%= 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"> | ||||
|  | ||||
|     <%= 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"> | ||||
|         <%= link("Register", | ||||
|     <%= if Accounts.allow_registration?() do %> | ||||
|       <%= link(dgettext("actions", "Register"), | ||||
|         to: Routes.user_registration_path(@conn, :new), | ||||
|         class: "btn btn-primary" | ||||
|       ) %> | ||||
|         <%= link("Log in", | ||||
|     <% end %> | ||||
|     <%= link(dgettext("actions", "Log in"), | ||||
|       to: Routes.user_session_path(@conn, :new), | ||||
|       class: "btn btn-primary" | ||||
|     ) %> | ||||
|   </div> | ||||
|     <% end %> | ||||
|   </div> | ||||
| </div> | ||||
|   | ||||
| @@ -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") %> | ||||
|  | ||||
|     <%= label(f, :email, class: "title text-lg text-primary-600") %> | ||||
|     <%= 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") %> | ||||
|  | ||||
|     <%= label(f, :password, class: "title text-lg text-primary-600") %> | ||||
|     <%= 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"> | ||||
|  | ||||
|     <%= 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"> | ||||
|         <%= link("Register", | ||||
|     <%= if Accounts.allow_registration?() do %> | ||||
|       <%= link(dgettext("actions", "Register"), | ||||
|         to: Routes.user_registration_path(@conn, :new), | ||||
|         class: "btn btn-primary" | ||||
|       ) %> | ||||
|         <%= link("Forgot your password?", | ||||
|     <% end %> | ||||
|     <%= link(dgettext("actions", "Forgot your password?"), | ||||
|       to: Routes.user_reset_password_path(@conn, :new), | ||||
|       class: "btn btn-primary" | ||||
|     ) %> | ||||
|   </div> | ||||
|     <% end %> | ||||
|   </div> | ||||
| </div> | ||||
|   | ||||
| @@ -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, | ||||
|  | ||||
|     <%= 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: "title text-lg text-primary-500" | ||||
|       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: "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 %> | ||||
|   <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") %> | ||||
|  | ||||
|     <%= label(f, :password, gettext("New password"), class: "title text-lg text-primary-600") %> | ||||
|     <%= password_input(f, :password, | ||||
|       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, | ||||
|       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) %> | ||||
|     <div class="grid grid-cols-3 justify-center items-center text-center space-x-4"> | ||||
|       <%= label(f, :current_password, | ||||
|     <%= 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-500" | ||||
|       class: "title text-lg text-primary-600" | ||||
|     ) %> | ||||
|     <%= password_input(f, :current_password, | ||||
|       required: true, | ||||
|       name: "current_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 %> | ||||
|  | ||||
|   <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,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. | ||||
|   | ||||
		Reference in New Issue
	
	Block a user