style registration pages
This commit is contained in:
oliviasculley
parent
5b5f1ce1e5
commit
6d5f7f68df
@ -1,5 +1,41 @@
|
||||
@layer components {
|
||||
.input {
|
||||
@apply rounded-lg px-4 py-2;
|
||||
@apply rounded-lg px-4 py-2 border;
|
||||
@apply shadow-sm focus:shadow-lg;
|
||||
@apply transition-all duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
.input-primary {
|
||||
@apply border-primary-500 hover:border-primary-600 active:border-primary-600;
|
||||
@apply text-black;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
-ms-transform: scale(1.5);
|
||||
-moz-transform: scale(1.5);
|
||||
-webkit-transform: scale(1.5);
|
||||
-o-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
@apply leading-5 tracking-wide;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply focus:outline-none px-4 py-2 rounded-lg;
|
||||
@apply shadow-sm focus:shadow-lg;
|
||||
@apply transition-all duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
|
||||
@apply bg-primary-500 focus:bg-primary-600 active:bg-primary-600;
|
||||
@apply text-white;
|
||||
}
|
||||
|
||||
.hr {
|
||||
@apply border border-primary-500 w-full max-w-2xl;
|
||||
}
|
||||
}
|
||||
@ -25,7 +25,10 @@ module.exports = {
|
||||
extend: {},
|
||||
},
|
||||
variants: {
|
||||
extend: {},
|
||||
extend: {
|
||||
backgroundColor: ['active'],
|
||||
borderColor: ['active'],
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
@ -1,20 +1,37 @@
|
||||
defmodule LokalWeb.Live.Component.Topbar do
|
||||
use LokalWeb, :live_component
|
||||
|
||||
def mount(socket), do: {:ok, socket |> assign(results: [])}
|
||||
alias LokalWeb.{PageLive}
|
||||
|
||||
def mount(socket) do
|
||||
{:ok, socket |> assign(results: [], title_content: nil)}
|
||||
end
|
||||
|
||||
def update(assigns, socket) do
|
||||
{:ok, socket |> assign(assigns)}
|
||||
end
|
||||
|
||||
def render(assigns) do
|
||||
~L"""
|
||||
<header class="mb-4 px-8 py-4 w-full bg-primary-400">
|
||||
<header class="mb-8 px-8 py-4 w-full bg-primary-400">
|
||||
<nav role="navigation">
|
||||
<div class="flex flex-row justify-between items-center space-x-4">
|
||||
<h1 class="leading-5 text-xl text-white">Lokal</h1>
|
||||
<div class="flex flex-row justify-start items-center space-x-2">
|
||||
<%= link to: Routes.page_path(LokalWeb.Endpoint, :index) do %>
|
||||
<h1 class="leading-5 text-xl text-white hover:underline">Lokal</h1>
|
||||
<% end %>
|
||||
|
||||
<%= if @title_content do %>
|
||||
<span>|</span>
|
||||
<%= @title_content %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<ul class="flex flex-row flex-wrap justify-center items-center
|
||||
text-lg space-x-4 text-lg text-white">
|
||||
<%# search %>
|
||||
<form phx-change="suggest" phx-submit="search">
|
||||
<input type="text" name="q" class="input"
|
||||
<input type="text" name="q" class="input input-primary"
|
||||
placeholder="Search" list="results" autocomplete="off"/>
|
||||
<datalist id="results">
|
||||
<%= for {app, _vsn} <- @results do %>
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<div class="flex flex-col justify-center items-center text-center">
|
||||
<p>
|
||||
Welcome to Lokal!
|
||||
<div class="flex flex-col justify-center items-center text-center space-y-4">
|
||||
<h1 class="title text-primary-500 text-2xl">
|
||||
Welcome to Lokal
|
||||
</h1>
|
||||
|
||||
<p class="title text-primary-500 text-lg">
|
||||
Shop from your community
|
||||
</p>
|
||||
</div>
|
||||
@ -1,11 +1,19 @@
|
||||
<main role="main" class="container min-h-full min-w-full">
|
||||
<header class="mb-4 px-8 py-4 w-full bg-primary-400">
|
||||
<%= render "topbar.html", assigns %>
|
||||
|
||||
<%= if get_flash(@conn, :info) do %>
|
||||
<p class="alert alert-info" role="alert">
|
||||
<%= get_flash(@conn, :info) %>
|
||||
</p>
|
||||
<% end %>
|
||||
|
||||
<%= if get_flash(@conn, :error) do %>
|
||||
<p class="alert alert-danger" role="alert">
|
||||
<%= get_flash(@conn, :error) %>
|
||||
</p>
|
||||
<% end %>
|
||||
</header>
|
||||
|
||||
<%= @inner_content %>
|
||||
</main>
|
||||
|
||||
40
lib/lokal_web/templates/layout/topbar.html.eex
Normal file
40
lib/lokal_web/templates/layout/topbar.html.eex
Normal file
@ -0,0 +1,40 @@
|
||||
<nav role="navigation">
|
||||
<div class="flex flex-row justify-between items-center space-x-4">
|
||||
<%= link to: Routes.page_path(LokalWeb.Endpoint, :index) do %>
|
||||
<h1 class="leading-5 text-xl text-white hover:underline">Lokal</h1>
|
||||
<% end %>
|
||||
|
||||
<ul class="flex flex-row flex-wrap justify-center items-center
|
||||
space-x-4 text-lg text-white">
|
||||
<%# user settings %>
|
||||
<%= if assigns |> Map.has_key?(:current_user) && @current_user do %>
|
||||
<li>
|
||||
<%= @current_user.email %></li>
|
||||
<li>
|
||||
<%= link "Settings", class: "hover:underline",
|
||||
to: Routes.user_settings_path(LokalWeb.Endpoint, :edit) %>
|
||||
</li>
|
||||
<li>
|
||||
<%= link "Log out", class: "hover:underline",
|
||||
to: Routes.user_session_path(LokalWeb.Endpoint, :delete), method: :delete %>
|
||||
</li>
|
||||
|
||||
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
|
||||
<li>
|
||||
<%= link "LiveDashboard", class: "hover:underline",
|
||||
to: Routes.live_dashboard_path(LokalWeb.Endpoint, :home) %>
|
||||
</li>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<li>
|
||||
<%= link "Register", class: "hover:underline",
|
||||
to: Routes.user_registration_path(LokalWeb.Endpoint, :new) %>
|
||||
</li>
|
||||
<li>
|
||||
<%= link "Log in", class: "hover:underline",
|
||||
to: Routes.user_session_path(LokalWeb.Endpoint, :new) %>
|
||||
</li>
|
||||
<% end %>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
@ -1,4 +0,0 @@
|
||||
<div class="flex flex-col space-y-8 text-center">
|
||||
<h1 class="">Welcome to Lokal</h1>
|
||||
<p>Shop from your community</p>
|
||||
</div>
|
||||
@ -1,15 +1,24 @@
|
||||
<h1>Resend confirmation instructions</h1>
|
||||
<div class="flex flex-col justify-center items-center space-y-4">
|
||||
<h1 class="title text-primary-500 text-xl">
|
||||
Resend confirmation instructions
|
||||
</h1>
|
||||
|
||||
<%= form_for :user, Routes.user_confirmation_path(@conn, :create), fn f -> %>
|
||||
<%= label f, :email %>
|
||||
<%= email_input f, :email, required: true %>
|
||||
|
||||
<div>
|
||||
<%= submit "Resend confirmation instructions" %>
|
||||
<%= form_for :user, Routes.user_confirmation_path(@conn, :create),
|
||||
[class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
|
||||
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
|
||||
<%= label f, :email, class: "title text-lg text-primary-500" %>
|
||||
<%= email_input f, :email, required: true, class: "input input-primary col-span-2" %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<p>
|
||||
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
|
||||
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
|
||||
</p>
|
||||
<%= submit "Resend confirmation instructions", class: "btn btn-primary" %>
|
||||
|
||||
<hr class="hr">
|
||||
|
||||
<div class="flex flex-row justify-center items-center space-x-4">
|
||||
<%= link "Register", to: Routes.user_registration_path(@conn, :new),
|
||||
class: "btn btn-primary" %>
|
||||
<%= link "Log in", to: Routes.user_session_path(@conn, :new),
|
||||
class: "btn btn-primary" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
@ -1,26 +1,37 @@
|
||||
<h1>Register</h1>
|
||||
<div class="flex flex-col justify-center items-center space-y-4">
|
||||
<h1 class="title text-primary-500 text-xl">
|
||||
Register
|
||||
</h1>
|
||||
|
||||
<%= form_for @changeset, Routes.user_registration_path(@conn, :create), fn f -> %>
|
||||
<%= form_for @changeset, Routes.user_registration_path(@conn, :create),
|
||||
[class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
|
||||
<%= if @changeset.action do %>
|
||||
<div class="alert alert-danger">
|
||||
<p>Oops, something went wrong! Please check the errors below.</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= label f, :email %>
|
||||
<%= email_input f, :email, required: true %>
|
||||
<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 %>
|
||||
|
||||
<%= label f, :password %>
|
||||
<%= password_input f, :password, required: true %>
|
||||
<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 %>
|
||||
|
||||
<div>
|
||||
<%= submit "Register" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= submit "Register", class: "btn btn-primary" %>
|
||||
|
||||
<p>
|
||||
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %> |
|
||||
<%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new) %>
|
||||
</p>
|
||||
<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 %>
|
||||
</div>
|
||||
@ -1,26 +1,37 @@
|
||||
<h1>Reset password</h1>
|
||||
<div class="flex flex-col justify-center items-center space-y-4">
|
||||
<h1 class="title text-primary-500 text-xl">
|
||||
Reset password
|
||||
</h1>
|
||||
|
||||
<%= form_for @changeset, Routes.user_reset_password_path(@conn, :update, @token), fn f -> %>
|
||||
<%= form_for @changeset, Routes.user_reset_password_path(@conn, :update, @token),
|
||||
[class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
|
||||
<%= if @changeset.action do %>
|
||||
<div class="alert alert-danger">
|
||||
<p>Oops, something went wrong! Please check the errors below.</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= label f, :password, "New password" %>
|
||||
<%= password_input f, :password, required: true %>
|
||||
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
|
||||
<%= label f, :password, "New password", class: "title text-lg text-primary-500" %>
|
||||
<%= password_input f, :password, required: true, class: "input input-primary col-span-2" %>
|
||||
</div>
|
||||
<%= error_tag f, :password %>
|
||||
|
||||
<%= label f, :password_confirmation, "Confirm new password" %>
|
||||
<%= password_input f, :password_confirmation, required: true %>
|
||||
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
|
||||
<%= label f, :password_confirmation, "Confirm new password", class: "title text-lg text-primary-500" %>
|
||||
<%= password_input f, :password_confirmation, required: true, class: "input input-primary col-span-2" %>
|
||||
</div>
|
||||
<%= error_tag f, :password_confirmation %>
|
||||
|
||||
<div>
|
||||
<%= submit "Reset password" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= submit "Reset password", class: "btn btn-primary" %>
|
||||
|
||||
<p>
|
||||
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
|
||||
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
|
||||
</p>
|
||||
<hr class="hr">
|
||||
|
||||
<div class="flex flex-row justify-center items-center space-x-4">
|
||||
<%= link "Register", to: Routes.user_registration_path(@conn, :new),
|
||||
class: "btn btn-primary" %>
|
||||
<%= link "Log in", to: Routes.user_session_path(@conn, :new),
|
||||
class: "btn btn-primary" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
@ -1,15 +1,25 @@
|
||||
<h1>Forgot your password?</h1>
|
||||
<div class="flex flex-col justify-center items-center space-y-4">
|
||||
<h1 class="title text-primary-500 text-xl">
|
||||
Forgot your password?
|
||||
</h1>
|
||||
|
||||
<%= form_for :user, Routes.user_reset_password_path(@conn, :create), fn f -> %>
|
||||
<%= label f, :email %>
|
||||
<%= email_input f, :email, required: true %>
|
||||
<%= form_for :user, Routes.user_reset_password_path(@conn, :create),
|
||||
[class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
|
||||
|
||||
<div>
|
||||
<%= submit "Send instructions to reset password" %>
|
||||
<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>
|
||||
<% end %>
|
||||
|
||||
<p>
|
||||
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
|
||||
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
|
||||
</p>
|
||||
<%= submit "Send instructions to reset password", class: "btn btn-primary" %>
|
||||
|
||||
<hr class="hr">
|
||||
|
||||
<div class="flex flex-row justify-center items-center space-x-4">
|
||||
<%= link "Register", to: Routes.user_registration_path(@conn, :new),
|
||||
class: "btn btn-primary" %>
|
||||
<%= link "Log in", to: Routes.user_session_path(@conn, :new),
|
||||
class: "btn btn-primary" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
@ -1,27 +1,41 @@
|
||||
<h1>Log in</h1>
|
||||
<div class="flex flex-col justify-center items-center space-y-4">
|
||||
<h1 class="title text-primary-500 text-xl">
|
||||
Log in
|
||||
</h1>
|
||||
|
||||
<%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user], fn f -> %>
|
||||
<%= form_for @conn, Routes.user_session_path(@conn, :create), [as: :user,
|
||||
class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
|
||||
<%= if @error_message do %>
|
||||
<div class="alert alert-danger">
|
||||
<p><%= @error_message %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<%= label f, :email %>
|
||||
<%= email_input f, :email, required: true %>
|
||||
|
||||
<%= label f, :password %>
|
||||
<%= password_input f, :password, required: true %>
|
||||
|
||||
<%= label f, :remember_me, "Keep me logged in for 60 days" %>
|
||||
<%= checkbox f, :remember_me %>
|
||||
|
||||
<div>
|
||||
<%= submit "Log in" %>
|
||||
<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>
|
||||
<% end %>
|
||||
|
||||
<p>
|
||||
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
|
||||
<%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new) %>
|
||||
</p>
|
||||
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
|
||||
<%= label f, :password, class: "title text-lg text-primary-500" %>
|
||||
<%= password_input f, :password, required: true, class: "input input-primary col-span-2" %>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-center items-center text-center space-x-4">
|
||||
<%= label f, :remember_me, "Keep me logged in for 60 days",
|
||||
class: "title text-lg text-primary-500" %>
|
||||
<%= checkbox f, :remember_me, class: "checkbox" %>
|
||||
</div>
|
||||
|
||||
<%= submit "Log in", class: "btn btn-primary" %>
|
||||
|
||||
<hr class="hr">
|
||||
|
||||
<div class="flex flex-row justify-center items-center space-x-4">
|
||||
<%= link "Register", to: Routes.user_registration_path(@conn, :new),
|
||||
class: "btn btn-primary" %>
|
||||
<%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new),
|
||||
class: "btn btn-primary" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
@ -1,8 +1,14 @@
|
||||
<h1>Settings</h1>
|
||||
<div class="flex flex-col justify-center items-center space-y-4">
|
||||
<h1 class="title text-primary-500 text-xl">
|
||||
Settings
|
||||
</h1>
|
||||
|
||||
<h3>Change email</h3>
|
||||
<h3 class="title text-primary-500 text-lg">
|
||||
Change email
|
||||
</h3>
|
||||
|
||||
<%= form_for @email_changeset, Routes.user_settings_path(@conn, :update), fn f -> %>
|
||||
<%= form_for @email_changeset, Routes.user_settings_path(@conn, :update),
|
||||
[class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
|
||||
<%= if @email_changeset.action do %>
|
||||
<div class="alert alert-danger">
|
||||
<p>Oops, something went wrong! Please check the errors below.</p>
|
||||
@ -11,22 +17,31 @@
|
||||
|
||||
<%= hidden_input f, :action, name: "action", value: "update_email" %>
|
||||
|
||||
<%= label f, :email %>
|
||||
<%= email_input f, :email, required: true %>
|
||||
<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 %>
|
||||
|
||||
<%= label f, :current_password, for: "current_password_for_email" %>
|
||||
<%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email" %>
|
||||
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
|
||||
<%= label f, :current_password, for: "current_password_for_email", class: "title text-lg text-primary-500" %>
|
||||
<%= password_input f, :current_password,
|
||||
required: true,
|
||||
name: "current_password",
|
||||
id: "current_password_for_email",
|
||||
class: "input input-primary col-span-2" %>
|
||||
</div>
|
||||
<%= error_tag f, :current_password %>
|
||||
|
||||
<div>
|
||||
<%= submit "Change email" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= submit "Change email", class: "btn btn-primary" %>
|
||||
<% end %>
|
||||
|
||||
<h3>Change password</h3>
|
||||
<h3 class="title text-primary-500 text-lg">
|
||||
Change password
|
||||
</h3>
|
||||
|
||||
<%= form_for @password_changeset, Routes.user_settings_path(@conn, :update), fn f -> %>
|
||||
<%= form_for @password_changeset, Routes.user_settings_path(@conn, :update),
|
||||
[class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
|
||||
<%= if @password_changeset.action do %>
|
||||
<div class="alert alert-danger">
|
||||
<p>Oops, something went wrong! Please check the errors below.</p>
|
||||
@ -35,19 +50,36 @@
|
||||
|
||||
<%= hidden_input f, :action, name: "action", value: "update_password" %>
|
||||
|
||||
<%= label f, :password, "New password" %>
|
||||
<%= password_input f, :password, required: true %>
|
||||
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
|
||||
<%= label f, :password, "New password",
|
||||
class: "title text-lg text-primary-500" %>
|
||||
<%= password_input f, :password,
|
||||
required: true,
|
||||
class: "input input-primary col-span-2" %>
|
||||
</div>
|
||||
<%= error_tag f, :password %>
|
||||
|
||||
<%= label f, :password_confirmation, "Confirm new password" %>
|
||||
<%= password_input f, :password_confirmation, required: true %>
|
||||
<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 %>
|
||||
|
||||
<%= label f, :current_password, for: "current_password_for_password" %>
|
||||
<%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_password" %>
|
||||
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
|
||||
<%= label f, :current_password,
|
||||
for: "current_password_for_password",
|
||||
class: "title text-lg text-primary-500" %>
|
||||
<%= password_input f, :current_password,
|
||||
required: true,
|
||||
name: "current_password",
|
||||
id: "current_password_for_password",
|
||||
class: "input input-primary col-span-2" %>
|
||||
</div>
|
||||
<%= error_tag f, :current_password %>
|
||||
|
||||
<div>
|
||||
<%= submit "Change password" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<%= submit "Change password", class: "btn btn-primary" %>
|
||||
<% end %>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user