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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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 %>
@@ -22,7 +39,7 @@ defmodule LokalWeb.Live.Component.Topbar do
<% end %>
</datalist>
</form>
<%# user settings %>
<%= if assigns |> Map.has_key?(:current_user) do %>
<li>
@@ -35,7 +52,7 @@ defmodule LokalWeb.Live.Component.Topbar do
<%= 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",
@@ -55,7 +72,7 @@ defmodule LokalWeb.Live.Component.Topbar do
</ul>
</div>
</nav>
<%= if live_flash(@flash, :info) do %>
<p class="alert alert-info" role="alert"
phx-click="lv:clear-flash" phx-value-key="info">

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

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">
<p class="alert alert-info" role="alert">
<%= get_flash(@conn, :info) %>
</p>
<header class="mb-4 px-8 py-4 w-full bg-primary-400">
<%= render "topbar.html", assigns %>
<p class="alert alert-danger" role="alert">
<%= get_flash(@conn, :error) %>
</p>
<%= 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
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>

35
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 -> %>
<%= label f, :email %>
<%= email_input f, :email, required: true %>
<%= 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>
<div>
<%= submit "Resend confirmation instructions" %>
</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>

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 -> %>
<%= if @changeset.action do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
<%= 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 %>
<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>
<% end %>
<%= 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>
</div>

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 -> %>
<%= if @changeset.action do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
<%= 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 %>
<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>
<% end %>
<%= 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>
</div>

36
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 -> %>
<%= 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 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 "Send instructions to 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>
<%= 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>

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 -> %>
<%= if @error_message do %>
<div class="alert alert-danger">
<p><%= @error_message %></p>
<%= 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 %>
<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>
<% 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>
<% 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>

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 -> %>
<%= if @email_changeset.action do %>
<div class="alert alert-danger">
<p>Oops, something went wrong! Please check the errors below.</p>
<%= 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>
</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, 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 %>
<%= hidden_input f, :action, name: "action", value: "update_email" %>
<h3 class="title text-primary-500 text-lg">
Change password
</h3>
<%= label f, :email %>
<%= email_input f, :email, required: true %>
<%= error_tag f, :email %>
<%= 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>
</div>
<% end %>
<%= label f, :current_password, for: "current_password_for_email" %>
<%= password_input f, :current_password, required: true, name: "current_password", id: "current_password_for_email" %>
<%= error_tag f, :current_password %>
<%= hidden_input f, :action, name: "action", value: "update_password" %>
<div>
<%= submit "Change email" %>
</div>
<% end %>
<h3>Change password</h3>
<%= 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 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 %>
<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 %>
<%= 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 %>
</div>