feat(darkmode): add tailwind darkmode and change templates

This commit is contained in:
David Silva 2024-04-10 04:36:04 -03:00
parent bdf966fdae
commit 817ba75423
39 changed files with 250 additions and 202 deletions

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,11 +17,11 @@
<h1 class="text-center text-xl">We are sorry...</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,7 +17,7 @@
<h1 class="text-center text-xl">Mobile Authenticator Setup</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<ol class="list-decimal pl-4 space-y-2">
@ -34,12 +34,12 @@
<form class="m-0 space-y-4" method="post" action="loginAction">
<input name="totpSecret" type="hidden" value="totpSecret">
<div>
<label class="sr-only" for="totp"> One-time code * </label> <input autofocus aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="totp" name="totp" placeholder="One-time code *" type="text" autocomplete="off">
<label class="sr-only" for="totp"> One-time code * </label> <input autofocus aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="totp" name="totp" placeholder="One-time code *" type="text" autocomplete="off">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
<div>
<label class="sr-only" for="userLabel"> Device Name * </label> <input aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="userLabel" name="userLabel" placeholder="Device Name *" type="text" autocomplete="off">
<label class="sr-only" for="userLabel"> Device Name * </label> <input aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="userLabel" name="userLabel" placeholder="Device Name *" type="text" autocomplete="off">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
@ -48,7 +48,7 @@
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,14 +17,14 @@
<h1 class="text-center text-xl">Account already exists</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction">
<button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="submitAction" type="submit" value="updateProfile"> Review profile </button> <button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="submitAction" type="submit" value="linkAccount"> Add to existing account </button>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -18,7 +18,7 @@
<p>Grant Access to null</p></h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<h3>Do you grant these access privileges?</h3>
@ -27,11 +27,11 @@
<form class="m-0 space-y-4" method="post" action="oauthAction">
<input name="code" type="hidden" value="code">
<div class="flex flex-col pt-4 space-y-2">
<button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="accept" type="submit"> Yes </button> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="cancel" type="submit"> No </button>
<button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="accept" type="submit"> Yes </button> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="cancel" type="submit"> No </button>
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,12 +17,12 @@
<h1 class="text-center text-xl">Sign In</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction">
<div>
<label class="sr-only" for="otp"> One-time code * </label> <input autofocus required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="otp" name="otp" placeholder="One-time code *" type="text" autocomplete="off">
<label class="sr-only" for="otp"> One-time code * </label> <input autofocus required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="otp" name="otp" placeholder="One-time code *" type="text" autocomplete="off">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
@ -31,7 +31,7 @@
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,14 +17,14 @@
<h1 class="text-center text-xl">Page has expired</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<div class="flex flex-col pt-4 space-y-2">
<a class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" href="loginRestartFlowUrl"> Try again </a> <a class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" href="loginAction"> Continue </a>
<a class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" href="loginRestartFlowUrl"> Try again </a> <a class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" href="loginAction"> Continue </a>
</div>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,14 +17,14 @@
<h1 class="text-center text-xl">Sign In</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction" onsubmit="login.disabled = true; return true;">
<div>
<label class="sr-only" for="password"> Password </label>
<div class="relative" x-data="{ show: false }">
<input autofocus required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="password" name="password" placeholder="Password" :type="show ? 'text' : 'password'"> <button @click="show = !show" aria-controls="password" :aria-expanded="show" class="absolute text-secondary-400 right-3 top-3 sm:top-2" type="button">
<input autofocus required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="password" name="password" placeholder="Password" :type="show ? 'text' : 'password'"> <button @click="show = !show" aria-controls="password" :aria-expanded="show" class="absolute text-secondary-400 right-3 top-3 sm:top-2" type="button">
<div x-show="!show">
<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z" /> <path clip-rule="evenodd" d="M0.664255 10.5904C0.517392 10.2087 0.517518 9.78563 0.66461 9.40408C2.10878 5.65788 5.7433 3 9.99859 3C14.256 3 17.892 5.66051 19.3347 9.40962C19.4816 9.79127 19.4814 10.2144 19.3344 10.5959C17.8902 14.3421 14.2557 17 10.0004 17C5.74298 17 2.10698 14.3395 0.664255 10.5904ZM14.0004 10C14.0004 12.2091 12.2095 14 10.0004 14C7.79123 14 6.00037 12.2091 6.00037 10C6.00037 7.79086 7.79123 6 10.0004 6C12.2095 6 14.0004 7.79086 14.0004 10Z" fill-rule="evenodd" />
@ -47,7 +47,7 @@
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -8,9 +8,9 @@
<script defer src="http://localhost:5173/dist/recoveryCodes.js" type="module"></script>
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -18,11 +18,11 @@
<h1 class="text-center text-xl">Recovery Authentication Codes</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<div class="space-y-6" x-data="recoveryCodes">
<div class="bg-orange-100 text-orange-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-orange-100 text-orange-600 p-4 rounded-lg text-sm" role="alert">
<div class="space-y-2">
<h4 class="font-medium">These recovery codes wont appear again after leaving this page</h4>
<p>Make sure to print, download, or copy them to a password manager and keep them save. Canceling this setup will remove these recovery codes from your account.</p>
@ -33,12 +33,12 @@
<li>1111-1111-1111</li>
</ul>
<div class="flex items-stretch space-x-4 mb-4">
<button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-2 py-1 text-xs flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" @click="print" type="button"> Print </button> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-2 py-1 text-xs flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" @click="download" type="button"> Download </button> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-2 py-1 text-xs flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" @click="copy" type="button"> Copy </button>
<button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-2 py-1 text-xs flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" @click="print" type="button"> Print </button> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-2 py-1 text-xs flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" @click="download" type="button"> Download </button> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-2 py-1 text-xs flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" @click="copy" type="button"> Copy </button>
</div>
<form class="m-0 space-y-4" method="post" action="loginAction">
<input name="generatedRecoveryAuthnCodes" type="hidden" value="generatedRecoveryAuthnCodesAsString"> <input name="generatedAt" type="hidden" value="&quot;generatedAt&quot;"> <input name="userLabel" type="hidden" value="Recovery codes">
<div class="flex items-center">
<input class="border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50" id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck" type="checkbox" required x-ref="confirmationCheck"> <label class="ml-2 text-secondary-600 text-sm" for="kcRecoveryCodesConfirmationCheck"> I have saved these codes somewhere safe </label>
<input class="dark:bg-zinc-800 dark:border-zinc-700 border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50" id="kcRecoveryCodesConfirmationCheck" name="kcRecoveryCodesConfirmationCheck" type="checkbox" required x-ref="confirmationCheck"> <label class="ml-2 text-secondary-600 text-sm" for="kcRecoveryCodesConfirmationCheck"> I have saved these codes somewhere safe </label>
</div>
<div class="flex flex-col pt-4 space-y-2">
<button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Complete setup </button>
@ -46,7 +46,7 @@
</form>
</div>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,12 +17,12 @@
<h1 class="text-center text-xl">Login with a recovery authentication code</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction">
<div>
<label class="sr-only" for="recoveryCodeInput"> Recovery code #"codeNumber" </label> <input autofocus required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="recoveryCodeInput" name="recoveryCodeInput" placeholder="Recovery code #&quot;codeNumber&quot;" type="text" autocomplete="off">
<label class="sr-only" for="recoveryCodeInput"> Recovery code #"codeNumber" </label> <input autofocus required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="recoveryCodeInput" name="recoveryCodeInput" placeholder="Recovery code #&quot;codeNumber&quot;" type="text" autocomplete="off">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
@ -31,7 +31,7 @@
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,12 +17,12 @@
<h1 class="text-center text-xl">Forgot Your Password?</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction">
<div>
<label class="sr-only" for="username"> Email </label> <input autofocus required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="username" name="username" placeholder="Email" type="text" autocomplete="email" value="Attempted Username">
<label class="sr-only" for="username"> Email </label> <input autofocus required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="username" name="username" placeholder="Email" type="text" autocomplete="email" value="Attempted Username">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
@ -31,7 +31,7 @@
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
<div class="space-y-4">

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,7 +17,7 @@
<h1 class="text-center text-xl">Update password</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction">
@ -25,7 +25,7 @@
<div>
<label class="sr-only" for="password-new"> New Password </label>
<div class="relative" x-data="{ show: false }">
<input autofocus required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="password-new" name="password-new" placeholder="New Password" :type="show ? 'text' : 'password'" autocomplete="new-password"> <button @click="show = !show" aria-controls="password-new" :aria-expanded="show" class="absolute text-secondary-400 right-3 top-3 sm:top-2" type="button">
<input autofocus required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="password-new" name="password-new" placeholder="New Password" :type="show ? 'text' : 'password'" autocomplete="new-password"> <button @click="show = !show" aria-controls="password-new" :aria-expanded="show" class="absolute text-secondary-400 right-3 top-3 sm:top-2" type="button">
<div x-show="!show">
<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z" /> <path clip-rule="evenodd" d="M0.664255 10.5904C0.517392 10.2087 0.517518 9.78563 0.66461 9.40408C2.10878 5.65788 5.7433 3 9.99859 3C14.256 3 17.892 5.66051 19.3347 9.40962C19.4816 9.79127 19.4814 10.2144 19.3344 10.5959C17.8902 14.3421 14.2557 17 10.0004 17C5.74298 17 2.10698 14.3395 0.664255 10.5904ZM14.0004 10C14.0004 12.2091 12.2095 14 10.0004 14C7.79123 14 6.00037 12.2091 6.00037 10C6.00037 7.79086 7.79123 6 10.0004 6C12.2095 6 14.0004 7.79086 14.0004 10Z" fill-rule="evenodd" />
@ -43,7 +43,7 @@
<div>
<label class="sr-only" for="password-confirm"> Confirm password </label>
<div class="relative" x-data="{ show: false }">
<input required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="password-confirm" name="password-confirm" placeholder="Confirm password" :type="show ? 'text' : 'password'" autocomplete="new-password"> <button @click="show = !show" aria-controls="password-confirm" :aria-expanded="show" class="absolute text-secondary-400 right-3 top-3 sm:top-2" type="button">
<input required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="password-confirm" name="password-confirm" placeholder="Confirm password" :type="show ? 'text' : 'password'" autocomplete="new-password"> <button @click="show = !show" aria-controls="password-confirm" :aria-expanded="show" class="absolute text-secondary-400 right-3 top-3 sm:top-2" type="button">
<div x-show="!show">
<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z" /> <path clip-rule="evenodd" d="M0.664255 10.5904C0.517392 10.2087 0.517518 9.78563 0.66461 9.40408C2.10878 5.65788 5.7433 3 9.99859 3C14.256 3 17.892 5.66051 19.3347 9.40962C19.4816 9.79127 19.4814 10.2144 19.3344 10.5959C17.8902 14.3421 14.2557 17 10.0004 17C5.74298 17 2.10698 14.3395 0.664255 10.5904ZM14.0004 10C14.0004 12.2091 12.2095 14 10.0004 14C7.79123 14 6.00037 12.2091 6.00037 10C6.00037 7.79086 7.79123 6 10.0004 6C12.2095 6 14.0004 7.79086 14.0004 10Z" fill-rule="evenodd" />
@ -63,7 +63,7 @@
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,27 +17,27 @@
<h1 class="text-center text-xl">Update Account Information</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction">
<div>
<label class="sr-only" for="username"> Username </label> <input autofocus required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="username" name="username" placeholder="Username" type="text" autocomplete="username" value="">
<label class="sr-only" for="username"> Username </label> <input autofocus required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="username" name="username" placeholder="Username" type="text" autocomplete="username" value="">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
<div>
<label class="sr-only" for="email"> Email </label> <input required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="email" name="email" placeholder="Email" type="email" autocomplete="email" value="">
<label class="sr-only" for="email"> Email </label> <input required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="email" name="email" placeholder="Email" type="email" autocomplete="email" value="">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
<div>
<label class="sr-only" for="firstName"> First name </label> <input required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="firstName" name="firstName" placeholder="First name" type="text" autocomplete="given-name" value="">
<label class="sr-only" for="firstName"> First name </label> <input required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="firstName" name="firstName" placeholder="First name" type="text" autocomplete="given-name" value="">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
<div>
<label class="sr-only" for="lastName"> Last name </label> <input required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="lastName" name="lastName" placeholder="Last name" type="text" autocomplete="family-name" value="">
<label class="sr-only" for="lastName"> Last name </label> <input required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="lastName" name="lastName" placeholder="Last name" type="text" autocomplete="family-name" value="">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
@ -46,7 +46,7 @@
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,18 +17,18 @@
<h1 class="text-center text-xl">Sign in to your account</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction" onsubmit="login.disabled = true; return true;">
<div>
<label class="sr-only" for="username"> Email </label> <input autofocus required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="username" name="username" placeholder="Email" type="text" autocomplete="email" value="">
<label class="sr-only" for="username"> Email </label> <input autofocus required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="username" name="username" placeholder="Email" type="text" autocomplete="email" value="">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input checked class="border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50" id="rememberMe" name="rememberMe" type="checkbox"> <label class="ml-2 text-secondary-600 text-sm" for="rememberMe"> Remember me </label>
<input checked class="dark:bg-zinc-800 dark:border-zinc-700 border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50" id="rememberMe" name="rememberMe" type="checkbox"> <label class="ml-2 text-secondary-600 text-sm" for="rememberMe"> Remember me </label>
</div>
</div>
<div class="flex flex-col pt-4 space-y-2">
@ -36,29 +36,49 @@
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
<div class="pt-4 separate text-secondary-600 text-sm">
Or sign in with
<div class="relative flex py-4 text-gray-400 text-sm items-center">
<div class="flex-grow border-t dark:border-zinc-700"></div>
<span class="flex-shrink mx-4">Or sign in with</span>
<div class="flex-grow border-t dark:border-zinc-700"></div>
</div>
<div class="gap-4 grid grid-cols-3">
<a class="hover:bg-provider-facebook/10 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="facebook" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Facebook</title><path d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.38822 22.954 10.125 23.8542V15.4688H7.07813V12H10.125V9.35626C10.125 6.34875 11.9165 4.68751 14.6576 4.68751C15.9705 4.68751 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.3399 7.875 13.875 8.80002 13.875 9.74901V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z" fill="#1877F2" /> <path d="M16.6711 15.4688L17.2031 12H13.875V9.74901C13.875 8.80002 14.3399 7.875 15.8306 7.875H17.3438V4.92188C17.3438 4.92188 15.9705 4.68751 14.6576 4.68751C11.9165 4.68751 10.125 6.34875 10.125 9.35626V12H7.07813V15.4688H10.125V23.8542C10.7453 23.9514 11.3722 24.0002 12 24C12.6379 24 13.2641 23.9501 13.875 23.8542V15.4688H16.6711Z" fill="white" />
</svg>
</div></a> <a class="hover:bg-provider-github/10 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="github" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title><path d="M11.8452 0C5.13387 0 0 5.09516 0 11.8065C0 17.1726 3.37742 21.7645 8.20161 23.3806C8.82097 23.4919 9.03871 23.1097 9.03871 22.7952C9.03871 22.4952 9.02419 20.8403 9.02419 19.8242C9.02419 19.8242 5.6371 20.55 4.92581 18.3823C4.92581 18.3823 4.37419 16.9742 3.58065 16.6113C3.58065 16.6113 2.47258 15.8516 3.65806 15.8661C3.65806 15.8661 4.8629 15.9629 5.52581 17.1145C6.58548 18.9823 8.36129 18.4452 9.05323 18.1258C9.16452 17.3516 9.47903 16.8145 9.82742 16.4952C7.12258 16.1952 4.39355 15.8032 4.39355 11.1484C4.39355 9.81774 4.76129 9.15 5.53548 8.29839C5.40968 7.98387 4.99839 6.6871 5.66129 5.0129C6.67258 4.69839 9 6.31936 9 6.31936C9.96774 6.04839 11.0081 5.90806 12.0387 5.90806C13.0694 5.90806 14.1097 6.04839 15.0774 6.31936C15.0774 6.31936 17.4048 4.69355 18.4161 5.0129C19.079 6.69194 18.6677 7.98387 18.5419 8.29839C19.3161 9.15484 19.7903 9.82258 19.7903 11.1484C19.7903 15.8177 16.9403 16.1903 14.2355 16.4952C14.6806 16.8774 15.0581 17.6032 15.0581 18.7403C15.0581 20.371 15.0435 22.3887 15.0435 22.7855C15.0435 23.1 15.2661 23.4823 15.8806 23.371C20.7194 21.7645 24 17.1726 24 11.8065C24 5.09516 18.5565 0 11.8452 0Z" fill="#181717" />
</svg>
</div></a> <a class="hover:bg-provider-google/10 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="google" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Google</title><path d="M23.76 12.2727C23.76 11.4218 23.6836 10.6036 23.5418 9.81818H12.24V14.46H18.6982C18.42 15.96 17.5745 17.2309 16.3036 18.0818L18.2427 19.5873L20.1818 21.0927C22.4509 19.0036 23.76 15.9273 23.76 12.2727Z" fill="#4285F4" /> <path d="M12.24 24C15.48 24 18.1964 22.9255 20.1818 21.0927L16.3036 18.0818C15.2291 18.8018 13.8545 19.2273 12.24 19.2273C9.11455 19.2273 6.46909 17.1164 5.52545 14.28L3.52091 15.8345L1.51636 17.3891C3.49091 21.3109 7.54909 24 12.24 24Z" fill="#34A853" /> <path d="M5.52545 14.28C5.28545 13.56 5.14909 12.7909 5.14909 12C5.14909 11.2091 5.28545 10.44 5.52545 9.72L3.52091 8.16546L1.51636 6.61091C0.703637 8.23091 0.240001 10.0636 0.240001 12C0.240001 13.9364 0.703637 15.7691 1.51636 17.3891L5.52545 14.28Z" fill="#FBBC05" /> <path d="M12.24 4.77273C14.0018 4.77273 15.5836 5.37818 16.8273 6.56727L20.2691 3.12545C18.1909 1.18909 15.4745 0 12.24 0C7.54909 0 3.49091 2.68909 1.51636 6.61091L5.52545 9.72C6.46909 6.88364 9.11455 4.77273 12.24 4.77273Z" fill="#EA4335" />
</svg>
</div></a>
</div>
<div class="dark:bg-zinc-600 rounded-lg">
<a class="hover:bg-provider-facebook/10 dark:border-zinc-700 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="facebook" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Facebook</title>
<path d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.38822 22.954 10.125 23.8542V15.4688H7.07813V12H10.125V9.35626C10.125 6.34875 11.9165 4.68751 14.6576 4.68751C15.9705 4.68751 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.3399 7.875 13.875 8.80002 13.875 9.74901V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z" fill="#1877F2" />
<path d="M16.6711 15.4688L17.2031 12H13.875V9.74901C13.875 8.80002 14.3399 7.875 15.8306 7.875H17.3438V4.92188C17.3438 4.92188 15.9705 4.68751 14.6576 4.68751C11.9165 4.68751 10.125 6.34875 10.125 9.35626V12H7.07813V15.4688H10.125V23.8542C10.7453 23.9514 11.3722 24.0002 12 24C12.6379 24 13.2641 23.9501 13.875 23.8542V15.4688H16.6711Z" fill="white" />
</svg>
</div>
</a>
</div>
<div class="dark:bg-zinc-600 rounded-lg">
<a class="hover:bg-provider-github/10 dark:border-zinc-700 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="github" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path d="M11.8452 0C5.13387 0 0 5.09516 0 11.8065C0 17.1726 3.37742 21.7645 8.20161 23.3806C8.82097 23.4919 9.03871 23.1097 9.03871 22.7952C9.03871 22.4952 9.02419 20.8403 9.02419 19.8242C9.02419 19.8242 5.6371 20.55 4.92581 18.3823C4.92581 18.3823 4.37419 16.9742 3.58065 16.6113C3.58065 16.6113 2.47258 15.8516 3.65806 15.8661C3.65806 15.8661 4.8629 15.9629 5.52581 17.1145C6.58548 18.9823 8.36129 18.4452 9.05323 18.1258C9.16452 17.3516 9.47903 16.8145 9.82742 16.4952C7.12258 16.1952 4.39355 15.8032 4.39355 11.1484C4.39355 9.81774 4.76129 9.15 5.53548 8.29839C5.40968 7.98387 4.99839 6.6871 5.66129 5.0129C6.67258 4.69839 9 6.31936 9 6.31936C9.96774 6.04839 11.0081 5.90806 12.0387 5.90806C13.0694 5.90806 14.1097 6.04839 15.0774 6.31936C15.0774 6.31936 17.4048 4.69355 18.4161 5.0129C19.079 6.69194 18.6677 7.98387 18.5419 8.29839C19.3161 9.15484 19.7903 9.82258 19.7903 11.1484C19.7903 15.8177 16.9403 16.1903 14.2355 16.4952C14.6806 16.8774 15.0581 17.6032 15.0581 18.7403C15.0581 20.371 15.0435 22.3887 15.0435 22.7855C15.0435 23.1 15.2661 23.4823 15.8806 23.371C20.7194 21.7645 24 17.1726 24 11.8065C24 5.09516 18.5565 0 11.8452 0Z" fill="#181717" />
</svg>
</div>
</a>
</div>
<div class="dark:bg-zinc-600 rounded-lg">
<a class="hover:bg-provider-google/10 dark:border-zinc-700 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="google" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Google</title>
<path d="M23.76 12.2727C23.76 11.4218 23.6836 10.6036 23.5418 9.81818H12.24V14.46H18.6982C18.42 15.96 17.5745 17.2309 16.3036 18.0818L18.2427 19.5873L20.1818 21.0927C22.4509 19.0036 23.76 15.9273 23.76 12.2727Z" fill="#4285F4" />
<path d="M12.24 24C15.48 24 18.1964 22.9255 20.1818 21.0927L16.3036 18.0818C15.2291 18.8018 13.8545 19.2273 12.24 19.2273C9.11455 19.2273 6.46909 17.1164 5.52545 14.28L3.52091 15.8345L1.51636 17.3891C3.49091 21.3109 7.54909 24 12.24 24Z" fill="#34A853" />
<path d="M5.52545 14.28C5.28545 13.56 5.14909 12.7909 5.14909 12C5.14909 11.2091 5.28545 10.44 5.52545 9.72L3.52091 8.16546L1.51636 6.61091C0.703637 8.23091 0.240001 10.0636 0.240001 12C0.240001 13.9364 0.703637 15.7691 1.51636 17.3891L5.52545 14.28Z" fill="#FBBC05" />
<path d="M12.24 4.77273C14.0018 4.77273 15.5836 5.37818 16.8273 6.56727L20.2691 3.12545C18.1909 1.18909 15.4745 0 12.24 0C7.54909 0 3.49091 2.68909 1.51636 6.61091L5.52545 9.72C6.46909 6.88364 9.11455 4.77273 12.24 4.77273Z" fill="#EA4335" />
</svg>
</div>
</a>
</div>
</div>
</div>
<div class="space-y-4">
<div class="text-center">

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,7 +17,7 @@
<h1 class="text-center text-xl">Sign In</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<div>
@ -33,11 +33,11 @@
</div>
<form class="m-0 space-y-4" method="post" action="loginAction">
<div class="flex flex-col pt-4 space-y-2">
<button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="login" type="submit"> Continue </button> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="cancel" type="submit"> Ignore </button>
<button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="login" type="submit"> Continue </button> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="cancel" type="submit"> Ignore </button>
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,20 +17,20 @@
<h1 class="text-center text-xl">Sign in to your account</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="loginAction" onsubmit="login.disabled = true; return true;">
<input name="credentialId" type="hidden" value="">
<div>
<label class="sr-only" for="username"> Email </label> <input autofocus required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="username" name="username" placeholder="Email" type="text" autocomplete="email" value="">
<label class="sr-only" for="username"> Email </label> <input autofocus required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="username" name="username" placeholder="Email" type="text" autocomplete="email" value="">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
<div>
<label class="sr-only" for="password"> Password </label>
<div class="relative" x-data="{ show: false }">
<input required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="password" name="password" placeholder="Password" :type="show ? 'text' : 'password'"> <button @click="show = !show" aria-controls="password" :aria-expanded="show" class="absolute text-secondary-400 right-3 top-3 sm:top-2" type="button">
<input required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="password" name="password" placeholder="Password" :type="show ? 'text' : 'password'"> <button @click="show = !show" aria-controls="password" :aria-expanded="show" class="absolute text-secondary-400 right-3 top-3 sm:top-2" type="button">
<div x-show="!show">
<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 12.5C11.3807 12.5 12.5 11.3807 12.5 10C12.5 8.61929 11.3807 7.5 10 7.5C8.61929 7.5 7.5 8.61929 7.5 10C7.5 11.3807 8.61929 12.5 10 12.5Z" /> <path clip-rule="evenodd" d="M0.664255 10.5904C0.517392 10.2087 0.517518 9.78563 0.66461 9.40408C2.10878 5.65788 5.7433 3 9.99859 3C14.256 3 17.892 5.66051 19.3347 9.40962C19.4816 9.79127 19.4814 10.2144 19.3344 10.5959C17.8902 14.3421 14.2557 17 10.0004 17C5.74298 17 2.10698 14.3395 0.664255 10.5904ZM14.0004 10C14.0004 12.2091 12.2095 14 10.0004 14C7.79123 14 6.00037 12.2091 6.00037 10C6.00037 7.79086 7.79123 6 10.0004 6C12.2095 6 14.0004 7.79086 14.0004 10Z" fill-rule="evenodd" />
@ -47,7 +47,7 @@
</div>
<div class="flex items-center justify-between">
<div class="flex items-center">
<input checked class="border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50" id="rememberMe" name="rememberMe" type="checkbox"> <label class="ml-2 text-secondary-600 text-sm" for="rememberMe"> Remember me </label>
<input checked class="dark:bg-zinc-800 dark:border-zinc-700 border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50" id="rememberMe" name="rememberMe" type="checkbox"> <label class="ml-2 text-secondary-600 text-sm" for="rememberMe"> Remember me </label>
</div><a class="text-primary-600 hover:text-primary-500 text-sm inline-flex" href="loginResetCredentialsUrl"> Forgot Password? </a>
</div>
<div class="flex flex-col pt-4 space-y-2">
@ -55,28 +55,48 @@
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
<div class="pt-4 separate text-secondary-600 text-sm">
Or sign in with
<div class="relative flex py-4 text-gray-400 text-sm items-center">
<div class="flex-grow border-t dark:border-zinc-700"></div>
<span class="flex-shrink mx-4">Or sign in with</span>
<div class="flex-grow border-t dark:border-zinc-700"></div>
</div>
<div class="gap-4 grid grid-cols-3">
<a class="hover:bg-provider-facebook/10 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="facebook" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Facebook</title><path d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.38822 22.954 10.125 23.8542V15.4688H7.07813V12H10.125V9.35626C10.125 6.34875 11.9165 4.68751 14.6576 4.68751C15.9705 4.68751 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.3399 7.875 13.875 8.80002 13.875 9.74901V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z" fill="#1877F2" /> <path d="M16.6711 15.4688L17.2031 12H13.875V9.74901C13.875 8.80002 14.3399 7.875 15.8306 7.875H17.3438V4.92188C17.3438 4.92188 15.9705 4.68751 14.6576 4.68751C11.9165 4.68751 10.125 6.34875 10.125 9.35626V12H7.07813V15.4688H10.125V23.8542C10.7453 23.9514 11.3722 24.0002 12 24C12.6379 24 13.2641 23.9501 13.875 23.8542V15.4688H16.6711Z" fill="white" />
</svg>
</div></a> <a class="hover:bg-provider-github/10 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="github" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title><path d="M11.8452 0C5.13387 0 0 5.09516 0 11.8065C0 17.1726 3.37742 21.7645 8.20161 23.3806C8.82097 23.4919 9.03871 23.1097 9.03871 22.7952C9.03871 22.4952 9.02419 20.8403 9.02419 19.8242C9.02419 19.8242 5.6371 20.55 4.92581 18.3823C4.92581 18.3823 4.37419 16.9742 3.58065 16.6113C3.58065 16.6113 2.47258 15.8516 3.65806 15.8661C3.65806 15.8661 4.8629 15.9629 5.52581 17.1145C6.58548 18.9823 8.36129 18.4452 9.05323 18.1258C9.16452 17.3516 9.47903 16.8145 9.82742 16.4952C7.12258 16.1952 4.39355 15.8032 4.39355 11.1484C4.39355 9.81774 4.76129 9.15 5.53548 8.29839C5.40968 7.98387 4.99839 6.6871 5.66129 5.0129C6.67258 4.69839 9 6.31936 9 6.31936C9.96774 6.04839 11.0081 5.90806 12.0387 5.90806C13.0694 5.90806 14.1097 6.04839 15.0774 6.31936C15.0774 6.31936 17.4048 4.69355 18.4161 5.0129C19.079 6.69194 18.6677 7.98387 18.5419 8.29839C19.3161 9.15484 19.7903 9.82258 19.7903 11.1484C19.7903 15.8177 16.9403 16.1903 14.2355 16.4952C14.6806 16.8774 15.0581 17.6032 15.0581 18.7403C15.0581 20.371 15.0435 22.3887 15.0435 22.7855C15.0435 23.1 15.2661 23.4823 15.8806 23.371C20.7194 21.7645 24 17.1726 24 11.8065C24 5.09516 18.5565 0 11.8452 0Z" fill="#181717" />
</svg>
</div></a> <a class="hover:bg-provider-google/10 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="google" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Google</title><path d="M23.76 12.2727C23.76 11.4218 23.6836 10.6036 23.5418 9.81818H12.24V14.46H18.6982C18.42 15.96 17.5745 17.2309 16.3036 18.0818L18.2427 19.5873L20.1818 21.0927C22.4509 19.0036 23.76 15.9273 23.76 12.2727Z" fill="#4285F4" /> <path d="M12.24 24C15.48 24 18.1964 22.9255 20.1818 21.0927L16.3036 18.0818C15.2291 18.8018 13.8545 19.2273 12.24 19.2273C9.11455 19.2273 6.46909 17.1164 5.52545 14.28L3.52091 15.8345L1.51636 17.3891C3.49091 21.3109 7.54909 24 12.24 24Z" fill="#34A853" /> <path d="M5.52545 14.28C5.28545 13.56 5.14909 12.7909 5.14909 12C5.14909 11.2091 5.28545 10.44 5.52545 9.72L3.52091 8.16546L1.51636 6.61091C0.703637 8.23091 0.240001 10.0636 0.240001 12C0.240001 13.9364 0.703637 15.7691 1.51636 17.3891L5.52545 14.28Z" fill="#FBBC05" /> <path d="M12.24 4.77273C14.0018 4.77273 15.5836 5.37818 16.8273 6.56727L20.2691 3.12545C18.1909 1.18909 15.4745 0 12.24 0C7.54909 0 3.49091 2.68909 1.51636 6.61091L5.52545 9.72C6.46909 6.88364 9.11455 4.77273 12.24 4.77273Z" fill="#EA4335" />
</svg>
</div></a>
<div class="dark:bg-zinc-600 rounded-lg">
<a class="hover:bg-provider-facebook/10 dark:border-zinc-700 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="facebook" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Facebook</title>
<path d="M24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 17.9895 4.38822 22.954 10.125 23.8542V15.4688H7.07813V12H10.125V9.35626C10.125 6.34875 11.9165 4.68751 14.6576 4.68751C15.9705 4.68751 17.3438 4.92188 17.3438 4.92188V7.875H15.8306C14.3399 7.875 13.875 8.80002 13.875 9.74901V12H17.2031L16.6711 15.4688H13.875V23.8542C19.6118 22.954 24 17.9895 24 12Z" fill="#1877F2" />
<path d="M16.6711 15.4688L17.2031 12H13.875V9.74901C13.875 8.80002 14.3399 7.875 15.8306 7.875H17.3438V4.92188C17.3438 4.92188 15.9705 4.68751 14.6576 4.68751C11.9165 4.68751 10.125 6.34875 10.125 9.35626V12H7.07813V15.4688H10.125V23.8542C10.7453 23.9514 11.3722 24.0002 12 24C12.6379 24 13.2641 23.9501 13.875 23.8542V15.4688H16.6711Z" fill="white" />
</svg>
</div>
</a>
</div>
<div class="dark:bg-zinc-600 rounded-lg">
<a class="hover:bg-provider-github/10 dark:border-zinc-700 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="github" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title>
<path d="M11.8452 0C5.13387 0 0 5.09516 0 11.8065C0 17.1726 3.37742 21.7645 8.20161 23.3806C8.82097 23.4919 9.03871 23.1097 9.03871 22.7952C9.03871 22.4952 9.02419 20.8403 9.02419 19.8242C9.02419 19.8242 5.6371 20.55 4.92581 18.3823C4.92581 18.3823 4.37419 16.9742 3.58065 16.6113C3.58065 16.6113 2.47258 15.8516 3.65806 15.8661C3.65806 15.8661 4.8629 15.9629 5.52581 17.1145C6.58548 18.9823 8.36129 18.4452 9.05323 18.1258C9.16452 17.3516 9.47903 16.8145 9.82742 16.4952C7.12258 16.1952 4.39355 15.8032 4.39355 11.1484C4.39355 9.81774 4.76129 9.15 5.53548 8.29839C5.40968 7.98387 4.99839 6.6871 5.66129 5.0129C6.67258 4.69839 9 6.31936 9 6.31936C9.96774 6.04839 11.0081 5.90806 12.0387 5.90806C13.0694 5.90806 14.1097 6.04839 15.0774 6.31936C15.0774 6.31936 17.4048 4.69355 18.4161 5.0129C19.079 6.69194 18.6677 7.98387 18.5419 8.29839C19.3161 9.15484 19.7903 9.82258 19.7903 11.1484C19.7903 15.8177 16.9403 16.1903 14.2355 16.4952C14.6806 16.8774 15.0581 17.6032 15.0581 18.7403C15.0581 20.371 15.0435 22.3887 15.0435 22.7855C15.0435 23.1 15.2661 23.4823 15.8806 23.371C20.7194 21.7645 24 17.1726 24 11.8065C24 5.09516 18.5565 0 11.8452 0Z" fill="#181717" />
</svg>
</div>
</a>
</div>
<div class="dark:bg-zinc-600 rounded-lg">
<a class="hover:bg-provider-google/10 dark:border-zinc-700 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent" data-provider="google" href="loginUrl" type="button">
<div class="h-6 w-6">
<svg viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Google</title>
<path d="M23.76 12.2727C23.76 11.4218 23.6836 10.6036 23.5418 9.81818H12.24V14.46H18.6982C18.42 15.96 17.5745 17.2309 16.3036 18.0818L18.2427 19.5873L20.1818 21.0927C22.4509 19.0036 23.76 15.9273 23.76 12.2727Z" fill="#4285F4" />
<path d="M12.24 24C15.48 24 18.1964 22.9255 20.1818 21.0927L16.3036 18.0818C15.2291 18.8018 13.8545 19.2273 12.24 19.2273C9.11455 19.2273 6.46909 17.1164 5.52545 14.28L3.52091 15.8345L1.51636 17.3891C3.49091 21.3109 7.54909 24 12.24 24Z" fill="#34A853" />
<path d="M5.52545 14.28C5.28545 13.56 5.14909 12.7909 5.14909 12C5.14909 11.2091 5.28545 10.44 5.52545 9.72L3.52091 8.16546L1.51636 6.61091C0.703637 8.23091 0.240001 10.0636 0.240001 12C0.240001 13.9364 0.703637 15.7691 1.51636 17.3891L5.52545 14.28Z" fill="#FBBC05" />
<path d="M12.24 4.77273C14.0018 4.77273 15.5836 5.37818 16.8273 6.56727L20.2691 3.12545C18.1909 1.18909 15.4745 0 12.24 0C7.54909 0 3.49091 2.68909 1.51636 6.61091L5.52545 9.72C6.46909 6.88364 9.11455 4.77273 12.24 4.77273Z" fill="#EA4335" />
</svg>
</div>
</a>
</div>
</div>
</div>
<div class="space-y-4">

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,7 +17,7 @@
<h1 class="text-center text-xl">Logging out</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<p>Do you want to log out?</p>
@ -25,7 +25,7 @@
<input name="session_code" type="hidden" value="code"> <button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="confirmLogout" type="submit" value="Logout"> Logout </button>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,22 +17,22 @@
<h1 class="text-center text-xl">Register</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<form class="m-0 space-y-4" method="post" action="registrationAction">
<div>
<label class="sr-only" for="firstName"> First name </label> <input autofocus required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="firstName" name="firstName" placeholder="First name" type="text" autocomplete="given-name" value="">
<label class="sr-only" for="firstName"> First name </label> <input autofocus required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="firstName" name="firstName" placeholder="First name" type="text" autocomplete="given-name" value="">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
<div>
<label class="sr-only" for="lastName"> Last name </label> <input required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="lastName" name="lastName" placeholder="Last name" type="text" autocomplete="family-name" value="">
<label class="sr-only" for="lastName"> Last name </label> <input required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="lastName" name="lastName" placeholder="Last name" type="text" autocomplete="family-name" value="">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
<div>
<label class="sr-only" for="email"> Email </label> <input required aria-invalid="false" class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="email" name="email" placeholder="Email" type="email" autocomplete="email" value="">
<label class="sr-only" for="email"> Email </label> <input required aria-invalid="false" class="dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm" id="email" name="email" placeholder="Email" type="email" autocomplete="email" value="">
<div class="mt-2 text-red-600 text-sm">
</div>
</div>
@ -41,7 +41,7 @@
</div>
</form>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,7 +17,7 @@
<h1 class="text-center text-xl">Select login method</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<div x-data>
@ -32,7 +32,7 @@
</form>
</div>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -8,9 +8,9 @@
<script defer src="http://localhost:5173/dist/webAuthnAuthenticate.js" type="module"></script>
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -18,7 +18,7 @@
<h1 class="text-center text-xl">Security Key login</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<div x-data="webAuthnAuthenticate">
@ -30,7 +30,7 @@
</div>
</div>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -1,4 +1,4 @@
<html lang="en">
<html lang="en" class="dark">
<head>
<title>Sign in to </title>
<meta charset="utf-8">
@ -7,9 +7,9 @@
<link href="http://localhost:5173/src/index.css" rel="stylesheet">
<script defer src="http://localhost:5173/src/index.ts" type="module"></script>
</head>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<div class="max-w-md space-y-6 w-full">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 bg-white p-8 rounded-lg space-y-6">
<div class="space-y-4">
<div class="font-bold text-center text-2xl">
Keywind
@ -17,7 +17,7 @@
<h1 class="text-center text-xl">Security Key Error</h1>
</div>
<div class="space-y-4">
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
<div class="dark:bg-opacity-90 bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
Example of an error message
</div>
<div x-data>
@ -29,7 +29,7 @@
</div>
</div>
<form action="loginAction" method="post">
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
<input name="tryAnotherWay" type="hidden" value="on"> <button class="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
</form>
</div>
</div>

