solution from previous clone

loginpage/Gemfile

@@ -1,4 +1,5 @@
 source 'https://rubygems.org'
 
-gem 'sinatra', '~> 1.4.5'
-gem 'puma'
+# gem 'sinatra', '~> 1.4.5'
+gem 'sinatra', '2.0.0'
+gem 'puma'

loginpage/Gemfile.lock

@@ -1,20 +1,24 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    puma (2.8.2)
-      rack (>= 1.1, < 2.0)
-    rack (1.5.2)
-    rack-protection (1.5.3)
+    mustermann (1.0.2)
+    puma (3.11.4)
+    rack (2.0.5)
+    rack-protection (2.0.0)
       rack
-    sinatra (1.4.5)
-      rack (~> 1.4)
-      rack-protection (~> 1.4)
-      tilt (~> 1.3, >= 1.3.4)
-    tilt (1.4.1)
+    sinatra (2.0.0)
+      mustermann (~> 1.0)
+      rack (~> 2.0)
+      rack-protection (= 2.0.0)
+      tilt (~> 2.0)
+    tilt (2.0.8)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   puma
-  sinatra (~> 1.4.5)
+  sinatra (= 2.0.0)
+
+BUNDLED WITH
+   1.15.4

loginpage/config.ru

@@ -1,2 +1,2 @@
 require './login_page'
-run LoginPage
+run LoginPage

loginpage/login_page.rb

@@ -8,13 +8,16 @@ class LoginPage < Sinatra::Base
 	end
 
 	post('/login') do
-		puts "   Email: #{params[:email]}"
-		puts "Password: #{params[:password]}"
-
-		if true
+		if (user_params["email"] == "[email protected]" && user_params["password"] == "password123")
 			[200, "success"]
 		else
 			[400, "failure"]
 		end
 	end
-end
+
+  def user_params
+    permitted_fields = ["email", "password"]
+    params["user"].select {|k,v| permitted_fields.include?(k)}
+  end
+
+end

loginpage/public/css/app.css

@@ -0,0 +1,91 @@
+html, body {
+  height: 100%;
+  color: #eeeeee;
+  text-align: center;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between; /*pushes footer to bottom */
+  opacity: 0;
+  transition: box-shadow 1s linear;
+  transition: opacity 1s linear;
+}
+
+.opaque {
+  opacity: 1;
+}
+
+
+.bg {
+    background: url("/img/Blue_sky_and_green_grass-wide.jpg");
+    height: 100%;
+    background-position: center;
+    background-attachment: fixed;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.darken {
+  box-shadow: inset 9999px 9999px rgba(0,0,0,0.50);
+  /* background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/img/Blue_sky_and_green_grass-wide.jpg"); */
+}
+
+.upcase {
+  text-transform: uppercase;
+}
+
+main {
+  height: 90%;
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+summary {
+  font-size: 16px;
+}
+
+#form-box {
+  margin-top: 40px;
+}
+
+#user-message {
+  margin-bottom: 10px;
+}
+
+/* Various tweaks to bootsrap for the form */
+.column {
+  display: flex;
+  flex-direction: column;
+}
+
+.form-inline .form-group{
+  vertical-align: top;
+}
+
+.right {
+  float: right;
+}
+
+.form-check {
+  margin-top: 5px;
+}
+
+.hidden {
+  visibility: hidden;
+}
+
+.red {
+  color: red;
+}
+
+.green {
+  color: #00dd00;
+}
+
+.flash-error {
+  border-color: #ff0000 !important;
+}

loginpage/public/js/app.js

