Have the on screen keyboard working.

TimeSheet/settings.py

@@ -86,6 +86,7 @@ DATABASES = {
 # https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators
 
 AUTH_PASSWORD_VALIDATORS = [
+    '''
     {
         'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
     },
@@ -98,6 +99,7 @@ AUTH_PASSWORD_VALIDATORS = [
     {
         'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
     },
+    '''
 ]
 
 

app/forms.py

@@ -12,15 +12,7 @@ class LoginForm(forms.Form):
     }), label=None, validators=[numeric])
 
 
-class UserForm(forms.Form):
-
-    def clean(self):
-        cleaned_data = self.cleaned_data
-        pin = cleaned_data['pin']
-
-        if pin and User.objects.get(pin=pin):
-            raise forms.ValidationError("not unique")
-
-        # Always return the full collection of cleaned data.
-        return cleaned_data
-    
+class CreateUserForm(forms.Form):
+    first_name = forms.CharField(strip=True, required=True)
+    last_name = forms.CharField(strip=True, required=True)
+    pin = forms.CharField(strip=True, required=True, validators=[numeric], help_text="Numeric values only")

app/templates/create_user.html

@@ -0,0 +1,16 @@
+{% extends 'layout.html' %}
+
+{% block content %}
+    <div class="row justify-content-center">
+        <div class="col-sm-12 col-md-8 col-lg-8 col-xl-6">
+
+            <div class="text-center">
+                <h1><span class="oi" data-glyph="person"></span> New User</h1>
+            </div>
+            {% include 'forms/create_user_form.html' %}
+        </div>
+        <div class="col-12">
+            {% include 'tools/keyboard.html' %}
+        </div>
+    </div>
+{% endblock %}

app/templates/forms/create_user_form.html

@@ -0,0 +1,38 @@
+<form action="{% url 'create_user' %}" method="post">
+    <div class="row">
+        <div class="col-12 mb-3">
+            <label for="first_name" class="form-label">{{ form.first_name.label }}</label>
+            <input type="text" id="first_name" name="first_name" class="form-control {% if form.first_name.errors %}border-danger{% endif %}">
+            {% if form.first_name.errors %}
+                {% for error in form.first_name.errors %}
+                    <div class="text-danger">{{ error }}</div>
+                {% endfor %}
+            {% endif %}
+            <div class="form-text">{{ form.first_name.help_text }}</div>
+        </div>
+        <div class="col-12 mb-3">
+            <label for="last_name" class="form-label">{{ form.last_name.label }}</label>
+            <input type="text" id="last_name" name="last_name" class="form-control">
+            {% if form.last_name.errors %}
+                {% for error in form.first_name.errors %}
+                    <div class="text-danger">{{ error }}</div>
+                {% endfor %}
+            {% endif %}
+            <div class="form-text">{{ form.last_name.help_text }}</div>
+        </div>
+        <div class="col-12 mb-3">
+            <label for="pin" class="form-label">{{ form.pin.label }} {{ form.pin.required }}</label>
+            <input type="text" id="pin" name="pin" class="form-control">
+            {% if form.pin.errors %}
+                {% for error in form.pin.errors %}
+                    <div class="text-danger">{{ error }}</div>
+                {% endfor %}
+            {% endif %}
+            <div class="form-text">{{ form.pin.help_text }}</div>
+        </div>
+        <div class="col-12 mb-3 text-center">
+            {% csrf_token %}
+            <input type="submit"  class="btn btn-dark btn-lg right" value="Create New User">
+        </div>
+    </div>
+</form>

app/templates/layout.html

@@ -8,6 +8,9 @@
     <link href="{% static 'bootstrap-5.0.0-beta1-dist/css/bootstrap.css' %}" rel="stylesheet">
     <link href="{% static 'open-iconic/css/open-iconic.min.css' %}" rel="stylesheet">
     <link href="{% static 'app/css/app.css' %}" rel="stylesheet">
+    <script src="{% static 'jquery-3.5.1/jquery-3.5.1.min.js' %}"></script>
+    <script src="{% static 'bootstrap-5.0.0-beta1-dist/js/bootstrap.bundle.min.js' %}"></script>
+    <script src="{% static 'app/js/keypad.js' %}"></script>
 </head>
 <body>
     <div class="d-flex align-items-center min-vh-100">
