229 lines
No EOL
17 KiB
Text
229 lines
No EOL
17 KiB
Text
{% extends "./master.njk" %}
|
|
|
|
{% block content %}
|
|
<div id="app" class="w-full">
|
|
{% include "./components/navbar.njk" %}
|
|
<div class="container relative mx-auto py-12 flex flex-col justify-center items-center gap-8">
|
|
<div class="flex flex-row gap-8 w-full text-gray-700">
|
|
<!-- Setting Menu -->
|
|
<div class="flex flex-col w-2/6">
|
|
<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 dark:text-gray-200">Settings</h2>
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
{% if page == 'profile/personal' %}
|
|
<a href="/profile/personal" class="py-3 px-5 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 bg-gray-100 dark:bg-gray-900">
|
|
{% else %}
|
|
<a href="/profile/personal" class="py-3 px-5 text-sm text-left rounded-lg text-gray-700 dark:text-gray-300 hover:text-gray-100 hover:bg-blue-500">
|
|
{% endif %}
|
|
Personal Data
|
|
</a>
|
|
|
|
{% if page == 'profile/security' %}
|
|
<a href="/profile/security" class="py-3 px-5 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 bg-gray-100 dark:bg-gray-900">
|
|
{% else %}
|
|
<a href="/profile/security" class="py-3 px-5 text-sm text-left rounded-lg text-gray-700 dark:text-gray-300 hover:text-gray-100 hover:bg-blue-500">
|
|
{% endif %}
|
|
Security / Login
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col flex-auto gap-8">
|
|
<!-- Form: Personal Data -->
|
|
{% if page == 'profile/personal' %}
|
|
<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">
|
|
Personal Data
|
|
</h2>
|
|
</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="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
|
|
first name
|
|
</label>
|
|
<input type="text" name="firstName" class="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" placeholder="John" value="{{ data.firstName }}">
|
|
</div>
|
|
<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">
|
|
last name
|
|
</label>
|
|
<input type="text" name="lastName" class="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" placeholder="Doe" value="{{ data.lastName }}">
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-3">
|
|
<label for="leihgeber.person" class="w-full text-sm font-medium text-gray-900 dark:text-white">
|
|
email
|
|
</label>
|
|
<input type="text" name="mail" class="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" placeholder="john@doe" value="{{ data.mail }}">
|
|
</div>
|
|
</div>
|
|
<div class="flex w-full justify-end">
|
|
<button type="button" class="py-3 px-8 text-sm text-left rounded-lg text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-400 bg-gray-100 dark:bg-gray-600">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if page == 'profile/security' %}
|
|
<!-- Form: Change Password -->
|
|
<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">
|
|
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="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" 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="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" 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="block w-full p-2.5 rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-sm text-gray-900 dark:text-white dark:placeholder-gray-400" placeholder="••••••••" value="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Form: 2FA -->
|
|
<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>
|
|
{% 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="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>
|
|
<button type="button" class="py-3 px-8 mt-auto text-sm text-left rounded-lg text-red-700 dark:text-red-300 hover:text-gray-100 bg-gray-100 dark:bg-gray-600 hover:bg-red-500">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="flex flex-col w-full">
|
|
|
|
<div id="faq" data-accordion="collapse" class="flex flex-col gap-3" data-active-classes="text-primary-700 dark:text-primary-300" data-inactive-classes="text-gray-500 dark:text-gray-400">
|
|
<h2 id="faq-heading-1">
|
|
<a href="#" class="flex items-center justify-between w-full text-gray-500 dark:text-gray-400" data-accordion-target="#faq-body-1">
|
|
<span class="text-lg">How to use 2FA?</span>
|
|
<i data-accordion-icon class="ti ti-square-rounded-chevron-up text-2xl rotate-180"></i>
|
|
</a>
|
|
</h2>
|
|
<hr class="h-px bg-gray-200 border-0 dark:bg-gray-700">
|
|
<div id="faq-body-1" class="hidden" aria-labelledby="faq-heading-1">
|
|
<p class="mb-6 text-gray-800 dark:text-gray-200 text-sm">Each time you authenticate, you must add your current 2FA code at the end of your password.</p>
|
|
</div>
|
|
<h2 id="faq-heading-2">
|
|
<a href="#" class="flex items-center justify-between w-full text-gray-500 dark:text-gray-400" data-accordion-target="#faq-body-2">
|
|
<span class="text-lg">Which apps can I use with the 2FA code?</span>
|
|
<i data-accordion-icon class="ti ti-square-rounded-chevron-up text-2xl rotate-180"></i>
|
|
</a>
|
|
</h2>
|
|
<hr class="h-px bg-gray-200 border-0 dark:bg-gray-700">
|
|
<div id="faq-body-2" class="hidden" aria-labelledby="faq-heading-2">
|
|
<p class="mb-6 text-gray-800 dark:text-gray-200 text-sm">You can use any Google Authenticator compatible app. Keepass and Passbolt need the specific settings.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if page == 'profile/otp/create' %}
|
|
<!-- 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>
|
|
{% endif %}
|
|
<!-- / -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
|
|
{% endblock %} |