Profile: styling & stuff

src/app.rb

@@ -36,6 +36,10 @@ get "/" do
 	serve :index
 end
 
+get "/404" do
+	serve :"404"
+end
+
 get "/login" do
 	serve :"user/login"
 end
@@ -44,6 +48,26 @@ get "/register" do
 	serve :"user/register"
 end
 
+get "/profile/:id" do
+	id = params[:id].to_i
+	userobj = User.find_by_id id
+
+	if userobj then
+		serve :"user/profile", {user: userobj}
+	else
+		serve :"404"
+	end
+end
+
+get "/profile" do 
+	if is_logged_in then
+		redirect "/profile/#{session[:userid]}"
+	else
+		redirect "/login"
+	end
+end
+
+
 # API stuff
 post "/register" do
 	email = params[:email]
@@ -66,7 +90,6 @@ post "/login" do
 	password = params[:password]
 
 	status, ret = User.login(email, password)
-	Console.debug "/login STATUS: #{status}", ret
 	if !status then # ret = error message
 		session[:error_msg] = ret
 		redirect "/login"

src/db_models.rb

@@ -17,6 +17,10 @@ class User < EntityModel
 		return @avatar_url
 	end
 
+	def role
+		"INSERT ROLE HERE"
+	end
+
 	# Find user by ID, returns a user object 
 	def self.find_by_id(id)
 		data = self.get("*", "id = ?", id).first

src/func.rb

@@ -3,22 +3,22 @@ def get_random_subtitle
 	subtitles.sample.chomp
 end
 
-def init_info(*infos)
-	g = Hash.new ""
-	info = g.merge(*infos)
-	return info
+def is_logged_in
+	session[:userid] != nil
 end
 
-def user 
+def get_current_user 
 	session[:userid] && User.find_by_id(session[:userid])
 end
 
 # Serve templates
-def serve(template, info={})
-	# Insert the error info (if it exists)
-	error_info = session[:error_msg] != nil ? {error_msg: session[:error_msg]} : {}
+def serve(template, locals={})
+	# Insert the error locals (if it exists)
+	locals[:error_msg] = session[:error_msg] or ""
 	session[:error_msg] = nil
 
+	locals[:session_user] = get_current_user unless !is_logged_in
+
 	# Serve the slim template
-	slim(template, locals: {info: init_info(info, error_info), user: user})
+	slim(template, locals: locals)
 end

src/views/404.slim

