Forms

3 years ago · 3ac5eb941a
parent c4c30f1f86
commit 3ac5eb941a
5 changed files with 86 additions and 10 deletions
--- a/src/app.rb
+++ b/src/app.rb
@ -9,13 +9,20 @@ require "sassc"
 require_relative "database.rb"
 require_relative "func.rb"

-get "/" do
-	slim :index
-end
+enable :sessions

 get "/style.css" do
 	sass :"stylesheets/style", style: :compressed
 end

+get "/" do
+	slim :index
+end

+get "/login" do
+	slim :"user/login"
+end

+get "/register" do
+	slim :"user/register"
+end
--- a/src/views/layout.slim
+++ b/src/views/layout.slim
@ -1,4 +1,3 @@
-<!DOCTYPE html>
 html lang="en"
  head
    meta charset="UTF-8"
@ -8,7 +7,7 @@ html lang="en"
  body
    header
      div
-        div#logo_container
+        a#logo_container href="/" target="_self"
          h1 = "The Auction House"
          h2 = get_random_subtitle
        nav
@ -20,5 +19,3 @@ html lang="en"
              a.button#login href="/login" target="_self"
                | Log in
    ==yield
-  
-
--- a/src/views/stylesheets/style.sass
+++ b/src/views/stylesheets/style.sass
@ -29,16 +29,20 @@ body
    background-color: $bg_alt_clr
    border-bottom: 1px solid $shadow_clr
    padding: .1rem .8rem .4rem .8rem
+    margin-bottom: 1rem

    div
      display: flex
      max-width: 80rem
      margin: 0 auto

-      div#logo_container
+      #logo_container
        display: flex
        flex-direction: column 
        margin: 0
+        text-decoration: none
+        color: $fg_clr
+
        h1
          margin: 0
          opacity: .8
@ -83,5 +87,49 @@ a.button
  transition: opacity .2s

 a.button:hover
-  opacity: .8
-
+  opacity: .6
+
+.form-container
+  display: flex
+  justify-content: center
+
+  form
+    display: flex
+    flex-direction: column
+    padding: 2rem
+    margin: 0
+    width: 60%
+    max-width: 600px
+    border-radius: .4rem
+
+    a
+      color: $special_btn_clr
+      padding: .2rem 0
+
+    h2
+      margin: 0
+      margin-bottom: .1rem
+      text-align: center
+      font-weight: bold
+      font-size: 2.8rem
+
+    input
+      border-radius: .25rem
+      background: $bg_alt_clr
+      border: 3px solid $shadow_clr
+      color: $fg_alt_clr
+      font-family: $font_stack
+      font-size: 1.4rem
+      padding: .2rem 1rem
+
+    input[type=submit]
+      background: $bg_clr
+      transition: color .2s
+
+    input[type=submit]:hover
+      opacity: .8
+      color: $special_btn_clr
+
+
+    input:not(:last-child)
+      margin-bottom: 1rem
--- a/src/views/user/login.slim
+++ b/src/views/user/login.slim
@ -0,0 +1,9 @@
+.form-container
+  form action="/user/login" method="post"
+    h2 Log in 
+    input type="text" name="email" placeholder="Email"
+    input type="password" name="password" placeholder="Password"
+    input type="submit" value="Log in"
+
+    a.button href="/register" target="_self"
+      | Don't have an account? 
--- a/src/views/user/register.slim
+++ b/src/views/user/register.slim
@ -0,0 +1,15 @@
+.form-container
+  form action="/user/new" method="post"
+    h2 Register Account
+    input type="text" name="email" placeholder="Email"
+    input type="text" name="name" placeholder="Name"
+    input type="password" name="password" placeholder="Password"
+    input type="password" name="password_confirm" placeholder="Confirm Password"
+    input type="submit" value="Register"
+
+    a.button href="/login" target="_self"
+      | Log in instead
+
+    a.button href="https://en.wikipedia.org/wiki/Bcrypt" target="_blank"
+      | How we store passwords 
+