axum-admin 0.1.1

A modern admin dashboard framework for Axum
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Login — {{ admin_title }}</title>
  <script src="https://cdn.tailwindcss.com?plugins=forms"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: { sans: ['Inter', 'sans-serif'] },
          colors: {
            "surface":                   "#fbf8fc",
            "on-surface":                "#1b1b1e",
            "on-surface-variant":        "#474747",
            "surface-container":         "#f0edf1",
            "surface-container-low":     "#f6f2f7",
            "surface-container-high":    "#eae7eb",
            "surface-container-highest": "#e4e1e6",
            "surface-container-lowest":  "#ffffff",
            "outline-variant":           "#c6c6c6",
            "primary":                   "#000000",
            "on-primary":                "#ffffff",
            "error":                     "#ba1a1a",
          },
        },
      },
    }
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
</head>
<body class="min-h-screen bg-zinc-50 flex items-center justify-center font-sans">
  <div class="bg-white rounded-md border border-zinc-200 shadow-sm p-8 w-full max-w-sm">
    <div class="flex items-center gap-3 mb-8">
      <div class="w-8 h-8 bg-black rounded-md flex items-center justify-center">
        <i class="fa-solid fa-bolt text-white text-xs"></i>
      </div>
      <span class="text-sm font-bold tracking-tight text-zinc-900">{{ admin_title }}</span>
    </div>

    <h1 class="text-xl font-bold text-zinc-900 mb-1">Sign in</h1>
    <p class="text-sm text-zinc-500 mb-6">Enter your credentials to access the admin panel.</p>

    {% if error %}
    <div class="mb-4 px-4 py-3 rounded-md bg-red-50 border border-red-200 text-red-700 text-sm flex items-center gap-2">
      <i class="fa-solid fa-circle-exclamation text-red-500"></i>
      {{ error }}
    </div>
    {% endif %}

    <form method="post" action="/admin/login" class="space-y-4">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
      {% if next %}<input type="hidden" name="next" value="{{ next }}" />{% endif %}
      <div>
        <label class="block text-sm font-medium text-zinc-700 mb-1">Username</label>
        <input name="username" type="text" autocomplete="username" required
               class="w-full border border-zinc-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black" />
      </div>
      <div>
        <label class="block text-sm font-medium text-zinc-700 mb-1">Password</label>
        <input name="password" type="password" autocomplete="current-password" required
               class="w-full border border-zinc-200 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black" />
      </div>
      <button type="submit"
              class="w-full bg-black text-white rounded-md px-4 py-2 text-sm font-semibold hover:bg-zinc-800 transition-colors mt-2">
        Sign in
      </button>
    </form>
  </div>
</body>
</html>