From 3ac5eb941a477f975b3c81afcb41eab8ec2b90bb Mon Sep 17 00:00:00 2001 From: "E. Almqvist" Date: Fri, 4 Feb 2022 10:02:13 +0100 Subject: [PATCH] Forms --- src/app.rb | 13 ++++++-- src/views/layout.slim | 5 +-- src/views/stylesheets/style.sass | 54 ++++++++++++++++++++++++++++++-- src/views/user/login.slim | 9 ++++++ src/views/user/register.slim | 15 +++++++++ 5 files changed, 86 insertions(+), 10 deletions(-) create mode 100644 src/views/user/login.slim create mode 100644 src/views/user/register.slim diff --git a/src/app.rb b/src/app.rb index 5c4bd1d..9980647 100755 --- 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 diff --git a/src/views/layout.slim b/src/views/layout.slim index e90813b..b0a702c 100644 --- a/src/views/layout.slim +++ b/src/views/layout.slim @@ -1,4 +1,3 @@ - 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 - - diff --git a/src/views/stylesheets/style.sass b/src/views/stylesheets/style.sass index c618b59..8d21424 100644 --- 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 diff --git a/src/views/user/login.slim b/src/views/user/login.slim new file mode 100644 index 0000000..980979c --- /dev/null +++ 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? diff --git a/src/views/user/register.slim b/src/views/user/register.slim new file mode 100644 index 0000000..cffb500 --- /dev/null +++ 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 +