diff --git a/loginpage/Gemfile b/loginpage/Gemfile index 3cd5dc8..4a5df82 100644 --- a/loginpage/Gemfile +++ b/loginpage/Gemfile @@ -1,4 +1,5 @@ source 'https://rubygems.org' -gem 'sinatra', '~> 1.4.5' -gem 'puma' \ No newline at end of file +# gem 'sinatra', '~> 1.4.5' +gem 'sinatra', '2.0.0' +gem 'puma' diff --git a/loginpage/Gemfile.lock b/loginpage/Gemfile.lock index 74471c5..01dc348 100644 --- a/loginpage/Gemfile.lock +++ b/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 diff --git a/loginpage/config.ru b/loginpage/config.ru index 55975a6..28be456 100644 --- a/loginpage/config.ru +++ b/loginpage/config.ru @@ -1,2 +1,2 @@ require './login_page' -run LoginPage \ No newline at end of file +run LoginPage diff --git a/loginpage/login_page.rb b/loginpage/login_page.rb index cabee89..b764742 100644 --- a/loginpage/login_page.rb +++ b/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"] == "admin@example.com" && user_params["password"] == "password123") [200, "success"] else [400, "failure"] end end -end \ No newline at end of file + + def user_params + permitted_fields = ["email", "password"] + params["user"].select {|k,v| permitted_fields.include?(k)} + end + +end diff --git a/loginpage/public/css/app.css b/loginpage/public/css/app.css index e69de29..1c0c2df 100644 --- a/loginpage/public/css/app.css +++ b/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; +} diff --git a/loginpage/public/js/app.js b/loginpage/public/js/app.js index e69de29..99a12a9 100644 --- a/loginpage/public/js/app.js +++ b/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"); +}; diff --git a/loginpage/views/index.erb b/loginpage/views/index.erb index eb04aaa..45d099a 100644 --- a/loginpage/views/index.erb +++ b/loginpage/views/index.erb @@ -19,29 +19,70 @@ - + +
-

Big Title Heading For This Page

+
+
+

Welcome to Micrsoft's Github XP

+
-

Subtitle Goes Here

+

Things Just Got Worse

-

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.

+ + 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. + +
-

[Replace this paragraph with the login form]

+
-

Use this image as the background:

+ +
+
+ + + +
+
+
+ + + +
+
+ Forgot password? +
+
+
+
+ + +
+
+
+ +
+
+
- - - - +
- - + + + + + + + + + + - \ No newline at end of file +