From 22e0f86bf139f3ef2940e4b7d19fd27af7d09fb0 Mon Sep 17 00:00:00 2001 From: Serhii Horodilov Date: Mon, 30 Jan 2023 16:59:48 +0200 Subject: [PATCH 1/4] Added signin form --- css/blog.css | 27 ++++++++++++++++ css/blog.css.map | 2 +- css/blog.min.css | 2 +- css/blog.scss | 30 +++++++++++++++++- templates/signin.html | 72 +++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 130 insertions(+), 3 deletions(-) create mode 100644 templates/signin.html diff --git a/css/blog.css b/css/blog.css index 3fac510..a7c0406 100644 --- a/css/blog.css +++ b/css/blog.css @@ -57,4 +57,31 @@ height: 25rem; } +.form-auth { + max-width: 330px; + padding: 15px; +} + +.form-auth { + height: 100%; + display: block; + align-items: center; + text-align: center; + max-width: 300px; + padding: 15px; +} +.form-auth .form-floating:focus-within { + z-index: 2; +} +.form-auth input[type=password] { + margin-bottom: 10px; + border-top-left-radius: 0; + border-top-right-radius: 0; +} +.form-auth input[type=email] { + margin-bottom: -1px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + /*# sourceMappingURL=blog.css.map */ diff --git a/css/blog.css.map b/css/blog.css.map index 270fcea..a042ee6 100644 --- a/css/blog.css.map +++ b/css/blog.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"blog.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA","file":"blog.css"} \ No newline at end of file diff --git a/css/blog.min.css b/css/blog.min.css index 697b7fe..9878217 100644 --- a/css/blog.min.css +++ b/css/blog.min.css @@ -1 +1 @@ -.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-dark)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem} \ No newline at end of file +.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-dark)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth .form-floating:focus-within{z-index:2}.form-auth input[type=password]{margin-bottom:10px;border-top-left-radius:0;border-top-right-radius:0}.form-auth input[type=email]{margin-bottom:-1px;border-bottom-right-radius:0;border-bottom-left-radius:0} \ No newline at end of file diff --git a/css/blog.scss b/css/blog.scss index 603240d..d6062db 100644 --- a/css/blog.scss +++ b/css/blog.scss @@ -59,4 +59,32 @@ .carousel-item { height: 25rem; -} \ No newline at end of file +} + +.form-auth { + max-width: 330px; + padding: 15px; +} + +.form-auth { + height: 100%; + display: block; + align-items: center; + text-align: center; + max-width: 300px; + padding: 15px; + .form-floating:focus-within { + z-index: 2; + } + input[type="password"] { + margin-bottom: 10px; + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + input[type="email"] { + margin-bottom: -1px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } +} diff --git a/templates/signin.html b/templates/signin.html new file mode 100644 index 0000000..0b601e8 --- /dev/null +++ b/templates/signin.html @@ -0,0 +1,72 @@ + + + + + + + + Blog + + + + + + + + +
+
+
+
+ +
+
+ Python course +
+
+
+ Authenticate +
+ +
+
+
+
+ +
+
+
+
+

Please sign in

+ +
+ + +
+
+ + +
+ + +
+
+ + + + \ No newline at end of file From 4ebbdf3255373a194d57f58ff6115426a4bec6cd Mon Sep 17 00:00:00 2001 From: Serhii Horodilov Date: Mon, 30 Jan 2023 17:21:55 +0200 Subject: [PATCH 2/4] Added signup form Adjusted form styling --- css/blog.css | 26 +++++++++----- css/blog.css.map | 2 +- css/blog.min.css | 2 +- css/blog.scss | 36 ++++++++++++++----- templates/signin.html | 2 +- templates/signup.html | 83 +++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 132 insertions(+), 19 deletions(-) create mode 100644 templates/signup.html diff --git a/css/blog.css b/css/blog.css index a7c0406..5bbf771 100644 --- a/css/blog.css +++ b/css/blog.css @@ -70,18 +70,28 @@ max-width: 300px; padding: 15px; } +.form-auth input { + border-radius: 0; +} +.form-auth input#username { + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; +} .form-auth .form-floating:focus-within { z-index: 2; } -.form-auth input[type=password] { - margin-bottom: 10px; - border-top-left-radius: 0; - border-top-right-radius: 0; +.form-auth .btn[type=submit] { + margin-top: 20px; } -.form-auth input[type=email] { - margin-bottom: -1px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + +.form-auth.form-signin #password { + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; +} + +.form-auth.form-signup #confirmPassword { + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; } /*# sourceMappingURL=blog.css.map */ diff --git a/css/blog.css.map b/css/blog.css.map index a042ee6..dd2eabf 100644 --- a/css/blog.css.map +++ b/css/blog.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA","file":"blog.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AASF;EACE;EACA;;;AAIF;EACE;EACA","file":"blog.css"} \ No newline at end of file diff --git a/css/blog.min.css b/css/blog.min.css index 9878217..4028893 100644 --- a/css/blog.min.css +++ b/css/blog.min.css @@ -1 +1 @@ -.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-dark)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth .form-floating:focus-within{z-index:2}.form-auth input[type=password]{margin-bottom:10px;border-top-left-radius:0;border-top-right-radius:0}.form-auth input[type=email]{margin-bottom:-1px;border-bottom-right-radius:0;border-bottom-left-radius:0} \ No newline at end of file +.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-dark)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth .btn[type=submit]{margin-top:20px}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem} \ No newline at end of file diff --git a/css/blog.scss b/css/blog.scss index d6062db..a2e3c88 100644 --- a/css/blog.scss +++ b/css/blog.scss @@ -73,18 +73,38 @@ text-align: center; max-width: 300px; padding: 15px; + + input { + border-radius: 0; + } + + input#username { + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; + } + .form-floating:focus-within { z-index: 2; } - input[type="password"] { - margin-bottom: 10px; - border-top-left-radius: 0; - border-top-right-radius: 0; + + .btn[type=submit] { + margin-top: 20px; } +} + +.form-auth.form-signup { + +} - input[type="email"] { - margin-bottom: -1px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; +.form-auth.form-signin { + #password { + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; + } +} +.form-auth.form-signup { + #confirmPassword { + border-bottom-left-radius: 1rem; + border-bottom-right-radius: 1rem; } } diff --git a/templates/signin.html b/templates/signin.html index 0b601e8..70d2923 100644 --- a/templates/signin.html +++ b/templates/signin.html @@ -50,7 +50,7 @@ -
+

