133 lines
13 KiB
Django/Jinja
133 lines
13 KiB
Django/Jinja
{% if user and user.otp_base32 %}
|
|
{% set otp_code = user.otp_base32 %}
|
|
{% endif %}
|
|
{% if user and user.otp_url %}
|
|
{% set otp_url = user.otp_url %}
|
|
{% else %}
|
|
{% set otp_url = "" %}
|
|
{% endif %}
|
|
{% if user %}
|
|
{% set otp_verified = user.otp_verified %}
|
|
{% else %}
|
|
{% set otp_verified = false %}
|
|
{% endif %}
|
|
<input type="text" disabled id="user-totp-code" class="hidden" value="{{otp_code | default(value='')}}" />
|
|
<input type="text" disabled id="user-totp-url" class="hidden" value="{{otp_url | default(value='')}}" />
|
|
{% if totp_mode == "optional" and otp_verified != true %}
|
|
{# <div class="mb-5 relative z-0 flex">
|
|
<input type="text" id="user-totp-inpt"
|
|
class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
|
|
value="{{user.otp_base32 | default(value='')}}"
|
|
{% if no_edit %} disabled {% elif admin_fields and admin_fields is containing('otp_base32') %} disabled {% endif %}
|
|
placeholder=" " />
|
|
<label for="user-roles-inpt" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">
|
|
TOTP</label>
|
|
</div> #}
|
|
<div class="mb-5 relative flex flex-row items-center cursor-pointer">
|
|
<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Use TOTP:</span>
|
|
<label class="ml-3 relative inline-flex items-center cursor-pointer">
|
|
<input id="use-totp" onchange="change_use_totp(this)" type="checkbox"
|
|
{% if user and user.otp_base32 and user.otp_base32 != "" %}checked{% endif %}
|
|
class="sr-only peer">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
|
</label>
|
|
</div>
|
|
{% else %}
|
|
<div class="mb-5 relative flex flex-row items-center cursor-pointer">
|
|
<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Reset TOTP:</span>
|
|
<label class="ml-3 relative inline-flex items-center cursor-pointer">
|
|
<input id="use-totp" onchange="on_reset_totp(this)" type="checkbox"
|
|
data-val="{{user.otp_base32 | default(value='')}}"
|
|
class="sr-only peer">
|
|
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
|
</label>
|
|
</div>
|
|
{% endif %}
|
|
<section id="otp-section" class="{% if user and user.otp_base32 and user.otp_base32 != "" %}m-auto{% else %}hidden{% endif %}">
|
|
<div class="flex flex-col justify-center items-center">
|
|
<div class="mb-5 flex" >
|
|
<div id="otp-code-text" class="mr-2">{{otp_code | default(value='')}}</div>
|
|
<button id="copy-code" onclick="copy_otp_code(this)" title="Copy to clipboard"><svg class="pl-3 -mt-1 text-slate-700 w-8 h-8"><use href="#symbl-copy" /></svg></button>
|
|
</div>
|
|
<div id="toast-copy-totp-code" class="hidden flex items-center p-4 w-full max-w-xs text-gray-500 bg-gray-300 rounded-lg shadow dark:text-gray-300 dark:bg-gray-700" role="alert">
|
|
<div class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 text-indigo-500 bg-indigo-100 rounded-lg dark:bg-indigo-800 dark:text-indigo-200">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path></svg>
|
|
</div>
|
|
<div class="ml-3 text-sm font-normal">TOPT code Copied</div>
|
|
</div>
|
|
<div class="mb-5 text-gray-500 text-sm" id="totp-message"></div>
|
|
<div id="totp-recovery-message" class="hidden w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:bg-gray-800 dark:text-gray-400" role="alert">
|
|
<div class="flex">
|
|
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:text-blue-300 dark:bg-blue-900">
|
|
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path></svg>
|
|
<span class="sr-only">Refresh icon</span>
|
|
</div>
|
|
<div class="ml-3 text-sm font-normal">
|
|
<span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">TOTP should be fully deactivated by using
|
|
<a href="#" class="inline-flex justify-center m-2 px-2 py-1.5 text-xs font-medium text-center text-gray-900 bg-white border border-gray-300 rounded-lg hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700">Save</a>
|
|
button below.
|
|
</span>
|
|
<div class="my-2 text-sm font-normal">To generate a new one go back and return here</div>
|
|
</div>
|
|
<button type="button" class="hidden ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#totp-recovery-message" aria-label="Close">
|
|
<span class="sr-only">Close</span>
|
|
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% if otp_qr and otp_qr != "" %}
|
|
<div id="otp-code-qr" class="mb-5 flex justify-center"><img style="width: 300px" src="data:image/png;base64, {{otp_qr}}"/></div>
|
|
{% endif %}
|
|
</div>
|
|
{% if user and user.otp_base32 != "" and user.otp_verified == true %}
|
|
<div class="flex flex-col justify-center items-center mb-3">
|
|
<p class="bg-gray-100 text-gray-800 text-xs font-medium text-center px-2.5 py-0.5 rounded mr-2 dark:bg-gray-700 dark:text-gray-400">
|
|
TOTP code {{totp_digits | default(value="")}} digits with {{totp_algorithm | default(value="")}} for verification
|
|
</p>
|
|
</div>
|
|
<div class="mt-2 mb-5 relative z-0 flex items-center justify-center">
|
|
<input type="text" id="user-totp-inpt" class="hidden" value="" />
|
|
<span class="bg-gray-100 text-gray-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-5 dark:bg-gray-700 dark:text-gray-400 border border-gray-500">
|
|
<svg aria-hidden="true" class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
|
|
Enabled
|
|
</span>
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400">
|
|
<svg aria-hidden="true" class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"></path></svg>
|
|
Verified
|
|
</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="mt-2 mb-5 relative z-0 flex flex-col justify-center items-center">
|
|
<label for="user-totp-inpt" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
|
|
Enter TOTP code {{totp_digits | default(value="")}} digits with {{totp_algorithm | default(value="")}} for verification
|
|
</label>
|
|
<input type="text" id="user-totp-inpt" onchange="set_totp(this)"
|
|
class="block w-27 mt-2 p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
|
|
placeholder="" />
|
|
{# class="block py-2.5 px-0 w-27 text-sm text-gray-900 bg-transparent border-0 border-b-2 border-gray-300 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer"
|
|
<label for="user-totp-inpt" class="absolute text-sm text-gray-500 dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-blue-600 peer-focus:dark:text-blue-500 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">
|
|
Enter TOTP code {{totp_digits | default(value="")}} digits for verification
|
|
</label>
|
|
#}
|
|
</div>
|
|
{% endif %}
|
|
<div id="totp-warning" class="flex items-center w-full max-w-sm p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
|
|
<div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-orange-500 bg-orange-100 rounded-lg dark:bg-orange-700 dark:text-orange-200">
|
|
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
|
|
<span class="sr-only">Warning icon</span>
|
|
</div>
|
|
{% if totp_mode == "optional" %}
|
|
<div class="pl-4 mb-3 text-sm font-normal">For security, TOTP (it is opcional) can only be reset or deactivated from here.</div>
|
|
{% else %}
|
|
<div class="pl-4 mb-3 text-sm font-normal">For security, TOTP (it is mandatory) can only be reset from here.</div>
|
|
{% endif %}
|
|
<button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#totp-warning" aria-label="Close">
|
|
<span class="sr-only">Close</span>
|
|
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
|
|
</button>
|
|
</div>
|
|
<div id="totp-info" class="flex items-center w-full max-w-sm p-4 space-x-4 text-gray-500 bg-white divide-x divide-gray-200 rounded-lg shadow dark:text-gray-400 dark:divide-gray-700 space-x dark:bg-gray-800" role="alert">
|
|
<svg aria-hidden="true" class="w-5 h-5 text-blue-600 dark:text-blue-500" focusable="false" data-prefix="fas" data-icon="paper-plane" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M511.6 36.86l-64 415.1c-1.5 9.734-7.375 18.22-15.97 23.05c-4.844 2.719-10.27 4.097-15.68 4.097c-4.188 0-8.319-.8154-12.29-2.472l-122.6-51.1l-50.86 76.29C226.3 508.5 219.8 512 212.8 512C201.3 512 192 502.7 192 491.2v-96.18c0-7.115 2.372-14.03 6.742-19.64L416 96l-293.7 264.3L19.69 317.5C8.438 312.8 .8125 302.2 .0625 289.1s5.469-23.72 16.06-29.77l448-255.1c10.69-6.109 23.88-5.547 34 1.406S513.5 24.72 511.6 36.86z"></path></svg>
|
|
<div class="pl-4 text-sm font-normal">For login issues with TOTP contact with Service Administrator. Copy code on top.</div>
|
|
</div>
|
|
</section> |