[TASK] styling login & user admin interface

frontend/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "liwest",
+  "name": "app.rudernlinz.at",
   "private": true,
   "version": "0.0.0",
   "type": "module",
@@ -9,13 +9,12 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.21",
     "sass": "^1.60.0",
+    "tailwindcss": "^3.3.1",
     "typescript": "^4.9.3",
     "vite": "^4.2.0",
     "vite-plugin-static-copy": "^0.13.1"
-  },
-  "dependencies": {
-    "@popperjs/core": "^2.11.7",
-    "bootstrap": "^5.2.3"
   }
 }

frontend/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  }
+}

frontend/scss/app.scss

@@ -1,3 +1,3 @@
-body {
+@tailwind base;
-  background: red;
+@tailwind components;
-}
+@tailwind utilities;

frontend/tailwind.config.cjs

@@ -0,0 +1,44 @@
+/** @type {import('tailwindcss').Config} */
+const { colors } = require('tailwindcss/defaultTheme');
+
+export default {
+  content: ["../templates/**/*.{html,tera,js}"],
+  theme: {
+    extend: {
+      colors: {
+        transparent: 'transparent',
+        current: 'currentColor',
+        black: '#000000',
+        white: '#ffffff',
+        gray: {
+          50: '#f8fafc',
+          100: '#f1f5f9',
+          200: '#e2e8f0',
+          300: '#cbd5e1',
+          400: '#94a3b8',
+          500: '#64748b',
+          600: '#475569',
+          700: '#334155',
+          800: '#1e293b',
+          900: '#0f172a',
+          950: '#020617',
+        },
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+          950: '#172554',
+        },
+      }
+    },
+  },
+  plugins: [],
+}
+

frontend/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
     "target": "ESNext",
     "useDefineForClassFields": true,
     "module": "ESNext",

templates/admin/user/index.html.tera

@@ -2,30 +2,46 @@
 
 {% block content %}
 
-<h1>Users</h1>
+<div class="max-w-screen-lg w-full grid gap-4">
+  <h1 class="text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Users</h1>
 
-<form action="/admin/user/new" method="post">
+<form action="/admin/user/new" method="post" class="bg-primary-900 text-white px-3 pb-3 pt-2 rounded-md flex items-end md:items-center justify-between">
-	Name: <input type="text" name="name" /><br />
+  <div class="w-full">
-	Guest <input type="checkbox" name="is_guest" checked /><br />
+    <h2 class="text-md font-bold mb-2 uppercase tracking-wide">Neuen User hinzufügen</h2>
-	<input type="submit" />
+    <div class="grid md:grid-cols-3">
+      <div>
+        <label for="name" class="sr-only">Name</label>
+        <input type="text" name="name" class="relative block rounded-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0" placeholder="Name"/> 
+      </div>
+      <div class="flex items-center">
+        <label for="is_guest" class="flex items-center cursor-pointer hover:text-gray-100"><input type="checkbox" id="is_guest" name="is_guest" class="h-4 w-4 accent-gray-200 mr-2" checked="true"/> Gast</label>    
+      </div>
+    </div>      
+  </div>
+  <div>
+    <input value="Hinzufügen" type="submit" class="w-28 rounded-md bg-primary-500 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer"/>
+  </div>
 </form>
 
-
-
-
 {% for user in users %}
-	<form action="/admin/user" method="post">
+	<form action="/admin/user" method="post" class="bg-white p-3 rounded-md flex items-end md:items-center justify-between">
+    <div class="w-full">
       <input type="hidden" name="id" value="{{ user.id }}" />
