feat: Add new tailwind styles
This commit is contained in:
Robert Prehn
parent
8216060402
commit
35e3c6a608
5 changed files with 95 additions and 94 deletions
|
|
@ -1,37 +1,18 @@
|
|||
<div class="ui middle aligned center aligned grid">
|
||||
<div class="column">
|
||||
<h2 class="ui teal image header">
|
||||
<div class="content">
|
||||
Create My Account
|
||||
</div>
|
||||
</h2>
|
||||
<%= flash_block(@conn) %>
|
||||
<%= changeset_error_block(@changeset) %>
|
||||
<%= floating_page_wrapper do %>
|
||||
<%= floating_form "Sign Up", @changeset do %>
|
||||
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
|
||||
<div class="ui stacked left aligned segment">
|
||||
<div class="field <%= error_class(f, :password) %>">
|
||||
<%= label f, Pow.Ecto.Schema.user_id_field(@changeset) %>
|
||||
<div class="ui left icon input">
|
||||
<i class="user icon"></i>
|
||||
<%= text_input f, Pow.Ecto.Schema.user_id_field(@changeset), placeholder: "E-mail address" %>
|
||||
</div>
|
||||
<%= error_tag f, Pow.Ecto.Schema.user_id_field(@changeset), class: "ui pointing red basic label" %>
|
||||
</div>
|
||||
<div class="field <%= error_class(f, :password) %>">
|
||||
<%= label f, :password %>
|
||||
<div class="ui left icon right labeled input">
|
||||
<i class="lock icon"></i>
|
||||
<%= password_input f, :password, placeholder: "Password" %>
|
||||
<div class="ui label js-passwordRevealer"><i class="eye icon" style="margin: 0;"></i></div>
|
||||
</div>
|
||||
<%= error_tag f, :password, class: "ui pointing red basic label" %>
|
||||
</div>
|
||||
<%= submit "Create My Account", class: "ui fluid large teal submit button" %>
|
||||
<%= styled_input f, Pow.Ecto.Schema.user_id_field(@changeset), placeholder: "E-mail address" %>
|
||||
<%= styled_input f, :password, placeholder: "Password" %>
|
||||
|
||||
<%= styled_button "Create My Account" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<div class="ui message">
|
||||
Already have an account? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new) %></span>
|
||||
<div class="flex flex-wrap mt-6">
|
||||
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
|
||||
Already have an account? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new), class: "text-blue-100" %></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,23 @@
|
|||
<section class="absolute w-full h-full">
|
||||
<div
|
||||
class="absolute top-0 w-full h-full bg-gray-700"
|
||||
></div>
|
||||
<div class="container mx-auto px-4 h-full">
|
||||
<div class="flex content-center items-center justify-center h-full">
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<h1 class="relative text-white text-xl font-semibold text-center pb-6">Log In</h1>
|
||||
<%= changeset_error_block(@changeset) %>
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300 border-0"
|
||||
>
|
||||
<div class="flex-auto px-4 lg:px-10 py-10 pt-6">
|
||||
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
|
||||
<%= styled_input f, Pow.Ecto.Schema.user_id_field(@changeset), icon: "user", placeholder: "joe@example.org" %>
|
||||
<%= styled_input f, :password, icon: "lock", type: "password" %>
|
||||
<%= hidden_input f, :persistent_session, value: "true" %>
|
||||
<div class="text-center mt-6">
|
||||
<%= submit "Sign In", class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap mt-6">
|
||||
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
|
||||
New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new) %></span>
|
||||
</div>
|
||||
|
||||
<%= if pow_extension_enabled?(PowResetPassword) do %>
|
||||
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
|
||||
Forgot your password? <span><%= link("Reset password", to: Routes.pow_reset_password_reset_password_path(@conn, :new)) %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= floating_page_wrapper do %>
|
||||
<%= floating_form "Log In", @changeset do %>
|
||||
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
|
||||
<%= styled_input f, Pow.Ecto.Schema.user_id_field(@changeset), icon: "user", placeholder: "joe@example.org" %>
|
||||
<%= styled_input f, :password, icon: "lock", type: "password" %>
|
||||
<%= hidden_input f, :persistent_session, value: "true" %>
|
||||
<div class="text-center mt-6">
|
||||
<%= styled_button "Sign In" %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<div class="w-full flex flex-wrap mt-6">
|
||||
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
|
||||
New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new), class: "text-blue-100" %></span>
|
||||
</div>
|
||||
|
||||
<%= if pow_extension_enabled?(PowResetPassword) do %>
|
||||
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
|
||||
Forgot your password? <span><%= link("Reset password", to: Routes.pow_reset_password_reset_password_path(@conn, :new), class: "text-blue-100") %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</section>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,16 @@
|
|||
<div class="ui middle aligned center aligned grid">
|
||||
<div class="column">
|
||||
<h2 class="ui teal image header">
|
||||
<div class="content">
|
||||
Reset Password
|
||||
</div>
|
||||
</h2>
|
||||
<%= flash_block(@conn) %>
|
||||
<%= changeset_error_block(@changeset) %>
|
||||
<%= floating_page_wrapper do %>
|
||||
<%= floating_form "Reset Password", @changeset do %>
|
||||
<%= form_for @changeset, @action, [as: :user, class: "ui large form"], fn f -> %>
|
||||
<div class="ui stacked left aligned segment">
|
||||
<%= styled_input f, :email, [placeholder: "joe@example.org", icon: "user"] %>
|
||||
</div>
|
||||
<%= submit "Reset My Password", class: "ui fluid large teal submit button" %>
|
||||
<%= styled_input f, :email, [placeholder: "joe@example.org", icon: "user"] %>
|
||||
<%= styled_button "Reset My Password" %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<div class="ui message">
|
||||
Remembered your password? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new) %></span>
|
||||
</div>
|
||||
|
||||
<div class="ui message">
|
||||
New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new) %></span>
|
||||
</div>
|
||||
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
|
||||
Remembered your password? <span><%= link "Sign in", to: Routes.pow_session_path(@conn, :new), class: "text-blue-100" %></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full relative min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-500 border-0 py-4 px-4">
|
||||
New to us? <span><%= link "Register", to: Routes.pow_registration_path(@conn, :new), class: "text-blue-100" %></span>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ defmodule Content.PostsController do
|
|||
defp try_static_post(conn, id) do
|
||||
path = "static_pages/#{id}.html"
|
||||
try do
|
||||
render(conn |> put_flash(:error, "Tits!"), path)
|
||||
render(conn, path)
|
||||
rescue
|
||||
e in Phoenix.Template.UndefinedError ->
|
||||
case e do
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ defmodule CoreWeb.Helpers do
|
|||
def changeset_error_block(changeset) do
|
||||
~E"""
|
||||
<%= if changeset.action do %>
|
||||
<div class="ui negative message">
|
||||
<div class="flex-auto px-4 lg:px-10 py-6 text-red-500 text-center">
|
||||
<p>Oops, something went wrong! Please check the errors below.</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -25,10 +25,10 @@ defmodule CoreWeb.Helpers do
|
|||
|
||||
def flash_block(conn) do
|
||||
~E"""
|
||||
<div class="fixed w-full z-50 mt-20">
|
||||
<%= [info: "grey", error: "red"] |> Enum.map(fn {level, color} -> %>
|
||||
<div class="fixed w-full px-4 z-50 mt-20">
|
||||
<%= [info: "green", error: "red"] |> Enum.map(fn {level, color} -> %>
|
||||
<%= if get_flash(conn, level) do %>
|
||||
<div class="relative bg-<%= color %>-100 p-5 w-1/2 object-right rounded shadow-xl m-auto mb-5 js-flash">
|
||||
<div class="relative bg-<%= color %>-100 lg:w-1/2 w-full p-5 object-right rounded shadow-xl m-auto mb-5 js-flash">
|
||||
<div class="flex justify-between text-<%= color %>-700">
|
||||
<div class="flex space-x-3">
|
||||
<div class="flex-1 leading-tight text-sm font-medium">
|
||||
|
|
@ -57,6 +57,14 @@ defmodule CoreWeb.Helpers do
|
|||
{classes, rest_opts} = Keyword.pop(rest_opts, :class, "px-3 py-3 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:shadow-outline w-full")
|
||||
{label_text, rest_opts} = Keyword.pop(rest_opts, :label)
|
||||
{input_helper, rest_opts} = Keyword.pop(rest_opts, :input_helper, :text_input)
|
||||
|
||||
error_classes =
|
||||
if Keyword.get_values(f.errors, field) |> Enum.any?() do
|
||||
" border border-red-500"
|
||||
else
|
||||
""
|
||||
end
|
||||
|
||||
~E"""
|
||||
<div class="relative w-full mb-3 <%= error_class(f, field) %>">
|
||||
<%= if label_text do %>
|
||||
|
|
@ -67,17 +75,53 @@ defmodule CoreWeb.Helpers do
|
|||
|
||||
<i class="<%= icon %> icon"></i>
|
||||
<%= if options == nil do %>
|
||||
<%= apply(Phoenix.HTML.Form, input_helper, [f, field, rest_opts ++ [class: classes]]) %>
|
||||
<%= apply(Phoenix.HTML.Form, input_helper, [f, field, rest_opts ++ [class: Enum.join([classes, error_classes], " ")]]) %>
|
||||
<% else %>
|
||||
<%= apply(Phoenix.HTML.Form, input_helper, [f, field, options, rest_opts ++ [class: classes]]) %>
|
||||
<%= apply(Phoenix.HTML.Form, input_helper, [f, field, options, rest_opts ++ [class: Enum.join([classes, error_classes], " ")]]) %>
|
||||
<% end %>
|
||||
<%= content %>
|
||||
|
||||
<%= error_tag f, field, class: "ui pointing red basic label" %>
|
||||
<%= error_tag f, field, class: "text-red-500 italic" %>
|
||||
</div>
|
||||
"""
|
||||
end
|
||||
|
||||
def styled_button(text) do
|
||||
~E"""
|
||||
<%= submit text, class: "bg-gray-900 text-white active:bg-gray-700 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full" %>
|
||||
"""
|
||||
end
|
||||
|
||||
def floating_form(title, changeset, do: content) do
|
||||
~E"""
|
||||
<h1 class="relative text-white text-xl font-semibold text-center pb-6"><%= title %></h1>
|
||||
<div
|
||||
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-gray-300 border-0"
|
||||
>
|
||||
<%= changeset_error_block(changeset) %>
|
||||
<div class="flex-auto px-4 lg:px-10 pt-6 pb-10">
|
||||
<%= content %>
|
||||
</div>
|
||||
</div>
|
||||
"""
|
||||
|
||||
end
|
||||
|
||||
def floating_page_wrapper(do: content) do
|
||||
~E"""
|
||||
<section class="absolute w-full h-full">
|
||||
<div class="absolute top-0 w-full h-full bg-gray-700"></div>
|
||||
<div class="container mx-auto px-4 h-full">
|
||||
<div class="flex content-center items-center justify-center h-full">
|
||||
<div class="w-full lg:w-4/12 px-4">
|
||||
<%= content %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
"""
|
||||
end
|
||||
|
||||
def pow_extension_enabled?(extension) do
|
||||
{extensions, _rest} = Application.get_env(:auth_web, :pow) |> Keyword.pop(:extensions, [])
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue