[TASK] styling login & user admin interface
This commit is contained in:
Marie Birner
parent
2ede4af500
commit
563c5e1bbb
1081
frontend/package-lock.json
generated
1081
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
6
frontend/postcss.config.cjs
Normal file
6
frontend/postcss.config.cjs
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
body {
|
||||
background: red;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
44
frontend/tailwind.config.cjs
Normal file
44
frontend/tailwind.config.cjs
Normal file
@ -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: [],
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
|
||||
@ -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">
|
||||
Name: <input type="text" name="name" /><br />
|
||||
Guest <input type="checkbox" name="is_guest" checked /><br />
|
||||
<input type="submit" />
|
||||
<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">
|
||||
<div class="w-full">
|
||||
<h2 class="text-md font-bold mb-2 uppercase tracking-wide">Neuen User hinzufügen</h2>
|
||||
<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 />
|
||||
Guest <input type="checkbox" name="is_guest" {% if user.is_guest %} checked="true"{% endif %} /><br />
|
||||
Cox <input type="checkbox" name="is_cox" {% if user.is_cox %} checked="true"{% endif %} /><br />
|
||||
Admin <input type="checkbox" name="is_admin" {% if user.is_admin %} checked="true"{% endif %} /><br />
|
||||
<div class="font-bold mb-1">{{ user.name }}</div>
|
||||
<div class="grid md:grid-cols-3">
|
||||
<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>
|
||||
<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 %}
|
||||
|
||||
@ -19,15 +19,36 @@
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<form method="post" action="/auth">
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" />
|
||||
<div class="w-full max-w-md space-y-8">
|
||||
<div>
|
||||
<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>
|
||||
<input type="password" id="password" name="password" />
|
||||
|
||||
<button type="submit">Login</button>
|
||||
<div>
|
||||
<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">
|
||||
<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 %}
|
||||
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user