Add auth view and static files

6 files changed, 219 insertions, 3 deletions

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, `<blueprint_name>.<view_function_name>`
+* 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
--- /dev/null
+++ b/flaskr/static/favicon.ico
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 %}
+  <h1>{% block title %}Log In{% endblock %}</h1>
+{% endblock %}
+
+{% block content %}
+  <form method="post">
+    <label for="username">Username</label>
+    <input name="username" id="username" required>
+    <label for="password">Password</label>
+    <input type="password" name="password" id="password" required>
+    <input type="submit" value="Log In">
+  </form>
+{% 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 %}
+  <h1>{% block title %}Register{% endblock %}</h1>
+{% endblock %}
+
+{% block content %}
+  <form method="post">
+    <label for="username">Username</label>
+    <input name="username" id="username" required>
+    <label for="password">Password</label>
+    <input type="password" name="password" id="password" required>
+    <input type="submit" value="Register">
+  </form>
+{% 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 @@
+<!doctype html>
+<title>{% block title %}{% endblock %} - Flaskr</title>
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+<nav>
+  <h1><a href="{{ url_for('index') }}">Flaskr</a></h1>
+  <ul>
+    {% if g.user %}
+      <li><span>{{ g.user['username'] }}</span>
+      <li><a href="{{ url_for('auth.logout') }}">Log Out</a>
+    {% else %}
+      <li><a href="{{ url_for('auth.register') }}">Register</a>
+      <li><a href="{{ url_for('auth.login') }}">Log In</a>
+    {% endif %}
+  </ul>
+</nav>
+<section class="content">
+  <header>
+    {% block header %}{% endblock %}
+  </header>
+  {% for message in get_flashed_messages() %}
+    <div class="flash">{{ message }}</div>
+  {% endfor %}
+  {% block content %}{% endblock %}
+</section>
\ No newline at end of file