View file

@ -23,5 +23,6 @@
"typescript": "^5.2.2",
"vite": "^4.4.9",
"vite-node": "^0.34.5"
}
},
"packageManager": "pnpm@8.15.6+sha256.01c01eeb990e379b31ef19c03e9d06a14afa5250b82e81303f88721c99ff2e6f"
}

View file

@ -6,6 +6,7 @@ export default {
experimental: {
optimizeUniversalDefaults: true,
},
darkMode: "class",
plugins: [require('@tailwindcss/forms')],
theme: {
extend: {

View file

@ -1,19 +1,19 @@
<#macro kw color="">
<#switch color>
<#case "error">
<#assign colorClass="bg-red-100 text-red-600">
<#assign colorClass="dark:bg-opacity-90 bg-red-100 text-red-600">
<#break>
<#case "info">
<#assign colorClass="bg-blue-100 text-blue-600">
<#assign colorClass="dark:bg-opacity-90 bg-blue-100 text-blue-600">
<#break>
<#case "success">
<#assign colorClass="bg-green-100 text-green-600">
<#assign colorClass="dark:bg-opacity-90 bg-green-100 text-green-600">
<#break>
<#case "warning">
<#assign colorClass="bg-orange-100 text-orange-600">
<#assign colorClass="dark:bg-opacity-90 bg-orange-100 text-orange-600">
<#break>
<#default>
<#assign colorClass="bg-blue-100 text-blue-600">
<#assign colorClass="dark:bg-opacity-90 bg-blue-100 text-blue-600">
</#switch>
<div class="${colorClass} p-4 rounded-lg text-sm" role="alert">

View file

@ -1,5 +1,7 @@
<#macro kw>
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<body class="dark:bg-zinc-950 dark:text-gray-300 bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
<!-- just for add class to bundle -->
<div class="flex dark:hidden"></div>
<#nested>
</body>
</#macro>

View file

@ -4,7 +4,7 @@
<#assign colorClass="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700">
<#break>
<#case "secondary">
<#assign colorClass="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900">
<#assign colorClass="dark:bg-zinc-700 dark:text-secondary-200 bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900">
<#break>
<#default>
<#assign colorClass="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700">

View file

@ -1,5 +1,5 @@
<#macro kw content="" footer="" header="">
<div class="bg-white p-8 rounded-lg space-y-6">
<div class="dark:bg-zinc-900 dark:text-gray-300 bg-white p-8 rounded-lg space-y-6">
<#if header?has_content>
<div class="space-y-4">
${header}

View file

@ -3,7 +3,7 @@
<input
<#if checked>checked</#if>
class="border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50"
class="dark:bg-zinc-700 border-secondary-200 h-4 rounded text-primary-600 w-4 focus:ring-primary-200 focus:ring-opacity-50"
id="${name}"
name="${name}"
type="checkbox"

View file

@ -4,7 +4,7 @@
<#macro
kw
autofocus=false
class="block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm"
class="dark:bg-zinc-800 dark:border-zinc-700 dark:bg-zinc-800 dark:border-zinc-700 block border-secondary-200 mt-1 rounded-md w-full focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 sm:text-sm"
disabled=false
invalid=false
label=""

View file

@ -1,8 +1,10 @@
<#import "/assets/providers/providers.ftl" as providerIcons>
<#macro kw providers=[]>
<div class="pt-4 separate text-secondary-600 text-sm">
${msg("identity-provider-login-label")}
<div class="relative flex py-4 text-gray-400 text-sm items-center">
<div class="flex-grow border-t dark:border-zinc-700"></div>
<span class="flex-shrink mx-4">${msg("identity-provider-login-label")}</span>
<div class="flex-grow border-t dark:border-zinc-700"></div>
</div>
<div class="gap-4 grid grid-cols-3">
<#list providers as provider>
@ -62,20 +64,22 @@
<#assign colorClass="hover:bg-secondary-100">
</#switch>
<a
class="${colorClass} border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent"
data-provider="${provider.alias}"
href="${provider.loginUrl}"
type="button"
>
<#if providerIcons[provider.alias]??>
<div class="h-6 w-6">
<@providerIcons[provider.alias] />
</div>
<#else>
${provider.displayName!}
</#if>
</a>
<div class="dark:bg-zinc-600 rounded-lg">
<a
class="${colorClass} dark:border-zinc-700 border border-secondary-200 flex justify-center py-2 rounded-lg hover:border-transparent"
data-provider="${provider.alias}"
href="${provider.loginUrl}"
type="button"
>
<#if providerIcons[provider.alias]??>
<div class="h-6 w-6">
<@providerIcons[provider.alias] />
</div>
<#else>
${provider.displayName!}
</#if>
</a>
</div>
</#list>
</div>
</#macro>

View file

@ -1 +0,0 @@
var s={};Object.defineProperty(s,"__esModule",{value:!0});function v(e,r,a){var l;if(a===void 0&&(a={}),!r.codes){r.codes={};for(var n=0;n<r.chars.length;++n)r.codes[r.chars[n]]=n}if(!a.loose&&e.length*r.bits&7)throw new SyntaxError("Invalid padding");for(var b=e.length;e[b-1]==="=";)if(--b,!a.loose&&!((e.length-b)*r.bits&7))throw new SyntaxError("Invalid padding");for(var c=new((l=a.out)!=null?l:Uint8Array)(b*r.bits/8|0),t=0,i=0,u=0,f=0;f<b;++f){var h=r.codes[e[f]];if(h===void 0)throw new SyntaxError("Invalid character "+e[f]);i=i<<r.bits|h,t+=r.bits,t>=8&&(t-=8,c[u++]=255&i>>t)}if(t>=r.bits||255&i<<8-t)throw new SyntaxError("Unexpected end of data");return c}function o(e,r,a){a===void 0&&(a={});for(var l=a,n=l.pad,b=n===void 0?!0:n,c=(1<<r.bits)-1,t="",i=0,u=0,f=0;f<e.length;++f)for(u=u<<8|255&e[f],i+=8;i>r.bits;)i-=r.bits,t+=r.chars[c&u>>i];if(i&&(t+=r.chars[c&u<<r.bits-i]),b)for(;t.length*r.bits&7;)t+="=";return t}var p={chars:"0123456789ABCDEF",bits:4},y={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZ234567",bits:5},d={chars:"0123456789ABCDEFGHIJKLMNOPQRSTUV",bits:5},w={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/",bits:6},x={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_",bits:6},E={parse:function(r,a){return v(r.toUpperCase(),p,a)},stringify:function(r,a){return o(r,p,a)}},$={parse:function(r,a){return a===void 0&&(a={}),v(a.loose?r.toUpperCase().replace(/0/g,"O").replace(/1/g,"L").replace(/8/g,"B"):r,y,a)},stringify:function(r,a){return o(r,y,a)}},U={parse:function(r,a){return v(r,d,a)},stringify:function(r,a){return o(r,d,a)}},S={parse:function(r,a){return v(r,w,a)},stringify:function(r,a){return o(r,w,a)}},g={parse:function(r,a){return v(r,x,a)},stringify:function(r,a){return o(r,x,a)}},C={parse:v,stringify:o};s.base16=E;s.base32=$;s.base32hex=U;s.base64=S;s.base64url=g;s.codec=C;s.base16;s.base32;s.base32hex;s.base64;const I=s.base64url;s.codec;export{I as b};

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1 @@
function w(f,r,a){var l;if(a===void 0&&(a={}),!r.codes){r.codes={};for(var v=0;v<r.chars.length;++v)r.codes[r.chars[v]]=v}if(!a.loose&&f.length*r.bits&7)throw new SyntaxError("Invalid padding");for(var b=f.length;f[b-1]==="=";)if(--b,!a.loose&&!((f.length-b)*r.bits&7))throw new SyntaxError("Invalid padding");for(var i=new((l=a.out)!=null?l:Uint8Array)(b*r.bits/8|0),t=0,s=0,h=0,e=0;e<b;++e){var u=r.codes[f[e]];if(u===void 0)throw new SyntaxError("Invalid character "+f[e]);s=s<<r.bits|u,t+=r.bits,t>=8&&(t-=8,i[h++]=255&s>>t)}if(t>=r.bits||255&s<<8-t)throw new SyntaxError("Unexpected end of data");return i}function x(f,r,a){a===void 0&&(a={});for(var l=a,v=l.pad,b=v===void 0?!0:v,i=(1<<r.bits)-1,t="",s=0,h=0,e=0;e<f.length;++e)for(h=h<<8|255&f[e],s+=8;s>r.bits;)s-=r.bits,t+=r.chars[i&h>>s];if(s&&(t+=r.chars[i&h<<r.bits-s]),b)for(;t.length*r.bits&7;)t+="=";return t}var o={chars:"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_",bits:6},y={parse:function(r,a){return w(r,o,a)},stringify:function(r,a){return x(r,o,a)}};export{y as b};

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
import{m as o}from"./assets/module.esm-9a996e1c.js";window.Alpine=o;o.start();
import{m as o}from"./assets/module.esm-a81817bb.js";window.Alpine=o;o.start();

View file

@ -1,4 +1,4 @@
import{m as p}from"./assets/module.esm-9a996e1c.js";document.addEventListener("alpine:init",()=>{p.data("recoveryCodes",function(){const{codeList:o}=this.$refs,{downloadFileDate:n,downloadFileDescription:i,downloadFileHeader:d,downloadFileName:s}=this.$store.recoveryCodes,a=new Date().toLocaleString(navigator.language),r=o.getElementsByTagName("li"),l=Array.from(r).map(t=>t.innerText).join(`
import{m as p}from"./assets/module.esm-a81817bb.js";document.addEventListener("alpine:init",()=>{p.data("recoveryCodes",function(){const{codeList:o}=this.$refs,{downloadFileDate:n,downloadFileDescription:i,downloadFileHeader:d,downloadFileName:s}=this.$store.recoveryCodes,a=new Date().toLocaleString(navigator.language),r=o.getElementsByTagName("li"),l=Array.from(r).map(t=>t.innerText).join(`
`);return{copy:()=>navigator.clipboard.writeText(l),download:()=>{const t=document.createElement("a"),c=`${d}
${l}

View file

@ -1 +1 @@
import{m as g}from"./assets/module.esm-9a996e1c.js";import{b as n}from"./assets/index-a7b84447.js";document.addEventListener("alpine:init",()=>{g.data("webAuthnAuthenticate",function(){const{authenticatorDataInput:l,authnSelectForm:r,clientDataJSONInput:p,credentialIdInput:f,errorInput:s,signatureInput:d,userHandleInput:h,webAuthnForm:a}=this.$refs,{challenge:m,createTimeout:o,isUserIdentified:A,rpId:w,unsupportedBrowserText:y,userVerification:u}=this.$store.webAuthnAuthenticate,c=i=>{if(!window.PublicKeyCredential){s.value=y,a.submit();return}const t={challenge:n.parse(m,{loose:!0}),rpId:w};i.length&&(t.allowCredentials=i),parseInt(o)!==0&&(t.timeout=parseInt(o)*1e3),u!=="not specified"&&(t.userVerification=u),navigator.credentials.get({publicKey:t}).then(e=>{e instanceof PublicKeyCredential&&e.response instanceof AuthenticatorAssertionResponse&&(window.result=e,l.value=n.stringify(new Uint8Array(e.response.authenticatorData),{pad:!1}),p.value=n.stringify(new Uint8Array(e.response.clientDataJSON),{pad:!1}),d.value=n.stringify(new Uint8Array(e.response.signature),{pad:!1}),f.value=e.id,e.response.userHandle&&(h.value=n.stringify(new Uint8Array(e.response.userHandle),{pad:!1})),a.submit())}).catch(e=>{s.value=e,a.submit()})},b=()=>{const i=[];if(r){const t=Array.from(r.elements);t.length&&t.forEach(e=>{e instanceof HTMLInputElement&&i.push({id:n.parse(e.value,{loose:!0}),type:"public-key"})})}c(i)};return{webAuthnAuthenticate:()=>{if(!A){c([]);return}b()}}})});
import{m as g}from"./assets/module.esm-a81817bb.js";import{b as n}from"./assets/rfc4648-b81320ce.js";document.addEventListener("alpine:init",()=>{g.data("webAuthnAuthenticate",function(){const{authenticatorDataInput:l,authnSelectForm:r,clientDataJSONInput:p,credentialIdInput:f,errorInput:s,signatureInput:d,userHandleInput:h,webAuthnForm:a}=this.$refs,{challenge:m,createTimeout:o,isUserIdentified:A,rpId:w,unsupportedBrowserText:y,userVerification:u}=this.$store.webAuthnAuthenticate,c=i=>{if(!window.PublicKeyCredential){s.value=y,a.submit();return}const t={challenge:n.parse(m,{loose:!0}),rpId:w};i.length&&(t.allowCredentials=i),parseInt(o)!==0&&(t.timeout=parseInt(o)*1e3),u!=="not specified"&&(t.userVerification=u),navigator.credentials.get({publicKey:t}).then(e=>{e instanceof PublicKeyCredential&&e.response instanceof AuthenticatorAssertionResponse&&(window.result=e,l.value=n.stringify(new Uint8Array(e.response.authenticatorData),{pad:!1}),p.value=n.stringify(new Uint8Array(e.response.clientDataJSON),{pad:!1}),d.value=n.stringify(new Uint8Array(e.response.signature),{pad:!1}),f.value=e.id,e.response.userHandle&&(h.value=n.stringify(new Uint8Array(e.response.userHandle),{pad:!1})),a.submit())}).catch(e=>{s.value=e,a.submit()})},b=()=>{const i=[];if(r){const t=Array.from(r.elements);t.length&&t.forEach(e=>{e instanceof HTMLInputElement&&i.push({id:n.parse(e.value,{loose:!0}),type:"public-key"})})}c(i)};return{webAuthnAuthenticate:()=>{if(!A){c([]);return}b()}}})});

View file

@ -1 +1 @@
import{m as T}from"./assets/module.esm-9a996e1c.js";import{b as a}from"./assets/index-a7b84447.js";document.addEventListener("alpine:init",()=>{T.data("webAuthnRegister",function(){const{attestationObjectInput:m,authenticatorLabelInput:g,clientDataJSONInput:A,errorInput:I,publicKeyCredentialIdInput:w,registerForm:s,transportsInput:C}=this.$refs,{attestationConveyancePreference:u,authenticatorAttachment:c,challenge:K,createTimeout:l,excludeCredentialIds:v,requireResidentKey:p,rpEntityName:S,rpId:P,signatureAlgorithms:R,unsupportedBrowserText:x,userId:E,userVerificationRequirement:d,username:f}=this.$store.webAuthnRegister,L=t=>{const e=[];return t===""?(e.push({alg:-7,type:"public-key"}),e):(t.split(",").forEach(r=>{e.push({alg:parseInt(r),type:"public-key"})}),e)},q=t=>{const e=[];return t===""||t.split(",").forEach(r=>{e.push({id:a.parse(r,{loose:!0}),type:"public-key"})}),e},N=t=>{if(t===""||t.constructor!==Array)return"";let e="";return t.forEach(i=>{e+=i+","}),e.slice(0,-1)};return{registerSecurityKey:()=>{if(!window.PublicKeyCredential){I.value=x,s.submit();return}const t={challenge:a.parse(K,{loose:!0}),pubKeyCredParams:L(R),rp:{id:P,name:S},user:{displayName:f,id:a.parse(E,{loose:!0}),name:f}};u!=="not specified"&&(t.attestation=u);const e={};let i=!1;c!=="not specified"&&(e.authenticatorAttachment=c,i=!0),p!=="not specified"&&(p==="Yes"?e.requireResidentKey=!0:e.requireResidentKey=!1,i=!0),d!=="not specified"&&(e.userVerification=d,i=!0),i&&(t.authenticatorSelection=e);const r=q(v);r.length>0&&(t.excludeCredentials=r),parseInt(l)!==0&&(t.timeout=parseInt(l)*1e3),navigator.credentials.create({publicKey:t}).then(n=>{if(n instanceof PublicKeyCredential&&n.response instanceof AuthenticatorAttestationResponse){const{getTransports:h}=n.response;window.result=n;const O=n.rawId;if(m.value=a.stringify(new Uint8Array(n.response.attestationObject),{pad:!1}),A.value=a.stringify(new Uint8Array(n.response.clientDataJSON),{pad:!1}),w.value=a.stringify(new Uint8Array(O),{pad:!1}),typeof h=="function"){const b=h();b&&(C.value=N(b))}else console.log("Your browser is not able to recognize supported transport media for the authenticator.");const y="WebAuthn Authenticator (Default Label)";let o=window.prompt("Please input your registered authenticator's label",y);o===null&&(o=y),g.value=o,s.submit()}}).catch(function(n){n.value=n,s.submit()})}}})});
import{m as T}from"./assets/module.esm-a81817bb.js";import{b as a}from"./assets/rfc4648-b81320ce.js";document.addEventListener("alpine:init",()=>{T.data("webAuthnRegister",function(){const{attestationObjectInput:m,authenticatorLabelInput:g,clientDataJSONInput:A,errorInput:I,publicKeyCredentialIdInput:w,registerForm:s,transportsInput:C}=this.$refs,{attestationConveyancePreference:u,authenticatorAttachment:c,challenge:K,createTimeout:l,excludeCredentialIds:v,requireResidentKey:p,rpEntityName:S,rpId:P,signatureAlgorithms:R,unsupportedBrowserText:x,userId:E,userVerificationRequirement:d,username:f}=this.$store.webAuthnRegister,L=t=>{const e=[];return t===""?(e.push({alg:-7,type:"public-key"}),e):(t.split(",").forEach(r=>{e.push({alg:parseInt(r),type:"public-key"})}),e)},q=t=>{const e=[];return t===""||t.split(",").forEach(r=>{e.push({id:a.parse(r,{loose:!0}),type:"public-key"})}),e},N=t=>{if(t===""||t.constructor!==Array)return"";let e="";return t.forEach(i=>{e+=i+","}),e.slice(0,-1)};return{registerSecurityKey:()=>{if(!window.PublicKeyCredential){I.value=x,s.submit();return}const t={challenge:a.parse(K,{loose:!0}),pubKeyCredParams:L(R),rp:{id:P,name:S},user:{displayName:f,id:a.parse(E,{loose:!0}),name:f}};u!=="not specified"&&(t.attestation=u);const e={};let i=!1;c!=="not specified"&&(e.authenticatorAttachment=c,i=!0),p!=="not specified"&&(p==="Yes"?e.requireResidentKey=!0:e.requireResidentKey=!1,i=!0),d!=="not specified"&&(e.userVerification=d,i=!0),i&&(t.authenticatorSelection=e);const r=q(v);r.length>0&&(t.excludeCredentials=r),parseInt(l)!==0&&(t.timeout=parseInt(l)*1e3),navigator.credentials.create({publicKey:t}).then(n=>{if(n instanceof PublicKeyCredential&&n.response instanceof AuthenticatorAttestationResponse){const{getTransports:h}=n.response;window.result=n;const O=n.rawId;if(m.value=a.stringify(new Uint8Array(n.response.attestationObject),{pad:!1}),A.value=a.stringify(new Uint8Array(n.response.clientDataJSON),{pad:!1}),w.value=a.stringify(new Uint8Array(O),{pad:!1}),typeof h=="function"){const b=h();b&&(C.value=N(b))}else console.log("Your browser is not able to recognize supported transport media for the authenticator.");const y="WebAuthn Authenticator (Default Label)";let o=window.prompt("Please input your registered authenticator's label",y);o===null&&(o=y),g.value=o,s.submit()}}).catch(function(n){n.value=n,s.submit()})}}})});

View file

@ -65,7 +65,7 @@
</#if>
</#assign>
<html<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}"</#if>>
<html<#if realm.internationalizationEnabled> lang="${locale.currentLanguageTag}"</#if> class="dark">
<head>
<@document.kw script=script />
</head>