Add website file management workflow and deployment script

2025-12-13 22:59:42 -06:00
parent f3c1157d7e
commit dce6460994
35 changed files with 8858 additions and 0 deletions
--- a/website/admin/login.html
+++ b/website/admin/login.html
@@ -0,0 +1,171 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Admin Login - Sky Art Shop</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      body {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          "Helvetica Neue", Arial, sans-serif;
+      }
+      .login-card {
+        background: white;
+        border-radius: 16px;
+        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+        padding: 40px;
+        max-width: 400px;
+        width: 100%;
+      }
+      .login-header {
+        text-align: center;
+        margin-bottom: 30px;
+      }
+      .login-header h1 {
+        color: #2c3e50;
+        font-size: 28px;
+        margin-bottom: 10px;
+      }
+      .login-header p {
+        color: #7f8c8d;
+        margin: 0;
+      }
+      .form-control {
+        border-radius: 8px;
+        padding: 12px;
+        border: 2px solid #e0e0e0;
+      }
+      .form-control:focus {
+        border-color: #667eea;
+        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
+      }
+      .btn-login {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        border: none;
+        border-radius: 8px;
+        padding: 12px;
+        color: white;
+        font-weight: 600;
+        width: 100%;
+        transition: transform 0.2s;
+      }
+      .btn-login:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+      }
+      .btn-login:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+      .alert {
+        border-radius: 8px;
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="login-card">
+      <div class="login-header">
+        <h1>🛍️ Sky Art Shop</h1>
+        <p>Admin Panel Login</p>
+      </div>
+
+      <div class="alert alert-danger" role="alert" id="errorAlert"></div>
+
+      <form id="loginForm">
+        <div class="mb-3">
+          <label for="email" class="form-label">Email Address</label>
+          <input
+            type="email"
+            class="form-control"
+            id="email"
+            name="email"
+            required
+            placeholder="admin@example.com"
+            autocomplete="username"
+          />
+        </div>
+        <div class="mb-4">
+          <label for="password" class="form-label">Password</label>
+          <input
+            type="password"
+            class="form-control"
+            id="password"
+            name="password"
+            required
+            placeholder="Enter your password"
+            autocomplete="current-password"
+          />
+        </div>
+        <button type="submit" class="btn btn-login" id="loginBtn">Sign In</button>
+      </form>
+
+      <div class="text-center mt-4">
+        <a
+          href="/home.html"
+          class="text-decoration-none"
+          style="color: #667eea"
+          >← Back to Website</a
+        >
+      </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+      document
+        .getElementById("loginForm")
+        .addEventListener("submit", async function (e) {
+          e.preventDefault();
+
+          const email = document.getElementById("email").value;
+          const password = document.getElementById("password").value;
+          const errorAlert = document.getElementById("errorAlert");
+          const loginBtn = document.getElementById("loginBtn");
+
+          // Disable button during login
+          loginBtn.disabled = true;
+          loginBtn.textContent = "Signing in...";
+          errorAlert.style.display = "none";
+
+          try {
+            const response = await fetch("/api/admin/login", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              credentials: "include",
+              body: JSON.stringify({ email, password }),
+            });
+
+            const data = await response.json();
+
+            if (response.ok && data.success) {
+              // Login successful - redirect to dashboard
+              window.location.href = "/admin/dashboard.html";
+            } else {
+              // Show error
+              errorAlert.textContent = data.message || "Invalid credentials";
+              errorAlert.style.display = "block";
+              loginBtn.disabled = false;
+              loginBtn.textContent = "Sign In";
+            }
+          } catch (error) {
+            console.error("Login error:", error);
+            errorAlert.textContent = "Login failed. Please try again.";
+            errorAlert.style.display = "block";
+            loginBtn.disabled = false;
+            loginBtn.textContent = "Sign In";
+          }
+        });
+    </script>
+  </body>
+</html>