Calculator, syling & account stuff

wesweb01/evil_infosite/app.rb

@@ -5,15 +5,17 @@ require "slim"
 
 load "db_parse.rb"
 
+DEFAULT_AVATAR = "https://robohash.org/innonaut.png?size=50x50&set=set1"
+
 enable :sessions
 
 db_cache = get_db() # get all the parsed data
 
-user_creds = {
+user_creds = {}
-	admin: "superpassword"
+user_avatars = Hash.new(DEFAULT_AVATAR)
-}
 
 get "/" do
+	session[:msg] = nil
 	slim(:person, locals: {persondata: db_cache})
 end
 
@@ -26,14 +28,26 @@ get "/registerpage" do
 end
 
 post "/register" do
-	username = params[:username].to_sym
+	userstring = params[:username].chomp.gsub(" ", "")
+	if( userstring.length < 3 ) then
+		session[:msg] = "Invalid username. Minimum chars=3"
+		redirect "/registerpage"
+	end
+
+	username = userstring.to_sym
 	if( user_creds[username] == nil ) then
+		if( params[:password] == params[:password2] ) then
 			user_creds[username] = params[:password]
+			# user_avatars[username] = DEFAULT_AVATAR
 			session[:msg] = "Account created."
 			redirect "/loginpage"
 		else
-		session[:msg] = "Username in use."
+			session[:msg] = "Password does not match, please rewrite password."
-		redirect "/loginpage"
+			redirect "/registerpage"
+		end
+	else
+		session[:msg] = "Username in use. Please pick another."
+		redirect "/registerpage"
 	end
 
 end
@@ -44,10 +58,76 @@ post "/login" do
 
 	if( user_creds[username.to_sym] == password ) then
 		session[:username] = username
+		session[:avatar] = user_avatars[username]
 		session[:msg] = "Login success."
 		redirect "/"
 	else
 		session[:msg] = "Login failed."
+		redirect "/loginpage"
+	end
+end
+
+get "/profile" do
+	session[:msg] = nil
+	if(session[:username] != nil) then
+		slim(:profile)
+	else
+		session[:msg] = "Please login to view your profile."
 		redirect "/login"
 	end
 end
+
+post "/updateavatar" do
+	if( session[:username] != nil ) then
+		if(params[:avatar_url] != "" && params[:avatar_url] != nil) then
+			user_avatars[session[:username].to_s] = params[:avatar_url]	
+			session[:avatar] = params[:avatar_url]
+			redirect "/profile"
+		end
+	else
+		session[:msg] = "You need to login to update your avatar."
+		redirect "/"
+	end
+end
+
+post "/logout" do
+	session[:username] = nil
+	redirect "/"
+end
+
+get "/calc" do
+	slim(:calc)
+end
+
+post "/calculate" do
+	result = 0
+	num1 = params[:number1].to_f
+	num2 = params[:number2].to_f
+	op = params[:op]
+
+	begin
+		case op
+		when "+"
+			result = num1 + num2
+		when "-"
+			result = num1 - num2
+		when "*"
+			result = num1 * num2
+		when "/"
+			result = num1 / num2
+		end
+
+	rescue ZeroDivisionError
+		result = "inf"	
+	end
+	
+	session[:calc_result] = result
+	session[:history] = session[:history] || []
+	session[:history] << {
+		number1: num1,
+		number2: num2,
+		op: op,
+		result: result
+	}
+	redirect "/calc"
+end

wesweb01/evil_infosite/public/css/style.css

