More on PES

bayer/templates/static/login.html

@@ -0,0 +1,149 @@
+{% extends "static/login_base.html" %}
+
+{% block title %}enviPath - Sign In{% endblock %}
+
+{% block extra_styles %}
+  <style>
+    /* Tab styling */
+    .tab-content {
+      display: none;
+    }
+    .tab-content.active {
+      display: block;
+    }
+    input[type="radio"].tab-radio {
+      display: none;
+    }
+    .tab-label {
+      cursor: pointer;
+      padding: 0.75rem 1.5rem;
+      border-bottom: 2px solid transparent;
+      transition: all 0.3s ease;
+    }
+    .tab-label:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+    }
+    input[type="radio"].tab-radio:checked + .tab-label {
+      border-bottom-color: #3b82f6;
+      font-weight: 600;
+    }
+  </style>
+{% endblock %}
+
+{% block content %}
+  <div class="card bg-base-200 mb-6 ">
+    <div class="card-body">
+      <h3 class="card-title">Welcome to the new enviPath!</h3>
+    </div>
+  </div>
+  <!-- Tab Navigation -->
+  <div class="border-base-300 mb-6 border-b">
+    <div class="flex justify-start">
+      <input
+        type="radio"
+        name="auth-tab"
+        id="tab-sso"
+        class="tab-radio"
+        checked
+      />
+      <label for="tab-sso" class="tab-label">SSO</label>
+
+      <input
+        type="radio"
+        name="auth-tab"
+        id="tab-signin"
+        class="tab-radio"
+      />
+      <label for="tab-signin" class="tab-label">Local User</label>
+    </div>
+  </div>
+
+  <!-- SSO Tab -->
+  <div id="content-sso" class="tab-content active">
+      <button role="link" onclick="window.location.href='/entra/login'" name="sso" class="btn btn-primary w-full">
+        Login with Microsoft
+      </button>
+  </div>
+
+  <!-- Sign In Tab -->
+  <div id="content-signin" class="tab-content">
+    <form method="post" action="{% url 'login' %}" class="space-y-4">
+      {% csrf_token %}
+      <input type="hidden" name="login" value="true" />
+
+      <div class="form-control">
+        <label class="label" for="username">
+          <span class="label-text">Account</span>
+        </label>
+        <input
+          type="text"
+          id="username"
+          name="username"
+          placeholder="Username or Email"
+          class="input input-bordered w-full"
+          required
+          autocomplete="username"
+        />
+      </div>
+
+      <div class="form-control">
+        <label class="label" for="passwordinput">
+          <span class="label-text">Password</span>
+        </label>
+        <input
+          type="password"
+          id="passwordinput"
+          name="password"
+          placeholder="••••••••"
+          class="input input-bordered w-full"
+          required
+          autocomplete="current-password"
+        />
+      </div>
+
+      <div class="text-right">
+        <a href="{% url 'password_reset' %}" class="link link-primary text-sm"
+          >Forgot password?</a
+        >
+      </div>
+
+      <input type="hidden" name="next" value="{{ next }}" />
+
+      <button type="submit" name="signin" class="btn btn-primary w-full">
+        Sign In
+      </button>
+    </form>
+  </div>
+
+{% endblock %}
+
+{% block extra_scripts %}
+  <script>
+    // Tab switching functionality
+    document.querySelectorAll('input[name="auth-tab"]').forEach((radio) => {
+      radio.addEventListener("change", function () {
+        // Hide all content
+        document.querySelectorAll(".tab-content").forEach((content) => {
+          content.classList.remove("active");
+        });
+
+        // Show selected content
+        const contentId = "content-" + this.id.replace("tab-", "");
+        document.getElementById(contentId).classList.add("active");
+      });
+    });
+
+    // Check for hash in URL to auto-select tab
+    window.addEventListener("DOMContentLoaded", function () {
+      const hash = window.location.hash.substring(1); // Remove the # symbol
+      if (hash === "signup" || hash === "signin") {
+        const tabRadio = document.getElementById("tab-" + hash);
+        if (tabRadio) {
+          tabRadio.checked = true;
+          // Trigger change event to show correct content
+          tabRadio.dispatchEvent(new Event("change"));
+        }
+      }
+    });
+  </script>
+{% endblock %}