Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Minor CSS fixes to sign in/up flow #4943

Merged
merged 6 commits into from
Jan 24, 2025
Merged

Minor CSS fixes to sign in/up flow #4943

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ff26d8f
Add doctype for sign in pages
coalest Jan 23, 2025
632c31c
Center account request form
coalest Jan 23, 2025
b59da0e
Make password required field on login form
coalest Jan 23, 2025
94f2099
Center HE logo, google sign in, and form container
coalest Jan 23, 2025
34ab219
Only send staging warning script/html for staging env
coalest Jan 23, 2025
937e4be
Fix flash of text in account request form
coalest Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions app/assets/stylesheets/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,3 +108,17 @@
width: 3rem;
cursor: not-allowed;
}

// The account request form is placed inside the default devise container which
// is too narrow for the desired form width, so we have to apply a negative
// margin to center it (except on mobile where text would get cut off).
.account-request {
$inner-width: 35rem;
$outer-width: 360px;
width: $inner-width;
margin-left: calc((#{$outer-width} - #{$inner-width}) / 2);
@media (max-width: 620px) {
margin-left: 0;
max-width: 100%;
}
}
44 changes: 12 additions & 32 deletions app/views/account_requests/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,29 @@
<% unless Rails.env.staging? %>
<div class="bg-white" style='width: 35rem'>
<div class="bg-white account-request">
<div class="p-3">
<div class="mb-10">
<h1 class='text-3xl text-center'>Essentials Bank Account Request Form</h1>
</div>

<div class="form-check">
<%= radio_button_tag(:account, :bank, false, class: 'form-check-input account_type') %>
<%= radio_button_tag(:account, :bank, @bank_selected, class: 'form-check-input account_type') %>
<%= label_tag(:account, "I am an Essentials Bank. I do NOT distribute diapers/period supplies directly to the public, I distribute them to partner agencies who distribute them to the public.", class: 'form-check-label') %>
</div>
<div class="form-check">
<%= radio_button_tag(:account, :partner, false, class: 'form-check-input account_type') %>
<%= label_tag(:account, "I am a Partner Agency to an Essentials Bank. I distribute the diapers/period supplies that I receive from essentials banks directly to the public.", class: 'form-check-label') %>
</div>

<% if @bank_selected %>
<script type="module">
$(document).ready(function() {
const bankRadioButtons = $('.account_type[value="bank"]:not(:checked)');

if (bankRadioButtons.length > 0) {
bankRadioButtons.eq(0).click();
}
});
</script>
<% else %>
<script type="module">
$(document).ready(function() {
$('#create_bank').hide()
$('#partner_info').hide()
});
</script>
<% end %>

<script type="module">
$('.account_type').change(function() {
if (this.value === 'bank') {
$('#create_bank').show()
$('#partner_info').hide()
} else {
$('#create_bank').hide()
$('#partner_info').show()
}
})
</script>
<%# Hide #partner_info and #create_bank selections unless radio button selected %>
<style>
#partner_info, #create_bank {
display: none;
}
.form-check:has(#account_partner:checked)~#partner_info,
.form-check:has(#account_bank:checked)~#create_bank {
display: block;
}
</style>

<div class='card-text' id='partner_info'>
<p class='p-2'>Are you a current partner to diaper and/or period supply banks? If so please go <a href='https://humanessentials.app/users/sign_in'>here</a> to login.</p>
Expand Down
61 changes: 32 additions & 29 deletions app/views/layouts/_devise_shared.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<%# required params: title, body_class, masthead_img_src %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
Expand Down Expand Up @@ -31,9 +32,9 @@
padding-left: 0px;
}
</style>
<script type="module">
$(document).ready(function() {
<% if Rails.env.staging? %>
<% if Rails.env.staging? %>
<script type="module">
$(document).ready(function() {
// Prevents users from closing the modal by clicking outside of it or pressing the esc key
new bootstrap.Modal('#warningModal', {
backdrop: 'static',
Expand All @@ -48,16 +49,16 @@
$('.continue-btn').attr("disabled", true);
}
});
<% end %>
});
</script>
});
</script>
<% end %>
</head>

<body id="devise" class="hold-transition login-page <%= body_class %> <%= Rails.env.staging? ? 'login-page-test' : '' %>">
<div class="login-box">
<% if masthead_img_src %>
<div class="login-logo text-center">
<img id="MastheadLogo" src="<%= masthead_img_src %>" alt="Human Essentials" title="Human Essentials" class="serv_icon">
<div class="login-logo">
<img id="MastheadLogo" src="<%= masthead_img_src %>" alt="Human Essentials" title="Human Essentials" class="serv_icon mw-100">
</div>
<% end %>

Expand All @@ -72,31 +73,33 @@
<!-- /.login-box -->

<!-- Modal -->
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="warningModalLabel"><b>This site is for TEST purposes only!</b></h3>
</div>
<div class="modal-body">
You're visiting staging.humanessentials.app, a demo/test site for the full site at <a href="https://humanessentials.app">humanessentials.app</a>.<br>
It is not safe to upload, enter or save any sensitive data here.<br>
<div class="modal-body-warning-text">
If you meant to login to your live account, go to <a href="https://humanessentials.app/users/sign_in">humanessentials.app</a>
<% if Rails.env.staging? %>
<div class="modal fade" id="warningModal" tabindex="-1" role="dialog" aria-labelledby="warningModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="warningModalLabel"><b>This site is for TEST purposes only!</b></h3>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
I Understand
</label>
<div class="modal-body">
You're visiting staging.humanessentials.app, a demo/test site for the full site at <a href="https://humanessentials.app">humanessentials.app</a>.<br>
It is not safe to upload, enter or save any sensitive data here.<br>
<div class="modal-body-warning-text">
If you meant to login to your live account, go to <a href="https://humanessentials.app/users/sign_in">humanessentials.app</a>
</div>
<br>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
I Understand
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning continue-btn" data-bs-dismiss="modal" disabled>Continue To The Test Site</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning continue-btn" data-bs-dismiss="modal" disabled>Continue To The Test Site</button>
</div>
</div>
</div>
</div>
<% end %>
</body>
</html>
8 changes: 4 additions & 4 deletions app/views/users/sessions/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</style>
<%= render partial: "shared/flash" %>
<%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<div class="login-box">
<div class="login-box w-100">
<!-- /.login-logo -->
<div class="card">
<div class="card-body login-card-body">
Expand All @@ -27,7 +27,7 @@
</div>
<div class="form-inputs" data-controller="password-visibility">
<div class="password-input-wrapper">
<%= f.input :password, autofocus: true, input_html: { data: { password_visibility_target: 'password' } } %>
<%= f.input :password, autofocus: true, required: true, input_html: { data: { password_visibility_target: 'password' } } %>
<span class="toggle-password">
<i class="fas fa-eye-slash" data-action="click->password-visibility#toggle" data-password-visibility-target="icon"></i>
</span>
Expand All @@ -53,6 +53,6 @@
</div>
<% end %>

<%= link_to user_google_oauth2_omniauth_authorize_path, method: :post do %>
<img src="../img/[email protected]" alt="Sign in with Google">
<%= link_to user_google_oauth2_omniauth_authorize_path, method: :post, class: "d-block" do %>
<img src="../img/[email protected]" alt="Sign in with Google" class="d-block w-100">
<% end %>
Loading