* Create a minimalistic toast

* Profile editing (WIP)

backend/templates/base.html

@@ -16,7 +16,10 @@
             run();
         </script>
 
+        <div id="toast"></div>
+
         {% block body_container %}{% endblock %}
+
         <footer class="footer-container">gburri - 2022</footer>
     </body>
 </html>

backend/templates/base_with_list.html

@@ -5,7 +5,7 @@
 {% endmacro %}
 
 {% block main_container %}
-    <nav class="list">
+    <nav class="recipes-list">
         <ul>
             {% for (id, title) in recipes %}
                 <li>

backend/templates/message.html

@@ -1,6 +1,18 @@
 {% extends "base_with_header.html" %}
 
 {% block main_container %}
-    {{ message|markdown }}
+
+    <div class="message">
+        {% if as_code %}
+            <pre><code>
+        {% endif %}
+
+        {{ message|markdown }}
+
+        {% if as_code %}
+            </code></pre>
+        {% endif %}
+    </div>
+
     <a href="/">Go to home</a>
 {% endblock %}

backend/templates/message_without_user.html

@@ -1,6 +0,0 @@
-{% extends "base.html" %}
-
-{% block body_container %}
-    {% include "title.html" %}
-    {{ message|markdown }}
-{% endblock %}

backend/templates/profile.html

@@ -2,31 +2,35 @@
 
 {% block main_container %}
 
-<h2>Profile</h2>
-
 {% match user %}
 {% when Some with (user) %}
 
-<div id="user-edit">
+<div class="content">
 
-    <label for="title_field">Name</label>
-    <input
-        id="name_field"
-        type="text"
-        name="name"
-        value="{{ user.name }}"
-        autocapitalize="none"
-        autocomplete="title"
-        autofocus="autofocus" />
+    <h1>Profile</h1>
+
+    <form id="user-edit">
+
+        <label for="input-name">Name</label>
+        <input
+            id="input-name"
+            type="text"
+            name="name"
+            value="{{ user.name }}"
+            autocapitalize="none"
+            autocomplete="title"
+            autofocus="autofocus" />
 
 
-    <label for="password_field_1">New password (minimum 8 characters)</label>
-    <input id="password_field_1" type="password" name="password_1" />
+        <label for="input-password-1">New password (minimum 8 characters)</label>
+        <input id="input-password-1" type="password" name="password_1" />
 
-    <label for="password_field_1">Re-enter password</label>
-    <input id="password_field_2" type="password" name="password_2" />
+        <label for="input-password-2">Re-enter password</label>
+        <input id="input-password-2" type="password" name="password_2" />
+
+        <input type="button" value="Save" />
+    </form>
 
-    <button class="button" typed="button">Save</button>
 </div>
 
 {% when None %}

backend/templates/sign_in_form.html

@@ -1,16 +1,21 @@
 {% extends "base_with_header.html" %}
 
 {% block main_container %}
-    <div class="content">
-        <form action="/signin" method="post">
-            <label for="email_field">Email address</label>
-            <input id="email_field" type="email" name="email" value="{{ email }}" autocapitalize="none" autocomplete="email" autofocus="autofocus" />
 
-            <label for="password_field">Password</label>
-            <input id="password_field" type="password" name="password" autocomplete="current-password" />
+<div id="sign-in" class="content">
+
+    <h1>Sign in</h1>
+
+    <form action="/signin" method="post">
+        <label for="input-email">Email address</label>
+        <input id="input-email" type="email" name="email" value="{{ email }}" autocapitalize="none" autocomplete="email" autofocus="autofocus" />
+
+        <label for="input-password">Password</label>
+        <input id="input-password" type="password" name="password" autocomplete="current-password" />
+
+        <input type="submit" value="Sign in" />
+    </form>
+    {{ message }}
+</div>
 
-            <input type="submit" name="commit" value="Sign in" />
-        </form>
-        {{ message }}
-    </div>
 {% endblock %}

backend/templates/sign_up_form.html

@@ -1,22 +1,25 @@
 {% extends "base_with_header.html" %}
 
 {% block main_container %}
-    <div class="content">
-        <form action="/signup" method="post">
-            <label for="email_field">Your email address</label>
-            <input id="email_field" type="email" name="email" value="{{ email }}" autocapitalize="none" autocomplete="email" autofocus="autofocus" />
-            {{ message_email }}
+<div class="content">
 
-            <label for="password_field_1">Choose a password (minimum 8 characters)</label>
-            <input id="password_field_1" type="password" name="password_1" />
+    <h1>Sign up</h1>
 
-            <label for="password_field_1">Re-enter password</label>
-            <input id="password_field_2" type="password" name="password_2" />
+    <form action="/signup" method="post">
+        <label for="input-email">Your email address</label>
+        <input id="input-email" type="email" name="email" value="{{ email }}" autocapitalize="none" autocomplete="email" autofocus="autofocus" />
+        {{ message_email }}
 
-            {{ message_password }}
+        <label for="input-password-1">Choose a password (minimum 8 characters)</label>
+        <input id="input-password-1" type="password" name="password_1" />
 
-            <input type="submit" name="commit" value="Sign up" />
-        </form>
-        {{ message }}
-    </div>
+        <label for="input-password-2">Re-enter password</label>
+        <input id="input-password-2" type="password" name="password_2" />
+
+        {{ message_password }}
+
+        <input type="submit" name="commit" value="Sign up" />
+    </form>
+    {{ message }}
+</div>
 {% endblock %}