add styles to devise

This commit is contained in:
João Geonizeli
2021-08-09 23:11:18 -03:00
parent a9dc386b09
commit bc6bbc85d7
16 changed files with 92 additions and 156 deletions

View File

@@ -1,11 +0,0 @@
.grid {
display: grid;
}
.place-items-center {
place-items: center;
}
.h-screen {
height: 100vh;
}

View File

@@ -1,3 +0,0 @@
# frozen_string_literal: true
module HomeHelper
end

View File

@@ -0,0 +1,17 @@
# frozen_string_literal: true
# rubocop:disable Layout/LineLength
module TailwindHelper
class << self
def input_classes
"rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
end
def base_button_classes
"cursor-pointer py-2 px-4"
end
def primary_button_classes
"#{base_button_classes} bg-purple-600 hover:bg-purple-700 focus:ring-purple-500 focus:ring-offset-purple-200 text-white w-full transition ease-in duration-200 text-center text-base font-semibold shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 rounded-lg"
end
end
end

View File

@@ -14,4 +14,3 @@
import "stylesheets/application";
import "regenerator-runtime";
import "../src/index";

View File

@@ -0,0 +1 @@
import "../src/index";

View File

@@ -5,7 +5,7 @@ import { useApp } from "../../contexts/AppProvider";
import { useCurrentUser } from "../../contexts/UserProvider";
const linkStyles =
"cursor-pointer hover:bg-gray-100 h-full px-4 font-bold flex items-center";
"cursor-pointer bg-transparent hover:bg-gray-100 h-full px-4 font-bold flex items-center";
export const Navbar = () => {
const { setSideNavExpanded } = useApp();
@@ -60,14 +60,9 @@ export const Navbar = () => {
<input type="hidden" name="_method" value="delete" />
</form>
) : (
<form className="h-full" method="post" action="/users/sign_in">
<input className={linkStyles} type="submit" value="Entrar" />
<input
type="hidden"
name="authenticity_token"
defaultValue={csrfToken}
/>
</form>
<a href="/users/sign_in" className={linkStyles}>
Entrar
</a>
)}
</div>
</nav>

View File

@@ -1,43 +1,47 @@
<h2><%= t('.title', resource: resource.model_name.human) %></h2>
<h2 class="self-center mb-2 text-xl font-light text-gray-800 sm:text-2xl dark:text-white text-center">
<%= t('.title', resource: resource.model_name.human) %>
</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<div class="my-3">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: TailwindHelper.input_classes %>
</div>
<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
<div><%= t('.currently_waiting_confirmation_for_email', email: resource.unconfirmed_email) %></div>
<% end %>
<div class="field">
<div class="my-3">
<%= f.label :password %> <i>(<%= t('.leave_blank_if_you_don_t_want_to_change_it') %>)</i><br />
<%= f.password_field :password, autocomplete: "new-password" %>
<%= f.password_field :password, autocomplete: "new-password", class: TailwindHelper.input_classes %>
<% if @minimum_password_length %>
<br />
<em><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></em>
<% end %>
</div>
<div class="field">
<div class="my-3">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: TailwindHelper.input_classes %>
</div>
<div class="field">
<div class="my-3">
<%= f.label :current_password %> <i>(<%= t('.we_need_your_current_password_to_confirm_your_changes') %>)</i><br />
<%= f.password_field :current_password, autocomplete: "current-password" %>
<%= f.password_field :current_password, autocomplete: "current-password", class: TailwindHelper.input_classes %>
</div>
<div class="actions">
<%= f.submit t('.update') %>
<div class="my-3">
<%= f.submit t('.update'), class: TailwindHelper.primary_button_classes %>
</div>
<% end %>
<!--
<h3><%= t('.cancel_my_account') %></h3>
<p><%= t('.unhappy') %> <%= button_to t('.cancel_my_account'), registration_path(resource_name), data: { confirm: t('.are_you_sure') }, method: :delete %></p>
<%= link_to t('devise.shared.links.back'), :back %>
-->

View File