@@ -19,7 +22,7 @@
             </div>
             <div class="row justify-content-center">
                 <div class="col-sm-12 col-md-6 col-lg-5">
-                    <div class="card shadow text-center">
+                    <div class="card shadow">
                         <div class="card-body">
                             <div class="row">
                                 <div class="col-12">
@@ -32,8 +35,5 @@
             </div>
         </div>
     </div>
-    <script src="{% static 'jquery-3.5.1/jquery-3.5.1.min.js' %}"></script>
-    <script src="{% static 'bootstrap-5.0.0-beta1-dist/js/bootstrap.bundle.min.js' %}"></script>
-    <script src="{% static 'app/js/keypad.js' %}"></script>
 </body>
 </html>

app/templates/tools/keyboard.html

@@ -0,0 +1,54 @@
+{% load static %}
+
+<div class="keyboard d-none d-md-none d-lg-block">
+    <div class="row mb-3 justify-content-center g-0">
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="1" class="btn btn-lg btn-light border keyboard-key">1</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="2" class="btn btn-lg btn-light border keyboard-key">2</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="3" class="btn btn-lg btn-light border keyboard-key">3</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="4" class="btn btn-lg btn-light border keyboard-key">4</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="5" class="btn btn-lg btn-light border keyboard-key">5</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="6" class="btn btn-lg btn-light border keyboard-key">6</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="7" class="btn btn-lg btn-light border keyboard-key">7</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="8" class="btn btn-lg btn-light border keyboard-key">8</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="9" class="btn btn-lg btn-light border keyboard-key">9</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="0" class="btn btn-lg btn-light border keyboard-key">0</a></div>
+    </div>
+    <div class="row mb-3 justify-content-center g-0">
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="q" class="btn btn-lg btn-light border keyboard-key">q</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="w" class="btn btn-lg btn-light border keyboard-key">w</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="e" class="btn btn-lg btn-light border keyboard-key">e</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="r" class="btn btn-lg btn-light border keyboard-key">r</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="t" class="btn btn-lg btn-light border keyboard-key">t</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="y" class="btn btn-lg btn-light border keyboard-key">y</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="u" class="btn btn-lg btn-light border keyboard-key">u</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="i" class="btn btn-lg btn-light border keyboard-key">i</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="o" class="btn btn-lg btn-light border keyboard-key">o</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="p" class="btn btn-lg btn-light border keyboard-key">p</a></div>
+    </div>
+    <div class="row mb-3 justify-content-center g-0">
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="a" class="btn btn-lg btn-light border keyboard-key">a</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="s" class="btn btn-lg btn-light border keyboard-key">s</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="d" class="btn btn-lg btn-light border keyboard-key">d</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="f" class="btn btn-lg btn-light border keyboard-key">f</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="g" class="btn btn-lg btn-light border keyboard-key">g</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="h" class="btn btn-lg btn-light border keyboard-key">h</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="j" class="btn btn-lg btn-light border keyboard-key">j</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="k" class="btn btn-lg btn-light border keyboard-key">k</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="l" class="btn btn-lg btn-light border keyboard-key">l</a></div>
+    </div>
+    <div class="row mb-3 justify-content-center g-0">
+        <div class="col-2 d-grid gap-2 mx-auto"><a href="#!" data-value="shift" id="shift-key" class="btn btn-lg btn-light border">Shift</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="z" class="btn btn-lg btn-light border keyboard-key">z</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="x" class="btn btn-lg btn-light border keyboard-key">x</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="c" class="btn btn-lg btn-light border keyboard-key">c</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="v" class="btn btn-lg btn-light border keyboard-key">v</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="b" class="btn btn-lg btn-light border keyboard-key">b</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="n" class="btn btn-lg btn-light border keyboard-key">n</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="m" class="btn btn-lg btn-light border keyboard-key">m</a></div>
+    </div>
+    <div class="row g-3">
+        <div class="col-8 d-grid gap-2 mx-auto"><a href="#!" data-value=" " class="btn btn-lg btn-light border keyboard-key">Space</a></div>
+        <div class="col-3 d-grid gap-2 mx-auto"><a href="#!" id="back-key" data-value="back" class="btn btn-lg btn-light border">Back</a></div>
+    </div>
+</div>
+<script src="{% static 'app/js/keyboard.js' %}"></script>