@@ -1,10 +1,44 @@
+* {
+	color: #feeaea;
+	box-sizing: border-box;
+}
+
+html {
+	background: linear-gradient(#822, #800);
+}
+
 body {
+	margin: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	flex-direction: column;
 }
 
+hr {
+	width: 95vw;
+	color: #000;
+}
+
+nav ul {
+	display: flex;
+	flex-direction: row;
+	list-style-type: none;
+}
+
+nav ul li {
+	margin: .2rem;
+	padding: .1rem;
+}
+
+nav ul li a {
+	font-size: 1.2rem;
+}
+
+.error {
+	color: #fa1111;
+}
+
 .persons-container {
 	display: flex;
 	flex-wrap: wrap;
@@ -15,21 +49,52 @@ body {
 	grid-template-columns: 1fr 1fr 1fr;
 	grid-template-rows: 1fr 1fr;
 	grid-template-areas: 
-		"av in in"
+		"in in av"
-		"av in in"
+		"in in av"
 	;
 	width: 400px;
 	margin: 1rem;
-	background-color: #aaaaaaaa;
+	background-color: #0004;
-	border: 1px solid #dccf;
+	border-radius: 20px;;
+}
+
+.person ul {
+	padding: 0;
 }
 
-.avatar {
+.avatar, .avatar2 {
+	width: 82px;
+	height: 82px;
+	object-fit: scale-down;
+	border: solid 2px #222;
+	border-radius: 64px;
+	background: linear-gradient(-45deg, #abc, #000);
 	grid-area: av;
+	margin: auto 1rem;
+}
+
+.avatar2 {
+	width: 64px;
+	height: 64px;
+	border-radius: 32px;
+}
+
+.user {
+	position: absolute;
+	right: 0.5rem;
+	top: 0.5rem;
+	display: flex;
+	flex-direction: row-reverse;
+}
+
+.logininfo {
+	margin: auto;
+	font-size: 1.2rem;
 }
 
 .info {
 	grid-area: in;
+	margin-left: 1rem;
 }
 
 .person ul {
@@ -38,5 +103,60 @@ body {
 
 .person label {
 	font-weight: bold;
-	color: #000;
 }
+
+form {
+	display: flex;
+	flex-direction: column;
+	gap: 1rem;
+	margin: 2rem 5rem;
+}
+
+input {
+	appearance: none;
+	padding: .2rem;
+	border-radius: .1rem;
+	border: 2px solid #000;
+	background: #000a;
+	color: #fff;
+	font-size: 1.4rem;
+}
+
+a {
+	color: #88f;
+	transition-duration: opacity 100ms;
+}
+a:hover {opacity: .8;}
+
+.button, select, button, input[type=submit], input[type=button] {
+	background: linear-gradient(45deg, #000, #222);
+	border-radius: .1rem;
+	padding: .2rem .4rem;
+	text-decoration: none;
+	color: #fff;
+	cursor: pointer;
+	transition: opacity 100ms;
+}
+
+.button:hover, select:hover, button:hover, input[type=submit]:hover, input[type=button]:hover {
+	opacity: .8;
+}
+
+.calc-wrapper {
+	padding: 2rem;
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-areas: 2fr 1fr;
+	grid-template-areas: "ca hi";
+}
+
+.calculator {grid-area: ca;}
+.calculator form {
+	display: flex;
+	flex-direction: row;
+}
+.calculator input {
+	font-size: 0.8rem;
+}
+
+.history {grid-area: hi;}

wesweb01/evil_infosite/views/calc.slim

@@ -0,0 +1,24 @@
+.calc-wrapper
+  article.calculator
+        h1 Evil Calculator
+
+        .calc-equ-wrapper
+          form action="/calculate" method="post"
+            input type="number" name="number1" placeholder="Number #1"
+            select name="op"
+              option value="+" selected="selected" = "+"
+              option value="-" = "-"
+              option value="*" = "*"
+              option value="/" = "/"
+            input type="number" name="number2" placeholder="Number #2"
+            input type="submit" value="Calculate!"
+          label = "= #{session[:calc_result]}"
+
+  article.history
+    - if( session[:history] != nil ) then
+      h2 History
+      ul
+        - session[:history].reverse_each do |c|
+            li
+              p = "#{c[:number1]} #{c[:op]} #{c[:number2]} = #{c[:result]}"
+

wesweb01/evil_infosite/views/layout.slim

@@ -1,7 +1,7 @@
 doctype html
 html
   head
-    title Evil Info Site 
+    title E Corp 
     meta charset="UTF-8"
     meta name="viewport" content="width=device-width, initial-scale=1.0"
     // meta name="keywords" content="template language"
@@ -9,14 +9,30 @@ html
     link rel="icon" type="image/png" href="favicon.png"
     link rel="stylesheet" type="text/css" href="css/style.css"
   
+
   body
-    h1 Evil Info Site
+    h1 E Corp 
     h2 A person registry. No we don't care about GDPR.
-    a href="/loginpage" Login
+
-    a href="/registerpage" Register
+    - if(session[:username] != nil) then
-    - if(session[:username] != "") then
+      .user
-        h1 Hello, #{session[:username]}
+        img.avatar2 src="#{session[:avatar]}" alt="profile"
-    - if(session[:msg] != "") then
+        label.logininfo 
-        h1 = session[:msg]
+            |Logged in as 
+            a href="/profile" = session[:username]
+
+    - if(session[:msg] != "" && session[:msg] != nil) then
+        p.error = session[:msg]
+    nav
+      ul
+        li
+          a.button href="/" Home
+        li
+          a.button href="/calc" Calculator
+        li
+          a.button href="/loginpage" Login
+        li
+          a.button href="/registerpage" Register
+    hr
     == yield
 

wesweb01/evil_infosite/views/login.slim

@@ -1,4 +1,5 @@
 article
+  h1 Login
   form action="/login" method="post"
     input type="text" name="username" placeholder="Username"
     input type="password" name="password" placeholder="Password"

wesweb01/evil_infosite/views/person.slim

@@ -1,7 +1,6 @@
 .persons-container
   - persondata.each do |data|
     article.person
-      img.avatar src="#{data[:avatar_url]}"
 
       .info
         h1 #{data[:fname]} #{data[:lname]}
@@ -27,3 +26,5 @@
           li
             label Gender: 
             span #{data[:gender]}
+
+      img.avatar src="#{data[:avatar_url]}"

wesweb01/evil_infosite/views/profile.slim

@@ -0,0 +1,10 @@
+article
+  - if(session[:username] != nil) then
+      h1 Logged in as #{session[:username]} 
+
+      form action="/updateavatar" method="post"
+        input type="text" name="avatar_url" placeholder="Picture URL"
+        input type="submit" value="Update avatar"
+
+      form action="/logout" method="post"
+        input type="submit" value="Logout"

wesweb01/evil_infosite/views/register.slim

@@ -1,6 +1,8 @@
 article
+  h1 Register
   form action="/register" method="post"
     input type="text" name="username" placeholder="Username"
     input type="password" name="password" placeholder="Password"
+    input type="password" name="password2" placeholder="Confirm password"
     input type="submit" value="Register"