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

style registration pages

Browse Source
This commit is contained in:
shibao 2021-09-02 23:32:52 -04:00 committed by oliviasculley
parent 5b5f1ce1e5
commit 6d5f7f68df
13 changed files with 352 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
assets/css/components.scss
View File

@ -1,5 +1,41 @@
@layer components { @layer components {
.input { .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;
} }
} }

5
assets/tailwind.config.js
View File

@ -25,7 +25,10 @@ module.exports = {
extend: {}, extend: {},
}, },
variants: { variants: {
extend: {}, extend: {
backgroundColor: ['active'],
borderColor: ['active'],
},
}, },
plugins: [], plugins: [],
} }

25
lib/lokal_web/live/component/topbar.ex
View File

@ -1,20 +1,37 @@
defmodule LokalWeb.Live.Component.Topbar do defmodule LokalWeb.Live.Component.Topbar do
use LokalWeb, :live_component 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 def render(assigns) do
~L""" ~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"> <nav role="navigation">
<div class="flex flex-row justify-between items-center space-x-4"> <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 <ul class="flex flex-row flex-wrap justify-center items-center
text-lg space-x-4 text-lg text-white"> text-lg space-x-4 text-lg text-white">
<%# search %> <%# search %>
<form phx-change="suggest" phx-submit="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"/> placeholder="Search" list="results" autocomplete="off"/>
<datalist id="results"> <datalist id="results">
<%= for {app, _vsn} <- @results do %> <%= for {app, _vsn} <- @results do %>

10
lib/lokal_web/live/page_live.html.leex
View File

@ -1,5 +1,9 @@
<div class="flex flex-col justify-center items-center text-center"> <div class="flex flex-col justify-center items-center text-center space-y-4">
<p> <h1 class="title text-primary-500 text-2xl">
Welcome to Lokal! Welcome to Lokal
</h1>
<p class="title text-primary-500 text-lg">
Shop from your community
</p> </p>
</div> </div>

20
lib/lokal_web/templates/layout/app.html.eex
View File

@ -1,11 +1,19 @@
<main role="main" class="container min-h-full min-w-full"> <main role="main" class="container min-h-full min-w-full">
<p class="alert alert-info" role="alert"> <header class="mb-4 px-8 py-4 w-full bg-primary-400">
<%= get_flash(@conn, :info) %> <%= render "topbar.html", assigns %>
</p>
<p class="alert alert-danger" role="alert"> <%= if get_flash(@conn, :info) do %>
<%= get_flash(@conn, :error) %> <p class="alert alert-info" role="alert">
</p> <%= 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 %> <%= @inner_content %>
</main> </main>

40
lib/lokal_web/templates/layout/topbar.html.eex Normal file
View 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>

4
lib/lokal_web/templates/page/index.html.eex
View File

@ -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>

33
lib/lokal_web/templates/user_confirmation/new.html.eex
View File

@ -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 -> %> <%= form_for :user, Routes.user_confirmation_path(@conn, :create),
<%= label f, :email %> [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
<%= 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>
<div> <%= submit "Resend confirmation instructions", class: "btn btn-primary" %>
<%= submit "Resend confirmation instructions" %>
</div>
<% end %>
<p> <hr class="hr">
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %> <div class="flex flex-row justify-center items-center space-x-4">
</p> <%= 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>

57
lib/lokal_web/templates/user_registration/new.html.eex
View File

@ -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),
<%= if @changeset.action do %> [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
<div class="alert alert-danger"> <%= if @changeset.action do %>
<p>Oops, something went wrong! Please check the errors below.</p> <div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
</div>
<% end %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label f, :email, class: "title text-lg text-primary-500" %>
<%= email_input f, :email, required: true, class: "input input-primary col-span-2" %>
</div>
<%= error_tag f, :email %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label f, :password, class: "title text-lg text-primary-500" %>
<%= password_input f, :password, required: true, class: "input input-primary col-span-2" %>
</div>
<%= error_tag f, :password %>
<%= submit "Register", class: "btn btn-primary" %>
<hr class="hr">
<div class="flex flex-row justify-center items-center space-x-4">
<%= link "Log in", to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary" %>
<%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new),
class: "btn btn-primary" %>
</div> </div>
<% end %> <% end %>
</div>
<%= label f, :email %>
<%= email_input f, :email, required: true %>
<%= error_tag f, :email %>
<%= label f, :password %>
<%= password_input f, :password, required: true %>
<%= error_tag f, :password %>
<div>
<%= submit "Register" %>
</div>
<% end %>
<p>
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %> |
<%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new) %>
</p>

57
lib/lokal_web/templates/user_reset_password/edit.html.eex
View File

@ -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),
<%= if @changeset.action do %> [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
<div class="alert alert-danger"> <%= if @changeset.action do %>
<p>Oops, something went wrong! Please check the errors below.</p> <div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
</div>
<% end %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label f, :password, "New password", class: "title text-lg text-primary-500" %>
<%= password_input f, :password, required: true, class: "input input-primary col-span-2" %>
</div>
<%= error_tag f, :password %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label f, :password_confirmation, "Confirm new password", class: "title text-lg text-primary-500" %>
<%= password_input f, :password_confirmation, required: true, class: "input input-primary col-span-2" %>
</div>
<%= error_tag f, :password_confirmation %>
<%= submit "Reset password", class: "btn btn-primary" %>
<hr class="hr">
<div class="flex flex-row justify-center items-center space-x-4">
<%= link "Register", to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary" %>
<%= link "Log in", to: Routes.user_session_path(@conn, :new),
class: "btn btn-primary" %>
</div> </div>
<% end %> <% end %>
</div>
<%= label f, :password, "New password" %>
<%= password_input f, :password, required: true %>
<%= error_tag f, :password %>
<%= label f, :password_confirmation, "Confirm new password" %>
<%= password_input f, :password_confirmation, required: true %>
<%= error_tag f, :password_confirmation %>
<div>
<%= submit "Reset password" %>
</div>
<% end %>
<p>
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %>
</p>

34
lib/lokal_web/templates/user_reset_password/new.html.eex
View File

@ -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 -> %> <%= form_for :user, Routes.user_reset_password_path(@conn, :create),
<%= label f, :email %> [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
<%= email_input f, :email, required: true %>
<div> <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= submit "Send instructions to reset password" %> <%= label f, :email, class: "title text-lg text-primary-500" %>
</div> <%= email_input f, :email, required: true, class: "input input-primary col-span-2" %>
<% end %> </div>
<p> <%= submit "Send instructions to reset password", class: "btn btn-primary" %>
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
<%= link "Log in", to: Routes.user_session_path(@conn, :new) %> <hr class="hr">
</p>
<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>

62
lib/lokal_web/templates/user_session/new.html.eex
View File

@ -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,
<%= if @error_message do %> class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
<div class="alert alert-danger"> <%= if @error_message do %>
<p><%= @error_message %></p> <div class="alert alert-danger">
<p><%= @error_message %></p>
</div>
<% end %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label f, :email, class: "title text-lg text-primary-500" %>
<%= email_input f, :email, required: true, class: "input input-primary col-span-2" %>
</div>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label f, :password, class: "title text-lg text-primary-500" %>
<%= password_input f, :password, required: true, class: "input input-primary col-span-2" %>
</div>
<div class="flex flex-row justify-center items-center text-center space-x-4">
<%= label f, :remember_me, "Keep me logged in for 60 days",
class: "title text-lg text-primary-500" %>
<%= checkbox f, :remember_me, class: "checkbox" %>
</div>
<%= submit "Log in", class: "btn btn-primary" %>
<hr class="hr">
<div class="flex flex-row justify-center items-center space-x-4">
<%= link "Register", to: Routes.user_registration_path(@conn, :new),
class: "btn btn-primary" %>
<%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new),
class: "btn btn-primary" %>
</div> </div>
<% end %> <% end %>
</div>
<%= 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>
<% end %>
<p>
<%= link "Register", to: Routes.user_registration_path(@conn, :new) %> |
<%= link "Forgot your password?", to: Routes.user_reset_password_path(@conn, :new) %>
</p>

118
lib/lokal_web/templates/user_settings/edit.html.eex
View File

@ -1,53 +1,85 @@
<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),
<%= if @email_changeset.action do %> [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
<div class="alert alert-danger"> <%= if @email_changeset.action do %>
<p>Oops, something went wrong! Please check the errors below.</p> <div class="alert alert-danger">
<p>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> </div>
<%= error_tag f, :email %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label f, :current_password, for: "current_password_for_email", class: "title text-lg text-primary-500" %>
<%= password_input f, :current_password,
required: true,
name: "current_password",
id: "current_password_for_email",
class: "input input-primary col-span-2" %>
</div>
<%= error_tag f, :current_password %>
<%= submit "Change email", class: "btn btn-primary" %>
<% end %> <% end %>
<%= hidden_input f, :action, name: "action", value: "update_email" %> <h3 class="title text-primary-500 text-lg">
Change password
</h3>
<%= label f, :email %> <%= form_for @password_changeset, Routes.user_settings_path(@conn, :update),
<%= email_input f, :email, required: true %> [class: "flex flex-col justify-center items-center space-y-4"], fn f -> %>
<%= error_tag f, :email %> <%= if @password_changeset.action do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
</div>
<% end %>
<%= label f, :current_password, for: "current_password_for_email" %> <%= hidden_input f, :action, name: "action", value: "update_password" %>
<%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email" %>
<%= error_tag f, :current_password %>
<div> <div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= submit "Change email" %> <%= label f, :password, "New password",
</div> class: "title text-lg text-primary-500" %>
<% end %> <%= password_input f, :password,
required: true,
<h3>Change password</h3> class: "input input-primary col-span-2" %>
<%= form_for @password_changeset, Routes.user_settings_path(@conn, :update), fn f -> %>
<%= if @password_changeset.action do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
</div> </div>
<%= error_tag f, :password %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label f, :password_confirmation, "Confirm new password",
class: "title text-lg text-primary-500" %>
<%= password_input f, :password_confirmation,
required: true,
class: "input input-primary col-span-2" %>
</div>
<%= error_tag f, :password_confirmation %>
<div class="grid grid-cols-3 justify-center items-center text-center space-x-4">
<%= label f, :current_password,
for: "current_password_for_password",
class: "title text-lg text-primary-500" %>
<%= password_input f, :current_password,
required: true,
name: "current_password",
id: "current_password_for_password",
class: "input input-primary col-span-2" %>
</div>
<%= error_tag f, :current_password %>
<%= submit "Change password", class: "btn btn-primary" %>
<% end %> <% end %>
</div>
<%= hidden_input f, :action, name: "action", value: "update_password" %>
<%= label f, :password, "New password" %>
<%= password_input f, :password, required: true %>
<%= error_tag f, :password %>
<%= label f, :password_confirmation, "Confirm new password" %>
<%= password_input f, :password_confirmation, required: true %>
<%= 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" %>
<%= error_tag f, :current_password %>
<div>
<%= submit "Change password" %>
</div>
<% end %>