add working login page / remember me / clock

README.md

@@ -3,5 +3,8 @@
 Repo following tutorial @
 https://docs.djangoproject.com/en/3.2/intro/  
 
-Login Page example @
-https://learndjango.com/tutorials/django-login-and-logout-tutorial
+✅ Login Page tutorial @
+https://learndjango.com/tutorials/django-login-and-logout-tutorial  
+
+✅ Remember me @
+https://codepen.io/AllThingsSmitty/pen/pOoeyz

djlearn/djlearn/settings.py

@@ -127,4 +127,5 @@ STATIC_URL = '/static/'
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
 
-LOGIN_REDIRECT_URL = '/'
+LOGIN_REDIRECT_URL = 'index'
+LOGOUT_REDIRECT_URL = 'index'

djlearn/pages/static/css/login.css

@@ -19,10 +19,10 @@
 
 .login-form {
     display: flex;
+    min-height: 15vh;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin: 2em;
 }
 
 .login-input {
@@ -30,6 +30,11 @@
     margin: 0.1em;
 }
 
+.login-error {
+    color: red;
+    padding-bottom: 1em;
+}
+
 .spaced {
     width: 100%;
     display: flex;

djlearn/pages/static/js/base.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+    clock();
+  })
+
+function clock() {
+    const today = new Date();
+    let h = today.getHours();
+    let m = today.getMinutes();
+    let s = today.getSeconds();
+    m = checkTime(m);
+    s = checkTime(s);
+    document.getElementById('clock').innerHTML =  h + ":" + m + ":" + s;
+    setTimeout(clock, 1000);
+  }
+  
+function checkTime(i) {
+    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
+    return i;
+}

djlearn/pages/static/js/login.js

@@ -0,0 +1,24 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+
+  const rmCheck = document.getElementById("remember_me"),
+  emailInput = document.getElementById("id_username");
+
+  if (localStorage.checkbox && localStorage.checkbox !== "") {
+    rmCheck.setAttribute("checked", "checked");
+    emailInput.value = localStorage.username;
+  } else {
+    rmCheck.removeAttribute("checked");
+    emailInput.value = "";
+  }
+
+})
+
+function lsRememberMe() {
+  if (rmCheck.checked && emailInput.value !== "") {
+    localStorage.username = emailInput.value;
+    localStorage.checkbox = rmCheck.value;
+  } else {
+    localStorage.username = "";
+    localStorage.checkbox = "";
+  }
+}

djlearn/pages/templates/pages/base.html

@@ -8,6 +8,7 @@
         <link rel="shortcut icon" href="{% static 'img/logo.ico' %}"/>
         <meta name-="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}">
+        <script type="text/javascript" src="{% static 'js/base.js' %}"></script> 
         {% block extrahead %}{% endblock %}
     </head>
 
@@ -21,20 +22,21 @@
                 </div>
                 <!-- center -->
                 <div class="header-center">
-                    {% if user.is_authenticated %}
-                        {{ user.username }}
-            
-                    {% else %}
-                        <p>You are not logged in</p>
-                        <a href="{% url 'login' %}">Log In</a>
-                    {% endif %}
+                    <div id="clock"></div>
                 </div>
                 <!-- right -->
                 <div class="header-right">
-                    <span class="header-text">Sign in:</span>
-                    <a href="/auth/login/" class="header-link">PyHub</a>
-                    <a href="#" class="header-link">Github</a>
-                    <a href="#" class="header-link">Twitter</a>
+                    {% if user.is_authenticated %}
+                        <span class="header-text">
+                            {{ user.username }} 
+                            (<a href="{% url 'logout' %}">logout</a>)
+                        </span>
+                    {% else %}
+                        <span class="header-text">Sign in:</span>
+                        <a href="/auth/login/" class="header-link">PyHub</a>
+                        <a href="#" class="header-link">Github</a>
+                        <a href="#" class="header-link">Twitter</a>
+                    {% endif %}
                 </div>
             </header>
             

djlearn/pages/templates/registration/login.html

@@ -5,6 +5,7 @@
 
 {% block extrahead %}
     <link rel="stylesheet" href="{% static 'css/login.css' %}">
+    <script type="text/javascript" src="{% static 'js/login.js' %}"></script> 
 {% endblock %}
 
 {% block content %}
@@ -14,20 +15,23 @@
         <h1 class="brand">&lt;PyHub Login&gt;</h1>
         <form class="login-form" method="post" action="">
             {% csrf_token %}
-            {{ form.as_p }}
-            <!--
-                    <span><input class="login-input" type="text" name="login" value="" placeholder="Username or Email"></span>
-                    <span><input class="login-input" type="password" name="password" value="" placeholder="Password"></span>
-                    -->
+            {% if form.errors %}
+                <div class="login-error">Username or Password not correct!</div>
+            {% endif %}
+            <p>Username: {{ form.username }}</p>
+            <p>Password: {{ form.password }}</p>
+            
             <div class="spaced">
                 <span class="remember_me">
-                    <label><input type="checkbox" name="remember_me" id="remember_me">Remember me</label>
+                    <input type="checkbox" name="remember_me" id="remember_me"><label for="remember_me">Remember me</label>
                 </span>
-                <span class="submit"><input type="submit" name="commit" value="Login"></span>
+                <span class="submit"><input type="submit" name="commit" value="Login" onclick="lsRememberMe()"></span>
             </div>
         </form>
-        <p>Forgot your password? <a href="#">Click here to reset</a>.</p>
+        <p>Forgot your password? <a href="#">Click here</a>.</p>
     </div>
 </section>
 
+
+
 {% endblock %}