@@ -1,38 +1,40 @@
<h2><%= t('.sign_up') %></h2>
<h2 class="self-center mb-2 text-xl font-light text-gray-800 sm:text-2xl dark:text-white text-center">
<%= t('.sign_up') %>
</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<div class="field">
<div class="field my-3">
<%= f.label :first_name %><br />
<%= f.text_field :first_name, autofocus: true %>
<%= f.text_field :first_name, autofocus: true, class: TailwindHelper.input_classes %>
</div>
<div class="field">
<div class="field my-3">
<%= f.label :last_name %><br />
<%= f.text_field :last_name %>
<%= f.text_field :last_name, class: TailwindHelper.input_classes %>
</div>
<div class="field">
<div class="field my-3">
<%= f.label :email %><br />
<%= f.email_field :email, autocomplete: "email" %>
<%= f.email_field :email, autocomplete: "email", class: TailwindHelper.input_classes %>
</div>
<div class="field">
<div class="field my-3">
<%= f.label :password %>
<% if @minimum_password_length %>
<em><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></em>
<% end %><br />
<%= f.password_field :password, autocomplete: "new-password" %>
<%= f.password_field :password, autocomplete: "new-password", class: TailwindHelper.input_classes %>
</div>
<div class="field">
<div class="field my-3">
<%= f.label :password_confirmation %><br />
<%= f.password_field :password_confirmation, autocomplete: "new-password" %>
<%= f.password_field :password_confirmation, autocomplete: "new-password", class: TailwindHelper.input_classes %>
</div>
<div class="actions">
<%= f.submit t('.sign_up') %>
<div class="actions my-3">
<%= f.submit t('.sign_up'), class: TailwindHelper.primary_button_classes %>
</div>
<% end %>

View File

@@ -1,25 +1,27 @@
<h2><%= t('.sign_in') %></h2>
<h2 class="self-center mb-2 text-xl font-light text-gray-800 sm:text-2xl dark:text-white text-center">
<%= t('.sign_in') %>
</h2>
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="field">
<div class="my-3">
<%= f.label :email %><br />
<%= f.email_field :email, autofocus: true, autocomplete: "email" %>
<%= f.email_field :email, autofocus: true, autocomplete: "email", class: TailwindHelper.input_classes %>
</div>
<div class="field">
<div class="my-3">
<%= f.label :password %><br />
<%= f.password_field :password, autocomplete: "current-password" %>
<%= f.password_field :password, autocomplete: "current-password", class: TailwindHelper.input_classes %>
</div>
<% if devise_mapping.rememberable? %>
<div class="field">
<div class="my-3">
<%= f.check_box :remember_me %>
<%= f.label :remember_me %>
</div>
<% end %>
<div class="actions">
<%= f.submit t('.sign_in') %>
<div class="actions my-3">
<%= f.submit t('.sign_in'), class: TailwindHelper.primary_button_classes %>
</div>
<% end %>

View File

@@ -8,6 +8,7 @@
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'react', 'data-turbolinks-track': 'reload' %>
</head>
<body>

View File

@@ -8,8 +8,6 @@
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body class="grid place-items-center h-screen">

View File

@@ -0,0 +1,13 @@
pt-BR:
activerecord:
models:
user_document:
one: Documentos de Usuário
other: Documentos de Usuários
admin_user:
one: Usuário Administrador
other: Usuários Administradores
attributes:
user:
first_name: Primeiro nome
last_name: Último nome

View File