Please sign in

diff --git a/templates/signup.html b/templates/signup.html new file mode 100644 index 0000000..81103a7 --- /dev/null +++ b/templates/signup.html @@ -0,0 +1,83 @@ + + + + + + + + Blog + + + + + + + + +
+
+
+
+ +
+
+ Python course +
+
+
+ Authenticate +
+ +
+
+
+
+ +
+
+
+ +

Please sign in

+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + + +
+ + + + \ No newline at end of file From 0f1454dc0685154cb29834be685af2cec71ccc09 Mon Sep 17 00:00:00 2001 From: Serhii Horodilov Date: Mon, 30 Jan 2023 17:27:14 +0200 Subject: [PATCH 3/4] Added cross-link to auth forms --- css/blog.css | 3 --- css/blog.css.map | 2 +- css/blog.min.css | 2 +- css/blog.scss | 4 ---- templates/signin.html | 8 +++++--- templates/signup.html | 7 ++++++- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/css/blog.css b/css/blog.css index 5bbf771..940a8ad 100644 --- a/css/blog.css +++ b/css/blog.css @@ -80,9 +80,6 @@ .form-auth .form-floating:focus-within { z-index: 2; } -.form-auth .btn[type=submit] { - margin-top: 20px; -} .form-auth.form-signin #password { border-bottom-left-radius: 1rem; diff --git a/css/blog.css.map b/css/blog.css.map index dd2eabf..bf3b423 100644 --- a/css/blog.css.map +++ b/css/blog.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;;AASF;EACE;EACA;;;AAIF;EACE;EACA","file":"blog.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AASF;EACE;EACA;;;AAIF;EACE;EACA","file":"blog.css"} \ No newline at end of file diff --git a/css/blog.min.css b/css/blog.min.css index 4028893..22d3940 100644 --- a/css/blog.min.css +++ b/css/blog.min.css @@ -1 +1 @@ -.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-dark)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth .btn[type=submit]{margin-top:20px}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem} \ No newline at end of file +.blog-header{border-bottom:2px solid #e5e5e5}.blog-header .avatar,.blog-header .logo{max-height:2.75rem;max-width:2.75rem}.blog-title{font-family:"Playfair Display",Georgia,"Times New Roman",serif;font-size:2.25rem}.blog-title:hover{text-decoration:none}.nav-scroller{position:relative;z-index:2;height:2.75rem;overflow-y:hidden}.nav-scroller .nav{display:flex;flex-wrap:nowrap;padding-bottom:1rem;margin-top:-1px;overflow-x:auto;text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}.position-sticky{top:2rem}.social{font-size:2.75rem;color:var(--bs-dark)}.carousel{margin-bottom:4rem}.carousel-caption{bottom:3rem;z-index:10}.carousel-item{height:25rem}.form-auth{height:100%;display:block;align-items:center;text-align:center;max-width:300px;padding:15px}.form-auth input{border-radius:0}.form-auth input#username{border-top-left-radius:1rem;border-top-right-radius:1rem}.form-auth .form-floating:focus-within{z-index:2}.form-auth.form-signin #password,.form-auth.form-signup #confirmPassword{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem} \ No newline at end of file diff --git a/css/blog.scss b/css/blog.scss index a2e3c88..cc29fb4 100644 --- a/css/blog.scss +++ b/css/blog.scss @@ -86,10 +86,6 @@ .form-floating:focus-within { z-index: 2; } - - .btn[type=submit] { - margin-top: 20px; - } } .form-auth.form-signup { diff --git a/templates/signin.html b/templates/signin.html index 70d2923..3f0975d 100644 --- a/templates/signin.html +++ b/templates/signin.html @@ -53,7 +53,6 @@

