continued
implemented HTMX implemented ORM (sequelize)
This commit is contained in:
parent
2a9bd4e81b
commit
d756a192e4
71 changed files with 3822 additions and 694 deletions
41
views/htmx/profile/editData.njk
Normal file
41
views/htmx/profile/editData.njk
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<form class="flex flex-col gap-6" hx-post="/htmx/profile/data/edit" hx-target="#profile-data-section">
|
||||
<div class="flex w-full">
|
||||
<span class="text-2xl font-bold">
|
||||
edit Personal Data
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-row align-center gap-4">
|
||||
<div class="flex flex-col w-1/2 gap-3">
|
||||
<label for="firstName" class="w-full text-sm font-medium">
|
||||
First Name
|
||||
</label>
|
||||
<input type="text" name="firstName" class="" placeholder="John" value="{{ data.firstName }}">
|
||||
</div>
|
||||
<div class="flex flex-col w-1/2 gap-3">
|
||||
<label for="lastName" class="w-full text-sm font-medium">
|
||||
Last Name
|
||||
</label>
|
||||
<input type="text" name="lastName" class="" placeholder="Doe" value="{{ data.lastName }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<label for="mail" class="w-full text-sm font-medium">
|
||||
Mail Address
|
||||
</label>
|
||||
<input type="text" name="mail" class="" placeholder="john@doe.com" value="{{ data.mail }}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full justify-end gap-4">
|
||||
<a href="#" class="button-sm"
|
||||
hx-get="/htmx/profile/data/show"
|
||||
hx-target="#profile-data-section">
|
||||
<i class="ti ti-arrow-left"></i>
|
||||
Back
|
||||
</a>
|
||||
<button type="button" class="button-sm primary-fill">
|
||||
<i class="ti ti-device-floppy"></i>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
49
views/htmx/profile/editMFA.njk
Normal file
49
views/htmx/profile/editMFA.njk
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<!-- Form: create OTP-Secret -->
|
||||
<div class="flex flex-col flex-auto">
|
||||
<div class="flex flex-col px-8 py-6 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-sm gap-6">
|
||||
<div class="flex w-full">
|
||||
<h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
|
||||
Two-Factor Authentication
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex w-full">
|
||||
<div class="flex flex-col w-full px-4 py-3 text-sm bg-blue-100 dark:bg-blue-600 dark:text-white rounded-lg gap-2" role="alert">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="font-medium">next steps:</span>
|
||||
</div>
|
||||
<ul class="px-3 list-disc list-inside">
|
||||
<li>scan the QR-Code with your authenticator app or add your secret manually</li>
|
||||
<li>enter the generated one-time password in the input field for confirmation</li>
|
||||
<li>validate the code from your authenticator app</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<form class="flex gap-8" action="/profile/otp/create" method="post" enctype="application/x-www-form-urlencoded">
|
||||
<div class="flex flex-col w-48">
|
||||
<img class="rounded-lg w-full" src="{{ otp.qrcode }}">
|
||||
</div>
|
||||
<div class="flex flex-col flex-auto gap-4">
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<div class="flex flex-col gap-3 lg:w-4/6">
|
||||
<label class="w-full text-sm font-medium text-gray-900 dark:text-white">
|
||||
your OTP-Secret:
|
||||
</label>
|
||||
<input type="text" name="otpsecret" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" value="{{ otp.otpsecret }}" readonly>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 lg:flex-auto">
|
||||
<label class="w-full text-sm font-medium text-gray-900 dark:text-white">
|
||||
TOTP Code:
|
||||
</label>
|
||||
<input type="text" name="otpcode" class="w-full p-2.5 rounded-lg bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:border-blue-500 text-sm text-gray-900 dark:text-white" placeholder="123456">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-auto"></div>
|
||||
<div class="flex w-full justify-end gap-4">
|
||||
<button type="submit" class="py-3 px-8 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-gray-100 bg-gray-100 dark:bg-gray-600 hover:bg-blue-500">
|
||||
Validate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
32
views/htmx/profile/editPasswd.njk
Normal file
32
views/htmx/profile/editPasswd.njk
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!-- Form: Change Password -->
|
||||
<div class="flex flex-col flex-auto">
|
||||
<div class="card flex flex-col px-8 py-6 gap-6">
|
||||
<div class="flex w-full">
|
||||
<h2 class="text-4xl font-bold text-gray-900 dark:text-gray-200">
|
||||
Change Password
|
||||
</h2>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex flex-col w-1/2 gap-3">
|
||||
<label for="leihgeber.person" class="text-sm font-medium text-gray-900 dark:text-white">
|
||||
old Password
|
||||
</label>
|
||||
<input type="password" name="old_password" class="" placeholder="••••••••" value="">
|
||||
</div>
|
||||
<div class="flex flex-row align-center gap-4">
|
||||
<div class="flex flex-col w-1/2 gap-3">
|
||||
<label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
|
||||
new Password
|
||||
</label>
|
||||
<input type="password" name="new_password_1" class="" placeholder="••••••••" value="">
|
||||
</div>
|
||||
<div class="flex flex-col flex-auto gap-3">
|
||||
<label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
|
||||
repeat new Password
|
||||
</label>
|
||||
<input type="password" name="new_password_2" class="" placeholder="••••••••" value="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
59
views/htmx/profile/showData.njk
Normal file
59
views/htmx/profile/showData.njk
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<div class="flex flex-col gap-8">
|
||||
<div class="w-full flex flex-row justify-between items-center">
|
||||
<span class="text-2xl font-bold">
|
||||
Personal Data
|
||||
</span>
|
||||
<div class="flex flex-row gap-4 items-center">
|
||||
<a href="#" class="button-sm primary-fill"
|
||||
hx-get="/htmx/profile/data/edit"
|
||||
hx-target="#profile-data-section">
|
||||
<i class="ti ti-pencil"></i>
|
||||
Edit Data
|
||||
</a>
|
||||
<a href="#" class="button-sm primary-fill"
|
||||
hx-get="/htmx/profile/password/edit"
|
||||
hx-target="#profile-data-section">
|
||||
<i class="ti ti-key"></i>
|
||||
Edit Password
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-8">
|
||||
<div class="flex flex-row align-center gap-4">
|
||||
<div class="flex flex-col w-1/2 gap-2">
|
||||
<span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
|
||||
Username
|
||||
</span>
|
||||
<span class="select-text">
|
||||
{{ data.username }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col w-1/2 gap-2">
|
||||
<span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
|
||||
User ID
|
||||
</span>
|
||||
<span class="select-text">
|
||||
{{ data.uidnumber }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row align-center gap-4">
|
||||
<div class="flex flex-col w-1/2 gap-2">
|
||||
<span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
|
||||
Name
|
||||
</span>
|
||||
<span class="select-text">
|
||||
{{ data.firstName }} {{ data.lastName }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-col w-1/2 gap-2">
|
||||
<span class="w-full text-xs uppercase" style="letter-spacing: 2px; color: var(--color-base-fg-200);">
|
||||
Mail Address
|
||||
</span>
|
||||
<span class="select-text">
|
||||
{{ data.mail }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
51
views/htmx/profile/showMFA.njk
Normal file
51
views/htmx/profile/showMFA.njk
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!-- Form: 2FA -->
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="w-full flex flex-row justify-between items-center">
|
||||
<span class="text-2xl font-bold">
|
||||
Multi-Factor Authentication
|
||||
</span>
|
||||
<div class="flex flex-row gap-4 items-center">
|
||||
{% if otpsecret and otpsecret.length > 0 %}
|
||||
<a href="#" class="button-sm primary-fill">
|
||||
<i class="ti ti-cross"></i>
|
||||
disable TOTP
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="#" class="button-sm primary-fill">
|
||||
<i class="ti ti-check"></i>
|
||||
enable TOTP
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% if otp.active != true %}
|
||||
<div class="flex w-full">
|
||||
<div class="flex items-center w-full px-4 py-2 text-sm bg-yellow-100 dark:bg-yellow-600 dark:text-white rounded-lg gap-4" role="alert">
|
||||
<i class="ti ti-alert-hexagon-filled text-lg"></i>
|
||||
<div class="ms-3 text-sm font-medium">
|
||||
You have not yet configured 2-factor authentication.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex gap-8">
|
||||
{% if otp.active == true %}
|
||||
<div class="flex flex-col w-48">
|
||||
<img class="rounded-lg w-full" src="{{ otp.qrcode }}">
|
||||
</div>
|
||||
<div class="flex flex-col flex-auto gap-4">
|
||||
<div class="flex flex-col lg:flex-row gap-4">
|
||||
<div class="flex flex-col flex-auto gap-3">
|
||||
<label class="w-full text-sm font-medium text-gray-900 dark:text-white">
|
||||
your OTP-Secret:
|
||||
</label>
|
||||
<input type="text" name="otpsecret" class="" value="{{ otp.otpsecret }}" readonly>
|
||||
</div>
|
||||
<button type="button" class="button primary-fill">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue