Skip to content

Commit

Permalink
2056 sandbox site warning (#2085)
Browse files Browse the repository at this point in the history 
* deletes unused icheck from layouts/devise and deletes icheck.min.js

* Prevents users from closing the modal warning by clicking outside of it or pressing the esc key in order to direct their attention to the reminder itself; users can only select the continue button after checking the checkbox; Adds bold, red text and yellow buttons as warning cues; Rewords the warning for non-tech-savvy users; Changes background to a repeated watermark image to visually differentiate from diaper.app; Changes conditional in new.html.erb and devise.html.erb to check for Rails.env.stating

* changes modal id from exampleModal to warningModal; Moves the modal and corresponding JS logic to devise.html.erb so that it works on both the login and pw reset page; Moves custom styles to app/assets/stylesheets/custom.scss; Rewords from safely sign in to if you meant; Removes Safely Sign In btn; Adds minor spacing fixes to code comments

* Adds background image asset for login and pw reset pages

* changes condition check to Rails.env.staging in devise.html.erb file

* working on Capybara test to check for modal on staging env

* adds Capybara tests to check for modal/no modal in login and pw reset pages when in staging env

* Update app/views/layouts/devise.html.erb

Co-authored-by: Edwin Mak <[email protected]>

* adds Edwins refactor to the capybara test

* Change digest setting in development

Co-authored-by: Edwin Mak <[email protected]>
  • Loading branch information
@nataliagalan @edwinthinks
nataliagalan and edwinthinks authored Jan 9, 2021
1 parent c2d042e commit f9994b2
Show file tree
Hide file tree
Showing 7 changed files with 103 additions and 64 deletions.
Binary file added app/assets/images/test-only-background.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 0 additions & 10 deletions app/assets/javascripts/icheck.min.js
View file

This file was deleted.

8 changes: 8 additions & 0 deletions app/assets/stylesheets/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,11 @@
background-color: #f8f9fa;
}
}

.login-page-test {
background-image: image-url("test-only-background.jpg");
}

.modal-body-warning-text {
color: #ee5034
}
25 changes: 1 addition & 24 deletions app/views/devise/sessions/new.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,28 +60,5 @@
</div>
</div>
<% end %>
<script>
$(document).ready(function() {
<% if Rails.env.staging? %>
$('#exampleModal').modal('show');
<% end %>
});
</script>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLabel">Demo Site Reminder</h3>
</div>
<div class="modal-body">
Please be aware that diaperbase.org is a demo/test server for <a href="https://diaper.app">diaper.app</a>.
Multiple people have access to the test accounts so please do not save or upload any sensitive data.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">I Understand</button>
</div>
</div>
</div>
</div>

91 changes: 63 additions & 28 deletions app/views/layouts/devise.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,39 +10,74 @@
<%= csrf_meta_tags %>
<%= javascript_include_tag 'application' %>
<%= stylesheet_link_tag 'application', media: 'all' %>
<!-- iCheck -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<style>
.checkbox label{
padding-left: 0px;
}
</style>
.checkbox label{
padding-left: 0px;
}
</style>
<script>
$(document).ready(function() {
<% if Rails.env.staging? %>
// Prevents users from closing the modal by clicking outside of it or pressing the esc key
$('#warningModal').modal({
backdrop: 'static',
keyboard: false
});
// Adds click event handler on the checkbox
$('#defaultCheck1').click(function(){
// If the checkbox is checked, enable the continue button
if($(this).is(':checked')){
$('.continue-btn').attr("disabled", false);
} else{
$('.continue-btn').attr("disabled", true);
}
});
<% end %>
});
</script>
</head>
<body id="devise" class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">

<img id="MastheadLogo" src="/img/diaper-base-logo-full-white-text.svg" style="width: 80%; height: 80%; " alt="Diaperbase" title="Diaperbase" class="serv_icon"/>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<div class="form-group has-feedback">
<%= yield %>
<body id="devise" class="hold-transition login-page <%= Rails.env.staging? ? 'login-page-test' : '' %>">
<div class="login-box">
<div class="login-logo">
<img id="MastheadLogo" src="/img/diaper-base-logo-full-white-text.svg" style="width: 80%; height: 80%; " alt="Diaperbase" title="Diaperbase" class="serv_icon"/>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<div class="form-group has-feedback">
<%= yield %>
</div>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<!-- /.login-box -->

<script src="/assets/icheck.min.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
<!-- 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 diaperbase.org, a demo/test site for the full site at <a href="https://diaper.app">diaper.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://diaper.app/users/sign_in">diaper.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-dismiss="modal" disabled>Continue To The Test Site</button>
</div>
</div>
</div>
</div>
</body>
</html>
4 changes: 4 additions & 0 deletions config/environments/development.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@
# number of complex assets.
config.assets.debug = false

# Prevent caching of assets locally so that assets refresh when
# styles get changed in styles
config.assets.digest = false

# Prevent raising error if an asset is not precompiled
# Error example: Sprockets::rails::Helper::AssetNotPrecompiled
config.assets.check_precompiled_asset = false
Expand Down
29 changes: 27 additions & 2 deletions spec/system/log_in_system_spec.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,33 @@
fill_in "user_email", with: "[email protected]"
fill_in "user_password", with: "password"
find('input[name="commit"]').click

expect(page).to have_content("Invalid Email or password")
end
end
end

describe 'Showing the modal warning in staging' do
["/users/sign_in", "/users/password/new"].each do |path|
context "when accessing #{path} in the staging environment" do
before do
allow(Rails.env).to receive(:staging?).and_return(true)
visit path
end

it 'should render the modal' do
expect(page).to have_content 'This site is for TEST purposes only!'
end
end

context "when accessing #{path} not in the staging environment" do
before do
allow(Rails.env).to receive(:staging?).and_return(false)
visit path
end

it 'should not render the modal' do
page.assert_no_selector('#warningModal')
end
end
end
end
end

0 comments on commit f9994b2

Please sign in to comment.