rails_base 0.51.0

data/app/views/rails_base/shared/_admin_warning_alert.html.erb

@@ -0,0 +1,7 @@
+<h4 class="alert-heading text-center">!&iexcl; Warning !&iexcl;</h4>
+<hr>
+
+<p class="mb-0 text-center">
+  You are using admin privaleges (id: <%= session[RailsBase::Authentication::Constants::ADMIN_REMEMBER_USERID_KEY] %>) to impersonate a user. You are curently logged in as [<%= current_user.full_name%>] (user id:<%= current_user.id%>)
+</p>
+<%= button_to 'Return to my account', RailsBase.url_routes.admin_stop_impersonation_path, method: :post, class: 'btn btn_warning btn-block'  %>

data/app/views/rails_base/shared/_appearance_mode_selector.html.erb

@@ -0,0 +1,183 @@
+<% if RailsBase.appearance.enabled %>
+  <% if display %>
+    <!-- Button trigger modal -->
+    <button type="button" class="btn btn_info <%= btn%> close-me" data-toggle="modal" data-target="#appearance_mode_selector">
+      Dark/Lite Mode
+    </button>
+
+    <!-- Modal -->
+    <div class="modal fade" id="appearance_mode_selector" tabindex="-1" role="dialog" aria-labelledby="appearance_mode_selectorTitle" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-centered" role="document">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="appearance_mode_selectorTitle">Select Appearance Mode</h5>
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
+          <div class="modal-body">
+            <h5> Currently using <span id='appearance_mode_text'><%= appearance_mode_drop_down[:current] %> <span> </h5>
+            <%= select_tag 'appearance_mode_selector_id', options_for_select(appearance_mode_drop_down[:types_a]), class: 'form-control', include_blank: 'Select Appearance Mode' %>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-block btn_secondary" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+  <style type="text/css">
+    .modal .modal-content.bg-dark {
+      background: black;
+      color: gray ;
+    }
+    select.bg-dark, select.bg-secondary {
+      background-color: black !important;
+      color: white ;
+    }
+    input.bg-dark:not([type='submit']), input.bg-secondary:not([type='submit']) {
+      background-color: black !important;
+      color: white ;
+    }
+    nav li p.bg-dark, nav p.bg-secondary {
+      background-color: black !important;
+      color: white ;
+    }
+    .input-group-text.bg-dark, .input-group-text.bg-secondary {
+      background-color: black !important;
+      color: white ;
+    }
+  </style>
+  <script type="text/javascript">
+    <% dark = RailsBase::Configuration::Appearance::DARK_MODE %>
+    <% light = RailsBase::Configuration::Appearance::LIGHT_MODE %>
+    var type_mapping = JSON.parse('<%= raw RailsBase::Configuration::Appearance::APPEARANCE_TYPES.to_json %>')
+
+    var cookie_name = `<%= RailsBase::ApplicationController::APPEARANCE_MODE_COOKIE %>`;
+    var cookie_actual_name = `<%= RailsBase::ApplicationController::APPEARANCE_MODE_ACTUAL_COOKIE %>`;
+    var dark_mode_changes = [
+      {
+        'descriptor': 'thead',
+        '<%= dark %>': '<%= RailsBase.appearance.t_header.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.t_header.light_mode %>'
+      },
+      {
+        'descriptor': 'tbody',
+        '<%= dark %>': '<%= RailsBase.appearance.t_body.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.t_body.light_mode %>'
+      },
+      {
+        'descriptor': 'body',
+        '<%= dark %>': '<%= RailsBase.appearance.bg_color.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.bg_color.light_mode %>'
+      },
+      {
+        'descriptor': 'input:not(.btn)', // inputs but not button inputs
+        '<%= dark %>': '<%= RailsBase.appearance.bg_color.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.bg_color.light_mode %>'
+      },
+      {
+        'descriptor': '.modal-content',
+        '<%= dark %>': '<%= RailsBase.appearance.bg_color.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.bg_color.light_mode %>'
+      },
+      {
+        'descriptor': 'select',
+        '<%= dark %>': '<%= RailsBase.appearance.bg_color.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.bg_color.light_mode %>'
+      },
+      {
+        'descriptor': 'nav li p',
+        '<%= dark %>': '<%= RailsBase.appearance.bg_color.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.bg_color.light_mode %>'
+      },
+      {
+        'descriptor': '.navbar',
+        '<%= dark %>': '<%= RailsBase.appearance.navbar.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.navbar.light_mode %>'
+      },
+      {
+        'descriptor': 'footer',
+        '<%= dark %>': '<%= RailsBase.appearance.navbar.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.navbar.light_mode %>'
+      },
+      {
+        'descriptor': '.input-group-text',
+        '<%= dark %>': '<%= RailsBase.appearance.navbar.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.navbar.light_mode %>'
+      },
+      {
+        'descriptor': '.<%= appearance_text_class %>',
+        '<%= dark %>': '<%= RailsBase.appearance.text.dark_mode %>',
+        '<%= light %>': '<%= RailsBase.appearance.text.light_mode %>'
+      },
+      // buttons
+      <% RailsBase.appearance.class::BUTTONS.each do |klass| %>
+      {
+        'descriptor': '.<%= klass %>',
+        '<%= dark %>': '<%= RailsBase.appearance.dig(klass, :dark_mode) %>',
+        '<%= light %>': '<%= RailsBase.appearance.dig(klass, :light_mode) %>'
+      },
+      <% end %>
+
+    ]
+
+    function toggle_dark_mode(set_key){
+      set_key ||= get_cookie(cookie_name)
+      var remove_keys = Object.keys(type_mapping)
+      remove_keys.splice( $.inArray(set_key, remove_keys),1 );
+      for (i = 0; i < dark_mode_changes.length; ++i) {
+        var descriptor = dark_mode_changes[i]['descriptor']
+        elements = $(`${descriptor}`)
+        for (s = 0; s < remove_keys.length; ++s) {
+          elements.removeClass(dark_mode_changes[i][remove_keys[s]])
+        }
+        var insert = dark_mode_changes[i][set_key]
+        elements.addClass(insert)
+      }
+    }
+
+    $('#appearance_mode_selector_id').change(function() {
+      var value = $("#appearance_mode_selector_id").val();
+      if(!value){
+        return
+      }
+      set_cookie(cookie_name, '')
+      set_and_toggle_mode(value)
+    })
+    // This function MUST be called outside of document ready
+    // to ensure dark mode does not activate after docuemnt is loaded
+    set_and_toggle_mode( `<%= cookies[RailsBase::ApplicationController::APPEARANCE_MODE_COOKIE] || RailsBase.appearance.default_mode %>`)
+    $('#appearance_mode_selector').appendTo('body');
+    $(document).ready(function(){
+      // differentiation of load order means we need to call this twice
+      set_and_toggle_mode( `<%= cookies[RailsBase::ApplicationController::APPEARANCE_MODE_COOKIE] || RailsBase.appearance.default_mode %>`)
+      $(document).ajaxComplete(function () {
+        set_and_toggle_mode()
+      });
+    });
+
+    function set_and_toggle_mode(value) {
+      if(value){
+        set_cookie(cookie_name, value);
+        set_cookie(cookie_actual_name, value);
+      }
+      $('#appearance_mode_text').text(type_mapping[value])
+      if(get_cookie(cookie_name)=='<%= RailsBase::Configuration::Appearance::MATCH_OS%>'){
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          toggle_dark_mode('<%= dark %>');
+          set_cookie(cookie_actual_name, '<%= dark %>');
+        } else {
+          toggle_dark_mode('<%= light %>');
+          set_cookie(cookie_actual_name, '<%= light %>');
+        }
+      } else {
+        toggle_dark_mode();
+      }
+    }
+
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+      set_and_toggle_mode(get_cookie(cookie_name))
+    });
+  </script>
+<% end %>

