92 lines
3.6 KiB
HTML
92 lines
3.6 KiB
HTML
<div class="grid h-full place-items-center">
|
|
<div class="bg-white shadow-lg rounded-2xl p-8 w-full max-w-md">
|
|
<h1 class="text-2xl font-semibold mb-6 text-gray-700">Edit Profile</h1>
|
|
|
|
<div id="isGuestBox" class="border-red-600 rounded-2xl border-2" hidden>
|
|
<h2 class="text-2xl font-semibold text-red-600"> This is a guest Account</h2>
|
|
<span class="text-red-600"> You can't change anything here </span>
|
|
</div>
|
|
|
|
<div class="mb-1 text-gray-700 rounded-sm border-2 outline-lime-100">
|
|
<label class="inline font-medium mb-1 text-gray-700">AccountType: </label>
|
|
<span id="accountType" class="font-medium"></span>
|
|
</div>
|
|
|
|
|
|
<!-- Login Name -->
|
|
<div id="loginNameWrapper" class="py-2" hidden>
|
|
<label class="block font-medium mb-1 text-gray-700">Login Name</label>
|
|
<div id="loginNameBox" class="font-medium mb-1 text-gray-700 rounded-sm border-2 outline-lime-100"></div>
|
|
</div>
|
|
<!-- Login Name -->
|
|
<div id="providerWrapper" class="py-2 mb-1 border-2 border-green-400 rounded-sm" hidden>
|
|
<span class="py-2 mb-1 text-gray-700 text-lg">Provider</span>
|
|
<div class="flex items-center justify-center gap-4">
|
|
<div>
|
|
<label class="block font-medium mb-1 text-gray-700">Name</label>
|
|
<div id="providerNameBox"
|
|
class="font-medium mb-1 text-gray-700"></div>
|
|
</div>
|
|
<div>
|
|
<label class="block font-medium mb-1 text-gray-700">User</label>
|
|
<div id="providerUserBox"
|
|
class="font-medium mb-1 text-gray-700"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Display Name -->
|
|
<div id="displayNameWrapper" class="py-2">
|
|
<label class="block font-medium mb-1 text-gray-700">Display Name</label>
|
|
<input id="displayNameBox" type="text" placeholder="Display Name" name="DisplayName"
|
|
class="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<button id="displayNameButton" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
|
|
Update
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<!-- Password -->
|
|
<div id="passwordWrapper" class="py-2">
|
|
<label class="block font-medium mb-1 text-gray-700">Change Password</label>
|
|
<input id="passwordBox" type="password" placeholder="New Password" name="Password"
|
|
class="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500" />
|
|
<button id="passwordButton" class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">
|
|
Update
|
|
</button>
|
|
</div>
|
|
|
|
<!-- TOTP -->
|
|
<div class="border rounded p-4" id="totpWrapper">
|
|
<h2 class="font-semibold text-lg mb-2">Two-Factor Authentication (TOTP)</h2>
|
|
|
|
<div class="flex items-center justify-between">
|
|
<span id="totpStatusText" class="font-medium text-gray-700">Status: Disabled</span>
|
|
|
|
<div class="flex gap-2">
|
|
<button id="enableTotp" type="button"
|
|
class="bg-green-600 text-white-700 px-3 py-1 rounded hover:bg-green-700">
|
|
Enable
|
|
</button>
|
|
|
|
<button id="disableTotp" type="button"
|
|
class="bg-red-600 text-white-700 px-3 py-1 rounded hover:bg-red-700 hidden">
|
|
Disable
|
|
</button>
|
|
|
|
<button id="showSecret" type="button"
|
|
class="bg-blue-600 text-white-700 px-3 py-1 rounded hover:bg-blue-700 hidden">
|
|
Show Secret
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="totpSecretBox" class="mt-3 text-sm bg-gray-100 border p-2 rounded hidden">
|
|
<canvas id="totpSecretCanvas" class="w-full h-full block"> </canvas>
|
|
<div id="totpSecretText"
|
|
class="w-full max-w-md p-3 border border-gray-300 rounded-lg overflow-y-auto bg-white text-gray-800 whitespace-pre-wrap">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|