@@ -1 +1,2 @@
-404 :(
+h1 
+  | 404 not found :(

src/views/layout.slim

@@ -12,7 +12,7 @@ html lang="en"
           h2 = get_random_subtitle
         nav
           ul
-            - unless user 
+            - unless is_logged_in 
               li
                 a.button#register href="/register" target="_self"
                   | Register
@@ -22,7 +22,7 @@ html lang="en"
             - else
               li
                 a href="/profile" target="_self" 
-                  img.avatar src="#{user.avatar}" alt="Your avatar"
+                  img.avatar src="#{session_user.avatar}" alt="Your avatar"
 
     .content-container
       ==yield

src/views/stylesheets/style.sass

@@ -1,6 +1,9 @@
 @import "fonts"
 
 $font_stack: "Space Mono", monospace
+$border_radius: .25rem
+$border_size: 1px
+
 $bg_clr: #272a34
 $bg_alt_clr: #232730
 $bg_dark_clr: #21242e
@@ -10,7 +13,7 @@ $fg_error: #f77
 
 $shadow_clr: #4b5263 
 
-$special_btn_clr: #4776C1
+$special_clr: #4776C1
 
 \:root
   display: border-box
@@ -25,11 +28,12 @@ html
 
 .content-container
   display: flex
-  flex-direction: column
+  flex-direction: row
   justify-content: center
   width: auto 
   height: 90% 
 
+// Layout
 body
   margin: 0
   height: 100% 
@@ -37,10 +41,16 @@ body
   header
     height: 55px
     background-color: $bg_dark_clr
-    //border-bottom: 1px solid $shadow_clr
+    border-bottom: $border_size solid $shadow_clr
     padding: .1rem .8rem .1rem .8rem
     white-space: nowrap
 
+    img.avatar
+      transition: border .2s
+
+    img.avatar:hover
+      border: 2px solid $special_clr
+
     div
       display: flex
       max-width: 70rem
@@ -83,9 +93,10 @@ body
           li   
             margin: 0 8px
 
+// General
 #login
   color: $fg_alt_clr
-  background-color: $special_btn_clr 
+  background-color: $special_clr 
 
 a.button
   display: inline-block
@@ -109,11 +120,8 @@ img.avatar
   height: auto
   border-radius: 50%
   border: 2px solid $shadow_clr
-  transition: border .2s
-
-img.avatar:hover
-  border: 2px solid $special_btn_clr
 
+// Forms
 .form-container
   display: flex
   justify-content: center
@@ -124,12 +132,12 @@ img.avatar:hover
     justify-content: center
     padding: 2rem
     margin: 0
-    width: 60%
+    width: 50rem
     max-width: 400px
     border-radius: .4rem
 
     a
-      color: $special_btn_clr
+      color: $special_clr
       padding: .2rem 0
 
     h2
@@ -140,7 +148,7 @@ img.avatar:hover
       font-size: 2.2rem
 
     input
-      border-radius: .25rem
+      border-radius: $border_radius
       background: $bg_alt_clr
       border: 3px solid $shadow_clr
       color: $fg_alt_clr
@@ -154,7 +162,82 @@ img.avatar:hover
 
     input[type=submit]:hover
       opacity: .8
-      color: $special_btn_clr
+      color: $special_clr
 
     input:not(:last-child)
       margin-bottom: 1rem
+
+// Profiles
+#profile-container
+  display: grid
+  width: 100%
+  height: 100%
+  max-width: 70rem
+  gap: 2rem
+  padding: 2rem
+  padding-bottom: 0
+  grid-template-columns: 2fr 20rem
+  grid-template-rows: 1fr 10rem 14rem
+  grid-template-areas: "mb ui" "mb ro" "mb re"
+
+  .card-container
+    padding: 0 1rem
+
+  .card
+    background-color: $bg_dark_clr
+    border: $border_size solid $shadow_clr
+    border-radius: $border_radius
+
+    h2
+      text-align: center
+      margin: 0
+      border-bottom: $border_size solid $shadow_clr
+
+  aside#userinfo
+    grid-area: ui
+    text-align: center
+    h2
+      margin: 1rem 0 0 0
+      font-weight: bold
+      border-bottom: none
+    h3
+      margin: 0 0 1rem 0
+      font-weight: normal
+      color: $fg_alt_clr
+      opacity: .5
+
+
+    .avatar-container
+      display: flex
+      justify-content: center
+      img.avatar
+        width: 70%
+        height: auto
+        border: 2px solid $special_clr
+
+  aside#roles
+    grid-area: ro
+    ul
+      display: flex
+      flex-direction: row
+      padding: 0
+      margin: 0
+      list-style-type: none
+      height: auto
+      flex-wrap: wrap
+      li
+        display: flex
+        margin: .5rem
+        padding: .1rem
+        flex-direction: column
+        color: $fg_alt_clr
+        background: $bg_alt_clr
+        border: $border_size solid $shadow_clr
+        border-radius: $border_radius
+
+  aside#reputation
+    grid-area: re
+
+  #bio
+    grid-area: mb
+

src/views/user/login.slim

@@ -1,7 +1,7 @@
 .form-container
   form action="/login" method="post"
     h2 Log in
-    label.error_msg = info[:error_msg]
+    label.error_msg = error_msg 
     input type="text" name="email" placeholder="Email"
     input type="password" name="password" placeholder="Password"
     input type="submit" value="Log in"

src/views/user/profile.slim

@@ -0,0 +1,32 @@
+#profile-container
+  aside#userinfo.card.card-container
+    h2 = user.name
+    h3 = user.role
+
+    .avatar-container
+      img.avatar src="#{user.avatar}" alt="#{user.name}'s avatar"
+
+    p = user.bio_text
+
+  aside#roles.card
+    h2 Roles
+    .card-container
+      ul.roles-container
+        li
+          label role
+        li
+          label role2
+        li
+          label role2
+        li
+          label role2
+        li
+          label role2
+
+  aside#reputation.card
+    p 100 rep
+
+  #bio.card
+    p markdown stuff here...
+  
+

src/views/user/register.slim

@@ -1,7 +1,7 @@
 .form-container
   form action="/register" method="post"
     h2 Register Account
-    label.error_msg = info[:error_msg]
+    label.error_msg = error_msg
     input type="text" name="email" placeholder="Email"
     input type="text" name="name" placeholder="Name"
     input type="password" name="password" placeholder="Password"