From f59b3ba871f1086beb147c2de46f0cd60ce070c2 Mon Sep 17 00:00:00 2001 From: Mitsuo Tokumori Date: Fri, 27 Oct 2023 19:56:12 -0500 Subject: Add auth view and static files --- README.md | 33 ++++++++- flaskr/static/favicon.ico | Bin 0 -> 1001 bytes flaskr/static/style.css | 134 ++++++++++++++++++++++++++++++++++++ flaskr/templates/auth/login.html | 15 ++++ flaskr/templates/auth/register.html | 15 ++++ flaskr/templates/base.html | 25 +++++++ 6 files changed, 219 insertions(+), 3 deletions(-) create mode 100644 flaskr/static/favicon.ico create mode 100644 flaskr/static/style.css create mode 100644 flaskr/templates/auth/login.html create mode 100644 flaskr/templates/auth/register.html create mode 100644 flaskr/templates/base.html diff --git a/README.md b/README.md index 6433ba2..77aa31e 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,9 @@ flask --app flaskr run --debug ## Learning resources -* https://flask.palletsprojects.com/en/3.0.x/#user-s-guide -* https://sqlite.org/lang.html +* Flask: https://flask.palletsprojects.com/en/3.0.x/#user-s-guide +* DB: https://sqlite.org/lang.html +* Template: https://jinja.palletsprojects.com/templates/ Concepts: @@ -29,7 +30,33 @@ Concepts: * flask.session: dict that stores data across requests (cookies) (securely signed with SECRET_KEY) * *endpoint*: name associated with a view, `.` +* Templates: Used to render HTML. Uses Jinja template library. Autoscapes any + data that is rendered in HTML templates, so it's safe to render user input. + * `{{ }}` denotes expressions (output) (similar to python) + * `{% %}` denotes control flow statements (similar to pseudo-code) + * Automatically available: `g`, `url_for`, and more + * In base.html you define "blocks" placeholder which are later defined in + other templates that extend base.html Gotchas: -* Remember to call db.commit() after modifying DB (DML). \ No newline at end of file +* Remember to call db.commit() after modifying DB (DML). + +Browser warnings and errors: + +* https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value + +## Discussion + +Pros: + +* Flask is AWESOME, it's simple, it's elegant, it's enjoyable to code with. + Following the tutorial provides you all the basic tools to begin creating + projects with flask. +* It's secure, provides you with cryptographic signature for cookies and escapes + HTML transparently to the developer. + +Cons: + +* Maybe scalability and performance is lower compared to PHP or Javascript + web applications. \ No newline at end of file diff --git a/flaskr/static/favicon.ico b/flaskr/static/favicon.ico new file mode 100644 index 0000000..aecf115 Binary files /dev/null and b/flaskr/static/favicon.ico differ diff --git a/flaskr/static/style.css b/flaskr/static/style.css new file mode 100644 index 0000000..6e2a6cd --- /dev/null +++ b/flaskr/static/style.css @@ -0,0 +1,134 @@ +html { + font-family: sans-serif; + background: #eee; + padding: 1rem; + } + + body { + max-width: 960px; + margin: 0 auto; + background: white; + } + + h1, h2, h3, h4, h5, h6 { + font-family: serif; + color: #377ba8; + margin: 1rem 0; + } + + a { + color: #377ba8; + } + + hr { + border: none; + border-top: 1px solid lightgray; + } + + nav { + background: lightgray; + display: flex; + align-items: center; + padding: 0 0.5rem; + } + + nav h1 { + flex: auto; + margin: 0; + } + + nav h1 a { + text-decoration: none; + padding: 0.25rem 0.5rem; + } + + nav ul { + display: flex; + list-style: none; + margin: 0; + padding: 0; + } + + nav ul li a, nav ul li span, header .action { + display: block; + padding: 0.5rem; + } + + .content { + padding: 0 1rem 1rem; + } + + .content > header { + border-bottom: 1px solid lightgray; + display: flex; + align-items: flex-end; + } + + .content > header h1 { + flex: auto; + margin: 1rem 0 0.25rem 0; + } + + .flash { + margin: 1em 0; + padding: 1em; + background: #cae6f6; + border: 1px solid #377ba8; + } + + .post > header { + display: flex; + align-items: flex-end; + font-size: 0.85em; + } + + .post > header > div:first-of-type { + flex: auto; + } + + .post > header h1 { + font-size: 1.5em; + margin-bottom: 0; + } + + .post .about { + color: slategray; + font-style: italic; + } + + .post .body { + white-space: pre-line; + } + + .content:last-child { + margin-bottom: 0; + } + + .content form { + margin: 1em 0; + display: flex; + flex-direction: column; + } + + .content label { + font-weight: bold; + margin-bottom: 0.5em; + } + + .content input, .content textarea { + margin-bottom: 1em; + } + + .content textarea { + min-height: 12em; + resize: vertical; + } + + input.danger { + color: #cc2f2e; + } + + input[type=submit] { + align-self: start; + min-width: 10em; + } \ No newline at end of file diff --git a/flaskr/templates/auth/login.html b/flaskr/templates/auth/login.html new file mode 100644 index 0000000..b7dd5dc --- /dev/null +++ b/flaskr/templates/auth/login.html @@ -0,0 +1,15 @@ +{% extends 'base.html' %} + +{% block header %} +

{% block title %}Log In{% endblock %}

+{% endblock %} + +{% block content %} +
+ + + + + +
+{% endblock %} \ No newline at end of file diff --git a/flaskr/templates/auth/register.html b/flaskr/templates/auth/register.html new file mode 100644 index 0000000..a3c73cc --- /dev/null +++ b/flaskr/templates/auth/register.html @@ -0,0 +1,15 @@ +{% extends 'base.html' %} + +{% block header %} +

{% block title %}Register{% endblock %}

+{% endblock %} + +{% block content %} +
+ + + + + +
+{% endblock %} \ No newline at end of file diff --git a/flaskr/templates/base.html b/flaskr/templates/base.html new file mode 100644 index 0000000..6ea4864 --- /dev/null +++ b/flaskr/templates/base.html @@ -0,0 +1,25 @@ + +{% block title %}{% endblock %} - Flaskr + + + +
+
+ {% block header %}{% endblock %} +
+ {% for message in get_flashed_messages() %} +
{{ message }}
+ {% endfor %} + {% block content %}{% endblock %} +
\ No newline at end of file -- cgit v1.2.3