Custom Admin Login (#159)

- Custom admin login page --------- Co-authored-by: Omer Cohen <omer@descope.com>
descope · Jun 26, 2023 · b1524ba · b1524ba
1 parent 435072a
commit b1524ba
Show file tree

Hide file tree

Showing 10 changed files with 297 additions and 46 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,8 +2,4 @@
     "python.linting.flake8Enabled": true,
     "python.linting.enabled": true,
     "python.formatting.provider": "black",
-    "[django-html]": {
-        "editor.formatOnSave": true,
-        "editor.defaultFormatter": "junstyle.vscode-django-support"
-    },
 }
diff --git a/django_descope/templates/admin/descope_login.html b/django_descope/templates/admin/descope_login.html
@@ -0,0 +1,23 @@
+{% load descope %} {% load static %}
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Django Admin</title>
+</head>
+
+<body>
+  <div class="flex-col">
+    {% if user.is_authenticated %}
+    <p class="errornote">
+      You are authenticated as {{ user.email }}, but are not authorized to
+      access this page. Would you like to login to a different account?
+    </p>
+    {% else %}
+    {% descope_flow "sign-up-or-in" "/admin" %}
+    {% endif %}
+  </div>
+</body>
+
+</html>
diff --git a/example_app/static/css/style.css b/example_app/static/css/style.css
@@ -0,0 +1,48 @@
+@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+
+
+body, html {
+    margin: 0;
+    padding: 0;
+}
+h1, p {
+    font-weight: 600;
+}
+h1 {
+    font-family: 'Press Start 2P', cursive;
+    background-color: rgb(24, 24, 24);
+    padding: 3vh 4vh;
+    color: rgb(0, 255, 204);
+    margin-top: 3vh;
+}
+.debug-btn {
+    margin-top: 3vh;
+    font-family: 'Press Start 2P', cursive;
+    color: black;
+}
+.flex-col {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 100%;
+    width: 100%;
+}
+.logo {
+    width: 8vw;
+    height: auto;
+}
+.logo-container {
+    margin-top: 5vh;
+    padding: 3vh;
+    border-radius: 50%;
+    background-color: rgb(24, 24, 24);
+    width: fit-content;
+}
+.logout {
+    color: rgb(241, 72, 29);
+}
+.logo-container, h1 {
+    box-shadow: 0px 0px 5px rgb(125, 125, 125), 0px 0px 10px rgb(31, 31, 31);
+}
diff --git a/example_app/static/images/logo.png b/example_app/static/images/logo.png
diff --git a/example_app/templates/descope_login.html b/example_app/templates/descope_login.html
@@ -1,4 +1,6 @@
 {% load descope %}
+{% load static %}
+
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -7,15 +9,22 @@
     <title>Descope Django</title>
     <meta name="description" content="Descope Example" />
     <meta name="author" content="Descope" />
+    <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
   </head>
 
   <body>
-    {% if user.is_authenticated %}
-    <h1>Welcome {{ user.email }} you are logged in!</h1>
-    <p><a href="{% url 'debug' %}">Detailed user information</a></p>
-    <p><a href="{% url 'logout' %}">Log Out</a></p>
-    {% else %}
-      {% descope_flow "sign-up-or-in" "/" %}
-    {% endif %}
+    <div class="flex-col">
+      <div class="logo-container flex-col">
+        <img src="{% static '/images/logo.png' %}" alt="logo" class="logo">
+      </div>
+      <h1 class="title">Django Sample App</h1>
+      {% if user.is_authenticated %}
+        <a class="debug-btn" href={% url 'debug' %}>Debug &#8594;</a>
+        <a class="debug-btn" href={% url 'admin:index' %}>Admin &#8594;</a>
+        <a class="debug-btn logout" href="{% url 'logout' %}">Logout &#8594;</a>
+      {% else %}
+        {% descope_flow "sign-up-or-in" "/admin" %}
+      {% endif %}
+    </div>
   </body>
 </html>
diff --git a/example_app/views.py b/example_app/views.py
@@ -7,6 +7,10 @@
 
 from django_descope import descope_client
 from django_descope.models import DescopeUser
+from django.shortcuts import render
+
+from django.urls import path
+
 
 logger = logging.getLogger(__name__)