app/urls.py

@@ -19,5 +19,6 @@ from . import views
 urlpatterns = [
     path('', views.home, name='home'),
     path('timesheet', views.timesheet, name="timesheet"),
-    path('logout', views.logout, name="logout"),
+    path('logout', views.logout_user, name="logout"),
+    path('create/user', views.create_user, name="create_user"),
 ]

app/views.py

@@ -3,29 +3,29 @@ from . forms import LoginForm
 from . models import User
 from hashlib import sha256
 from django.core import serializers
+from django.contrib.auth import authenticate, login, logout
+from django.contrib.auth.decorators import login_required
+from .forms import CreateUserForm
 
 
-def logout(request):
-    try:
-        del request.session['user']
-    except Exception as e:
-        print(e)
-
+def logout_user(request):
+    logout(request)
     return redirect('home')
 
 
-def secure_page(request):
-    try:
-        session_user = serializers.deserialize('json', request.session.get('u'))
-        print(session_user)
-        user = User.objects.filter(pin=session_user.pin).first()
-        if user:
-            return True
-        else:
-            del request.session['u']
-            return False
-    except Exception as e:
-        print(e)
+def create_user(request):
+    form = CreateUserForm
+    if request.method == "POST":
+        form = CreateUserForm(request.POST)
+        if form.is_valid():
+            data = form.cleaned_data
+            print(data)
+
+    context = {
+        'form': form
+    }
+
+    return render(request, 'create_user.html', context=context)
 
 
 def home(request):
@@ -55,7 +55,7 @@ def home(request):
     return render(request, 'home.html', context=context)
 
 
-#@secure_page
+@login_required(login_url='/')
 def timesheet(request):
 
     context = {

requirements.txt

@@ -0,0 +1,4 @@
+asgiref==3.3.1
+Django==3.1.6
+pytz==2021.1
+sqlparse==0.4.1

static/app/css/app.css

@@ -2,4 +2,8 @@ body {
     color: #313539;
     background-color: #ced8db;
     min-width:300px;
+}
+
+.keyboard > button {
+    font-size:4em;
 }

static/app/js/keyboard.js

@@ -0,0 +1,62 @@
+let uppercase = false;
+let selected_field = $('input').first().focus();
+
+$('input').focus(function() {
+    selected_field = $(this);
+});
+
+$('#shift-key').click(function() {
+    if(uppercase === false) {
+        $(this).removeClass('bg-light text-dark');
+        $(this).addClass('bg-secondary text-light');
+        uppercase = true;
+        $('.keyboard-key').each(function() {
+            let v = $(this).text();
+            if(v !== "Space")
+            {
+                $(this).text(v.toUpperCase());
+            }
+        });
+    }
+    else
+    {
+        $(this).removeClass('bg-secondary text-light');
+        $(this).addClass('bg-light text-dark');
+        uppercase = false;
+        $('.keyboard-key').each(function() {
+            let v = $(this).text();
+            if(v !== "Space")
+            {
+                $(this).text(v.toLowerCase());
+            }
+        });
+    }
+});
+
+$('#back-key').click(function() {
+    let old_value = selected_field.val();
+    let new_value = old_value.substring(0, old_value.length - 1);
+    selected_field.val(new_value);
+});
+
+$('.keyboard-key').click(function(e) {
+    e.preventDefault();
+    let value = $(this).data('value');
+    let old_value = selected_field.val();
+    if(uppercase === true) {
+        if(!parseInt(value)) {
+            if(value !== 0) {
+                value = value.toUpperCase();
+            }
+        }
+    }
+    else {
+        if(!parseInt(value)) {
+            if(value !== 0) {
+                value = value.toLowerCase()
+            }
+        }
+    }
+    let new_value = old_value + value;
+    selected_field.val(new_value);
+});