-		Name: {{ user.name }}<br />
+      <div class="font-bold mb-1">{{ user.name }}</div>
-		Guest <input type="checkbox" name="is_guest" {% if user.is_guest %} checked="true"{% endif %} /><br />
+      <div class="grid md:grid-cols-3">
-		Cox <input type="checkbox" name="is_cox" {% if user.is_cox %} checked="true"{% endif %} /><br />
+        <label for="is_guest{{ loop.index }}" class="flex items-center cursor-pointer hover:text-gray-900"><input type="checkbox" id="is_guest{{ loop.index }}" name="is_guest" {% if user.is_guest %} checked="true"{% endif %} class="h-4 w-4 accent-primary-600 mr-2"/> Gast</label>
-		Admin <input type="checkbox" name="is_admin" {% if user.is_admin %} checked="true"{% endif %} /><br />
+        <label for="is_cox{{ loop.index }}" class="flex items-center cursor-pointer hover:text-gray-900"><input type="checkbox" id="is_cox{{ loop.index }}" name="is_cox" {% if user.is_cox %} checked="true"{% endif %} class="h-4 w-4 accent-primary-600 mr-2"/> Steuerberechtigter</label>
+        <label for="is_admin{{ loop.index }}" class="flex items-center cursor-pointer hover:text-gray-900"><input type="checkbox" id="is_admin{{ loop.index }}" name="is_admin" {% if user.is_admin %} checked="true"{% endif %} class="h-4 w-4 accent-primary-600 mr-2"/> Admin</label>
+      </div>
        {% if user.pw %}
-			<a href="/admin/user/{{ user.id }}/reset-pw">RESET PW</a>
+        <a class="inline-block mt-1 text-primary-600 hover:text-primary-900 underline" href="/admin/user/{{ user.id }}/reset-pw">Passwort ändern</a>
       {% endif %}
-		<input type="submit" />
+    </div>
+		<div>
+      <input value="Ändern" type="submit" class="w-28 rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer"/>
+    </div>
 	</form>
-	<hr />
 {% endfor %}
+</div>
 
 {% endblock content %}

templates/auth/login.html.tera

@@ -19,15 +19,36 @@
       {% endif %}
 {% endif %}
 
-<form method="post" action="/auth">
+  <div class="w-full max-w-md space-y-8">
-	<label for="name">Name</label>
+    <div>
-        <input type="text" id="name" name="name" />
+      <img class="mx-auto h-16 w-auto" src="https://rudernlinz.at/wp-content/uploads/2021/02/cropped-logo.png" alt="Your Company">
+      <h1 class="mt-6 text-center text-3xl uppercase tracking-wide font-bold text-primary-900">Ruderassistent</h1>
+    </div>
+    <form class="mt-8 space-y-6" method="post" action="/auth">
+      <input type="hidden" name="remember" value="true">
+      <div class="-space-y-px rounded-md shadow-sm">
+        <div>
+          <label for="name" class="sr-only">Name</label>
+          <input id="name" name="name" type="input" required class="relative block w-full rounded-t-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" placeholder="Name">
+        </div>
+        <div>
+          <label for="password" class="sr-only">Password</label>
+          <input id="password" name="password" type="password" autocomplete="current-password" required class="relative block w-full rounded-b-md border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6" placeholder="Passwort">
+        </div>
+      </div>
 
-        <label for="password">Passwort</label>
+      <div>
-        <input type="password" id="password" name="password" />
+        <button type="submit" class="group relative flex w-full justify-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600">
-
+          <span class="absolute inset-y-0 left-0 flex items-center pl-3">
-        <button type="submit">Login</button>
+            <svg class="h-5 w-5 text-primary-300 group-hover:text-primary-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clip-rule="evenodd" />
+            </svg>
+          </span>
+          Einloggen
+        </button>
+      </div>
     </form>
+  </div>
 
 
 {% endblock content %}

templates/base.html.tera

@@ -4,11 +4,11 @@
   <link rel="manifest" href="public/manifest.json" />
   <link rel="stylesheet" href="/public/main.css">
 </head>
-<body>
+<body class="bg-gray-100">
-
+  <div class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
     {% block content %}
     {% endblock content %}
-      
+  </div>    
 </body>
 </html>