Please sign in

-
@@ -62,8 +61,11 @@

Please sign in

- - +
+

Have no account?

+ Sing up now +
+
diff --git a/templates/signup.html b/templates/signup.html index 81103a7..46f2f2d 100644 --- a/templates/signup.html +++ b/templates/signup.html @@ -74,7 +74,12 @@

Please sign in

- +
+

Have already an account?

+ Sing in here +
+ +
From 44c1b52368b2ee8a3802283f0508b4f8647c4b89 Mon Sep 17 00:00:00 2001 From: Serhii Horodilov Date: Mon, 30 Jan 2023 17:35:55 +0200 Subject: [PATCH 4/4] Added cross-link to auth forms --- css/blog.css.map | 2 +- css/blog.scss | 4 ---- templates/signin.html | 16 ++++++++++------ templates/signup.html | 16 ++++++++++------ 4 files changed, 21 insertions(+), 17 deletions(-) diff --git a/css/blog.css.map b/css/blog.css.map index bf3b423..b1d4b26 100644 --- a/css/blog.css.map +++ b/css/blog.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AASF;EACE;EACA;;;AAIF;EACE;EACA","file":"blog.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["blog.scss"],"names":[],"mappings":"AAAA;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;;;AAKF;EACE;EACA;;;AAIF;EACE;EACA","file":"blog.css"} \ No newline at end of file diff --git a/css/blog.scss b/css/blog.scss index cc29fb4..8061b60 100644 --- a/css/blog.scss +++ b/css/blog.scss @@ -88,10 +88,6 @@ } } -.form-auth.form-signup { - -} - .form-auth.form-signin { #password { border-bottom-left-radius: 1rem; diff --git a/templates/signin.html b/templates/signin.html index 3f0975d..ef34a70 100644 --- a/templates/signin.html +++ b/templates/signin.html @@ -25,13 +25,17 @@ Python course
-
- Authenticate +
+ + +
-
diff --git a/templates/signup.html b/templates/signup.html index 46f2f2d..7541bb0 100644 --- a/templates/signup.html +++ b/templates/signup.html @@ -25,13 +25,17 @@ Python course
-
- Authenticate +
+ + +
-