62 lines
5.2 KiB
Django/Jinja
62 lines
5.2 KiB
Django/Jinja
<div class="mb-5 relative z-0 flex">
|
||
<input data-popover-target="popover-password" type="password" id="user-password-inpt" onchange="set_password(this)"
|
||
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"
|
||
placeholder=" " />
|
||
<div data-popper-arrow></div>
|
||
<label for="user-password-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">
|
||
Password</label>
|
||
<i id="show-password" class="ml-2">
|
||
<svg class="hidden pl-3 mt-2 text-slate-500 w-8 h-8"><use href="#symbl-eye-slash" /></svg>
|
||
<svg class="pl-3 mt-2 text-slate-500 w-8 h-8"><use href="#symbl-eye" /></svg>
|
||
</i>
|
||
<div data-popover id="popover-password" role="tooltip" class="absolute z-10 invisible inline-block text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 w-72 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400">
|
||
<div class="p-3 space-y-2">
|
||
<h3 class="font-semibold text-gray-900 dark:text-white">Must have at least 6 characters</h3>
|
||
<div class="grid grid-cols-4 gap-2">
|
||
<div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
|
||
<div class="h-1 bg-orange-300 dark:bg-orange-400"></div>
|
||
<div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
|
||
<div class="h-1 bg-gray-200 dark:bg-gray-600"></div>
|
||
</div>
|
||
<p>It’s better to have:</p>
|
||
<ul>
|
||
<li class="flex items-center mb-1">
|
||
<svg class="w-4 h-4 mr-2 text-green-400 dark:text-green-500" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
|
||
Upper & lower case letters
|
||
</li>
|
||
<li class="flex items-center mb-1">
|
||
<svg class="w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" 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>
|
||
A symbol (#$&)
|
||
</li>
|
||
<li class="flex items-center">
|
||
<svg class="w-4 h-4 mr-2 text-gray-300 dark:text-gray-400" aria-hidden="true" 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>
|
||
A longer password (min. 12 chars.)
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<dl>
|
||
<dt class="flex flex-col text-sm font-medium text-gray-500 dark:text-gray-400">Secure estimation</dt>
|
||
<dd class="flex items-center mb-3">
|
||
<div class="w-full bg-gray-200 rounded h-2.5 dark:bg-gray-700 mr-2">
|
||
<div id="password-secure-bar" class="bg-blue-600 h-2.5 rounded dark:bg-blue-500" style="width: 0%"></div>
|
||
</div>
|
||
<span id="password-secure-val" class="text-sm font-medium text-gray-500 dark:text-gray-400">0</span>
|
||
</dd>
|
||
<dd class="mt-2 text-xs" id="password-suggestions"></dd>
|
||
<dd class="mt-2 text-xs text-orange-500" id="password-warning"></dd>
|
||
<dd class="mt-2 mb-5 text-xs text-red-500" id="password-error"></dd>
|
||
</dl>
|
||
<div class="mb-5 relative z-0 flex">
|
||
<input type="password" id="user-repeat-password-inpt" onchange="set_password(this)"
|
||
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"
|
||
placeholder=" " />
|
||
<label for="user-repeat-password-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">
|
||
Repeat Password</label>
|
||
<i id="show-repeat-password" class="ml-2">
|
||
<svg class="hidden pl-3 mt-2 text-slate-500 w-8 h-8"><use href="#symbl-eye-slash" /></svg>
|
||
<svg class="pl-3 mt-2 text-slate-500 w-8 h-8"><use href="#symbl-eye" /></svg>
|
||
</i>
|
||
</div>
|