@@ -0,0 +1,67 @@
+setTimeout(()=> {
+  $("#body").addClass("opaque darken");
+},0);
+
+$("#login-form").on("submit", (e)=> {
+  e.preventDefault();
+  let noEmptyFields = true;
+
+  $("#emailInput, #passwordInput").each((index, input) => {
+    input = $(input);
+    if (input.val() === "") {
+      inputError(input, "Field cannot be empty");
+      noEmptyFields = false;
+    } else if (input.attr("id") === "emailInput" && !emailRegex(input.val())) {
+      inputError(input, "Must enter a valid email");
+      noEmptyFields = false;
+    } else {
+      let placeholder = input.attr("id") === "emailInput" ? "Email" : "Password";
+      input.attr("placeholder", placeholder);
+      input.parent().removeClass("has-error has-feedback");
+      $(`#${input.attr("id")}Glyph`).addClass("hidden");
+    }
+  });
+
+  if (noEmptyFields) {
+    signIn({
+      email: $("#emailInput").val(),
+      password: $("#passwordInput").val(),
+    })
+    .done(() => messageUser("You have succesfully logged in", ["green","red"]))
+    .fail(() => messageUser("You have entered an invalid username or password", ["red", "green"]));
+  }
+});
+
+const emailRegex = (str) => {
+  // Borrowed from http://emailregex.com/
+  return str.match(/^(([^<>()\[\]\\.,;:\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,}))$/);
+};
+
+const inputError = (input, message) => {
+  input.parent().addClass("has-error has-feedback"); //use bootsrap error css
+  input.val("");
+  $(`#${input.attr("id")}Glyph`).removeClass("hidden"); //make alert glyph visible
+  input.attr("placeholder", message); //use placeholder to message user
+  inputErrorBlink(input); //briefly set border of input to bright red
+};
+
+const inputErrorBlink = (input) => {
+  input.addClass("flash-error");
+  setTimeout(() => {
+    input.removeClass("flash-error");
+  },500);
+};
+
+const signIn = (user) => {
+  return $.ajax({
+    method: 'post',
+    url: "/login",
+    data: {user}
+  });
+};
+
+const messageUser = (message, classNames) => {
+  $("#user-message").html(message);
+  $("#user-message").addClass(classNames[0]);
+  $("#user-message").removeClass(classNames[1] + " hidden");
+};

loginpage/views/index.erb

@@ -19,29 +19,70 @@
 	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 	<![endif]-->
 </head>
-<body>
+<body id="body" class="bg">
 
+  <main class="container">
 
-<h1>Big Title Heading For This Page</h1>
+    <section>
+      <header class="upcase">
+        <h1>Welcome to Micrsoft's Github XP</h1>
+      </header>
 
-<p>Subtitle Goes Here</p>
+      <h3>Things Just Got Worse</h3>
 
-<p>Add Welcome message/instructions here. Cow beef drumstick ball tip. Kielbasa pastrami flank ribeye pig chicken bacon kevin. Prosciutto ham t-bone kielbasa jerky salami pig jowl drumstick tongue bacon biltong pastrami. Pastrami short ribs pancetta, spare ribs swine bacon beef drumstick shankle landjaeger ground round bresaola pig turkey ball tip. Fatback biltong ham hock shoulder.</p>
+      <summary>
+        Please bear with us while we learn latin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non metus eget tellus eleifend convallis ac et eros. Nunc scelerisque pulvinar egestas. Vivamus feugiat nunc placerat, finibus urna non, vehicula purus.
+      </summary>
+    </section>
 
-<p>[Replace this paragraph with the login form]</p>
+    <section id="form-box">
 
-<p>Use this image as the background: <img src="/img/Blue_sky_and_green_grass-wide.jpg" style="max-width:200px;"></p>
+      <div id="user-message" class="hidden">
 
-<p>Add a footer here with copyright or "call-for-support" message.</p>
+      </div>
 
+      <form id="login-form" class="form-inline" action="/login" method="post">
+        <div class="form-group column" id="emailInputContainer">
+          <label class="sr-only" for="emailInput"></label>
+          <input type="email" class="form-control" id="emailInput" placeholder="Enter email">
+          <span id="emailInputGlyph" class="glyphicon glyphicon-warning-sign form-control-feedback hidden"></span>
+        </div>
+        <div class="form-group column" id="passwordInputContainer">
+          <div class="">
+            <label class="sr-only" for="passwordInput"></label>
+            <input type="password" class="form-control" id="passwordInput" placeholder="Password">
+            <span id="passwordInputGlyph" class="glyphicon glyphicon-warning-sign form-control-feedback hidden"></span>
+          </div>
+          <div class="right">
+            <a href="#">Forgot password?</a>
+          </div>
+        </div>
+        <div class="form-group">
+          <div class="form-check">
+            <input type="checkbox" class="form-check-input" id="rememberMeCheck">
+            <label class="form-check-label" for="rememberMeCheck">Remember me</label>
+          </div>
+        </div>
+        <div class="form-group">
+          <button type="submit" class="btn btn-primary btn-block">Sign in</button>
+        </div>
+      </form>
+    </section>
 
-<!-- Load all that javascript -->
-<!-- jquery and bootstrap are included here for convenience but are not necessary. -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+  </main>
 
-<!-- Put all your code in an external JS file -->
-<script type="text/javascript" src="/js/app.js"></script>
+  <footer>
+    <p>Call for emotional support at (775) 784-8090</p>
+  </footer>
+
+
+  <!-- Load all that javascript -->
+  <!-- jquery and bootstrap are included here for convenience but are not necessary. -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+
+  <!-- Put all your code in an external JS file -->
+  <script type="text/javascript" src="/js/app.js"></script>
 
 </body>
-</html>
+</html>