data/app/views/rails_base/shared/_custom_form_validation_javascript.html.erb

@@ -0,0 +1,129 @@
+<% if false %>
+I wanted to display what this file is supposed to do. Regular comments dont show syntax and are outward facing.
+
+fwiw, this was mostly an experiment to see if metaprograming from a partial would work with jquery. The hackery that is done here is probably pretty slow
+
+This is expected to help with validation
+Expected to be rendered as a partion: ex
+<%= render partial: 'shared/custom_form_validation_javascript', locals: { function_name: function_name, values: values } %>
+
+params:
+	function_name: String -- no special characters or spaces; Needs to be unique for the page otherwse metaprogramming will overwrite functions
+
+	values: Array - Array of hashes
+
+	Hash structure
+		name: 'class or id of input element'
+		criteria: hash
+			required: (true | false) If the value is expected to not be empty (same as min_length: 1)
+			min_length: numeric of the minimum length allowed
+			max_length: numeric of the maximum length allowed
+			pattern: 'regex pattern of what is expected in the value'
+			enforce_blur: (true | false) if element should enforce validity when blurred out : Default true
+
+Sample params
+<%
+  values = [
+    { name: '#user_first_name', criteria: { required: true, min_length: 2 }},
+    { name: '#user_last_name', criteria: { required: true, min_length: 2 }},
+    { name: '#user_email', criteria: { required: true, pattern: Authentication::Constants::EMAIL_PATTERN }}
+  ]
+  # enforce_blur this is used when validation should only be run on submit
+  # and not when div looses focuse
+  enforce_blur = true || false
+  function_name = 'new_registration'
+%>
+
+<% end %>
+
+<script type="text/javascript">
+	<% default_blur = true unless defined?(enforce_blur) %>
+	function <%= function_name %>_validation_event(){
+		var valid = true
+		console.log('starting validation')
+		<% values.each do |value| %>
+		valid = valid && <%= function_name %>_<%= value[:name][1..-1]%>_valid();
+		console.log(`validating <%= function_name %>_<%= value[:name][1..-1]%>_valid`)
+		<% end %>
+		console.log('finished validation')
+		return valid
+	};
+
+	function <%= function_name %>(){
+		var final_criteria = true
+		<% values.each do |value| %>
+
+		var criteria_met = <%= function_name %>_<%= value[:name][1..-1]%>_valid()
+		<%= function_name %>_manipulator($('<%= value[:name]%>'), criteria_met, false);
+		final_criteria = final_criteria && criteria_met;
+		<% end %>
+		return final_criteria;
+	};
+
+	function <%= function_name %>_manipulator(element, criteria_met, focus){
+		if(criteria_met) {
+		  element.removeClass('is-invalid');
+		} else {
+			if(focus) {
+		  	element.focus();
+		  	element.val('');
+		  };
+		  element.addClass('is-invalid');
+		};
+	};
+
+	<% values.each do |value| %>
+	<% unless value[:criteria][:enforce_blur] == false %>
+	$('<%= value[:name]%>').blur(function() {
+		var criteria_met = <%= function_name %>_<%= value[:name][1..-1]%>_valid()
+		<%= function_name %>_manipulator($('<%= value[:name]%>'), criteria_met, true);
+	});
+	<% end %>
+
+	function <%= function_name %>_<%= value[:name][1..-1]%>_valid(){
+		var criteria_met = true
+
+		<% if value[:criteria].dig(:required) %>
+			if ($('<%= value[:name]%>').val().length === 0){
+				console.log(`<%= value[:name]%> failed criteria required of <%= value[:criteria][:required] %>`)
+				criteria_met = false;
+			};
+		<% end %>
+
+		<% if value[:criteria].dig(:min_length) %>
+			if ($('<%= value[:name]%>').val().length < <%= value[:criteria][:min_length] %>){
+				console.log(`<%= value[:name]%> failed criteria min_length of <%= value[:criteria][:min_length] %>`)
+
+				criteria_met = false;
+			};
+		<% end %>
+
+		<% if value[:criteria].dig(:max_length) %>
+			if ($('<%= value[:name]%>').val().length > <%= value[:criteria][:max_length] %>){
+				console.log(`<%= value[:name]%> failed criteria max_length of <%= value[:criteria][:max_length] %>`)
+				criteria_met = false;
+			};
+		<% end %>
+
+		<% if value[:criteria].dig(:pattern) %>
+			<% case value[:criteria][:pattern] %>
+			<% when :name %>
+			var pattern = /^[a-zA-Z ']+$/
+			<% when :numeric %>
+			var pattern = /^[0-9]+$/
+			<% when :alpha %>
+			var pattern = /^[a-zA-Z]+$/
+			<% when :email %>
+			var pattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+			<% else %>
+			var pattern = /<%= value[:criteria][:pattern] %>/
+			<% end %>
+			if (pattern.test($('<%= value[:name]%>').val()) === false ){
+				console.log(`<%= value[:name]%> failed criteria pattern of <%= value[:criteria][:pattern]%>`)
+				criteria_met = false;
+			};
+		<% end %>
+		return criteria_met
+	};
+	<% end %>
+</script>

data/app/views/rails_base/shared/_enable_mfa_auth_modal.html.erb

@@ -0,0 +1,105 @@
+<div class="modal fade" id="enableMfamodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLabel">Enable 2FA via SMS</h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body form-horizontal row">
+      	<div class="col-md-10 col-md-offset-1">
+      		<div class="form-row phone_number_input_stage">
+		      	<div class="modal_phone_number_input">
+		      		<div class="input-group input-group-lg mx-auto">
+		      			<div class="input-group-prepend">
+		      			  <span class="input-group-text">
+		      			  	US Phone Number
+		      				</span>
+		      			</div>
+		   		   		<%= phone_field_tag(:user_phone_number, nil, style: "font-size:25px;", class: 'phone_us', maxlength: 14, size: 15)%>
+		   		   		<button type="button" class="btn btn_success submit-phone-number" id="submit-phone-number" disabled>Submit Phone</button>
+		   		   		<button id="loading-phone-number" class="btn btn_success" type="button" disabled style="display: none;">
+		   		   		  <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
+  								Loading...
+		   		   		</button>
+		   		   	</div>
+		   		  </div>
+	      	</div>
+
+	      	<div class="modal_mfa_input" style="display: none;">
+						<%= render partial: 'rails_base/shared/mfa_input_layout', locals: { url: RailsBase.url_routes.phone_registration_mfa_code_path, size: 25, masked_phone: current_user&.masked_phone || '<n\a>' }%>
+					</div>
+      	</div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="mr-auto btn btn_secondary" data-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script type="text/javascript">
+	$(document).ready(function(){
+	  $('.phone_us').mask('(000) 000-0000', {placeholder: '(___) ___-____'});
+	});
+
+	function close_modal_actions(){
+		$("#loading-phone-number").hide();
+		$("#submit-phone-number").prop("disabled", true);
+		$("#submit-phone-number").show();
+		$("#user_phone_number").val('');
+		$('.modal_mfa_input').hide();
+		$('.phone_number_input_stage').show();
+		clear_mfa_inputs();
+	}
+
+	$('#enableMfamodal').on('hidden.bs.modal', function () {
+		close_modal_actions
+	});
+
+	$('#enableMfamodal').on('shown.bs.modal', function (e) {
+		$("#user_phone_number").focus();
+	})
+
+	$("input[name='user_phone_number']").keypress(function (e) {
+	 	var key = e.which;
+	 	var modal_open = $('#enableMfamodal').hasClass('show')
+	 	if((key == 13) && modal_open) {  // the enter key code
+	    $("#submit-phone-number").click();
+	  }
+	});
+
+	$("input[name='user_phone_number']").keyup(function() {
+		if ($(this).val().length === 14) {
+			$(".submit-phone-number").prop("disabled", false)
+		} else {
+			$(".submit-phone-number").prop("disabled", true)
+		}
+	});
+
+	$(".submit-phone-number").click(function(){
+		$("#submit-phone-number").prop("disabled", true)
+		$("#submit-phone-number").hide();
+		$("#loading-phone-number").show();
+		var number = $("#user_phone_number").val()
+		var data = { 'phone_number': number}
+		$.ajax({
+		  type: "POST",
+		  url: "<%= RailsBase.url_routes.phone_registration_path%>",
+		  headers: { 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') },
+		  dataType: 'json',
+		  data: data,
+		  success: function(data) {
+		    $('.modal_mfa_input').show();
+		    $('.phone_number_input_stage').hide();
+		    $("#mfa_mfa_pos_0").focus();
+		  },
+		  error: function(xhr, status, error) {
+		    alert(xhr.responseJSON.msg)
+		    close_modal_actions();
+		    $('#enableMfamodal').modal('hide');
+		  }
+		})
+	});
+</script>

data/app/views/rails_base/shared/_error_pages.html.erb

@@ -0,0 +1,123 @@
+<div id="notfound">
+  <div class="notfound">
+    <div class="notfound-404">
+      <h1>Oops!</h1>
+      <h2><%=status%> - <%= msg %> </h2>
+    </div>
+    <a href=<%=RailsBase.url_routes.authenticated_root_path%>>Go Home</a>
+    <a href=# onclick="goBack()">Go Back</a>
+  </div>
+</div>
+<style type="text/css">
+  * {
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+  }
+
+  body {
+    padding: 0;
+    margin: 0;
+  }
+
+  #notfound {
+    position: relative;
+    height: 100vh;
+  }
+
+  #notfound .notfound {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+  }
+
+  .notfound {
+    max-width: 520px;
+    width: 100%;
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  .notfound .notfound-404 {
+    position: relative;
+    height: 200px;
+    margin: 0px auto 20px;
+    z-index: -1;
+  }
+
+  .notfound .notfound-404 h1 {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 236px;
+    font-weight: 200;
+    margin: 0px;
+    color: #211b19;
+    text-transform: uppercase;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+            transform: translate(-50%, -50%);
+  }
+
+  .notfound .notfound-404 h2 {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 28px;
+    font-weight: 400;
+    text-transform: uppercase;
+    color: #211b19;
+    background: #fff;
+    padding: 10px 5px;
+    margin: auto;
+    display: inline-block;
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    right: 0;
+  }
+
+  .notfound a {
+    font-family: 'Montserrat', sans-serif;
+    display: inline-block;
+    font-weight: 700;
+    text-decoration: none;
+    color: #fff;
+    text-transform: uppercase;
+    padding: 13px 23px;
+    background: #ff6300;
+    font-size: 18px;
+    -webkit-transition: 0.2s all;
+    transition: 0.2s all;
+  }
+
+  .notfound a:hover {
+    color: #ff6300;
+    background: #211b19;
+  }
+
+  @media only screen and (max-width: 767px) {
+    .notfound .notfound-404 h1 {
+      font-size: 148px;
+    }
+  }
+
+  @media only screen and (max-width: 480px) {
+    .notfound .notfound-404 {
+      height: 148px;
+      margin: 0px auto 10px;
+    }
+    .notfound .notfound-404 h1 {
+      font-size: 86px;
+    }
+    .notfound .notfound-404 h2 {
+      font-size: 16px;
+    }
+    .notfound a {
+      padding: 7px 15px;
+      font-size: 14px;
+    }
+  }
+</style>
+