@@ -1,65 +0,0 @@
# Additional translations at https://github.com/heartcombo/devise/wiki/I18n
en:
devise:
confirmations:
confirmed: "Your email address has been successfully confirmed."
send_instructions: "You will receive an email with instructions for how to confirm your email address in a few minutes."
send_paranoid_instructions: "If your email address exists in our database, you will receive an email with instructions for how to confirm your email address in a few minutes."
failure:
already_authenticated: "You are already signed in."
inactive: "Your account is not activated yet."
invalid: "Invalid %{authentication_keys} or password."
locked: "Your account is locked."
last_attempt: "You have one more attempt before your account is locked."
not_found_in_database: "Invalid %{authentication_keys} or password."
timeout: "Your session expired. Please sign in again to continue."
unauthenticated: "You need to sign in or sign up before continuing."
unconfirmed: "You have to confirm your email address before continuing."
mailer:
confirmation_instructions:
subject: "Confirmation instructions"
reset_password_instructions:
subject: "Reset password instructions"
unlock_instructions:
subject: "Unlock instructions"
email_changed:
subject: "Email Changed"
password_change:
subject: "Password Changed"
omniauth_callbacks:
failure: "Could not authenticate you from %{kind} because \"%{reason}\"."
success: "Successfully authenticated from %{kind} account."
passwords:
no_token: "You can't access this page without coming from a password reset email. If you do come from a password reset email, please make sure you used the full URL provided."
send_instructions: "You will receive an email with instructions on how to reset your password in a few minutes."
send_paranoid_instructions: "If your email address exists in our database, you will receive a password recovery link at your email address in a few minutes."
updated: "Your password has been changed successfully. You are now signed in."
updated_not_active: "Your password has been changed successfully."
registrations:
destroyed: "Bye! Your account has been successfully cancelled. We hope to see you again soon."
signed_up: "Welcome! You have signed up successfully."
signed_up_but_inactive: "You have signed up successfully. However, we could not sign you in because your account is not yet activated."
signed_up_but_locked: "You have signed up successfully. However, we could not sign you in because your account is locked."
signed_up_but_unconfirmed: "A message with a confirmation link has been sent to your email address. Please follow the link to activate your account."
update_needs_confirmation: "You updated your account successfully, but we need to verify your new email address. Please check your email and follow the confirmation link to confirm your new email address."
updated: "Your account has been updated successfully."
updated_but_not_signed_in: "Your account has been updated successfully, but since your password was changed, you need to sign in again."
sessions:
signed_in: "Signed in successfully."
signed_out: "Signed out successfully."
already_signed_out: "Signed out successfully."
unlocks:
send_instructions: "You will receive an email with instructions for how to unlock your account in a few minutes."
send_paranoid_instructions: "If your account exists, you will receive an email with instructions for how to unlock it in a few minutes."
unlocked: "Your account has been unlocked successfully. Please sign in to continue."
errors:
messages:
already_confirmed: "was already confirmed, please try signing in"
confirmation_period_expired: "needs to be confirmed within %{period}, please request a new one"
expired: "has expired, please request a new one"
not_found: "not found"
not_locked: "was not locked"
not_saved:
one: "1 error prohibited this %{resource} from being saved:"
other: "%{count} errors prohibited this %{resource} from being saved:"

View File

@@ -1,33 +0,0 @@
# Files in the config/locales directory are used for internationalization
# and are automatically loaded by Rails. If you want to use locales other
# than English, add the necessary files in this directory.
#
# To use the locales, use `I18n.t`:
#
# I18n.t 'hello'
#
# In views, this is aliased to just `t`:
#
# <%= t('hello') %>
#
# To use a different locale, set it with `I18n.locale`:
#
# I18n.locale = :es
#
# This would use the information in config/locales/es.yml.
#
# The following keys must be escaped otherwise they will not be retrieved by
# the default I18n backend:
#
# true, false, on, off, yes, no
#
# Instead, surround them with single quotes.
#
# en:
# 'true': 'foo'
#
# To learn more, please read the Rails Internationalization guide
# available at https://guides.rubyonrails.org/i18n.html.
en:
hello: "Hello world"

View File

@@ -0,0 +1,16 @@
# frozen_string_literal: true
require "rails_helper"
# Specs in this file have access to a helper object that includes
# the TailwindHelper. For example:
#
# describe TailwindHelper do
# describe "string concat" do
# it "concats two strings with spaces" do
# expect(helper.concat_strings("this","that")).to eq("this that")
# end
# end
# end
RSpec.describe(TailwindHelper, type: :helper) do
pending "add some examples to (or delete) #{__FILE__}"
end