@opengis/fastify-table
Version:
core-plugins
124 lines (117 loc) • 8.89 kB
HTML
<html lang="en" dir="">
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-white dark:bg-neutral-900">
<main class="flex h-[90vh] justify-center items-center">
<div class="space-y-8 w-[385px]">
<div class="text-center">
<h2 class="font-medium text-xl text-gray-800 dark:text-neutral-200">
Увійти до кабінету
</h2>
</div>
<div id="login_error" style="color: maroon;font-weight: 500;"></div>
<form action="/api/login" method="get" class="space-y-3">
<div>
<label for="hs-pro-shlgfem" class="sr-only">Email</label>
<input id="hs-pro-shlgfem" type="text" name="username"
class="py-3 px-4 block w-full border border-gray-200 rounded-lg sm:text-sm placeholder:text-gray-400 focus:outline-none h-[50px] focus:border-indigo-500 focus:border-2 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:placeholder:text-white/60 dark:focus:ring-neutral-600"
placeholder="Email">
</div>
<div>
<label for="hs-pro-shlgfps" class="sr-only">Password</label>
<div class="relative">
<input id="hs-pro-shlgfps" name="password" type="password"
class="py-3 px-4 block w-full border border-gray-200 rounded-lg sm:text-sm placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none h-[50px] focus:border-indigo-500 focus:border-2 disabled:opacity-50 disabled:pointer-events-none dark:bg-transparent dark:border-neutral-700 dark:text-neutral-300 dark:placeholder:text-white/60 dark:focus:ring-neutral-600"
placeholder="Password">
<button type="button" data-hs-toggle-password="{
"target": "#hs-pro-shlgfps"
}"
class="absolute inset-y-0 end-0 flex items-center z-20 px-3 cursor-pointer text-gray-400 rounded-e-md focus:outline-none">
</button>
</div>
</div>
<div class="flex flex-wrap justify-between items-center gap-3">
<div class="flex gap-x-1">
<input type="checkbox" name="keep"
class="shrink-0 border-gray-300 size-[18px] rounded text-indigo-600 focus:ring-indigo-600 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-600 dark:checked:bg-indigo-500 dark:checked:border-indigo-500 dark:focus:ring-offset-neutral-800"
id="hs-pro-shlgfemch">
<label for="hs-pro-shlgfemch" class="text-[13px] text-gray-500 ms-1.5 dark:text-neutral-400">
Remember me
</label>
</div>
<a class="text-[13px] text-gray-500 underline underline-offset-4 hover:text-indigo-600 focus:outline-none focus:text-indigo-600 dark:text-neutral-500 dark:hover:text-indigo-400 dark:focus:text-indigo-400"
href="#">Forgot your password?</a>
</div>
<div class="space-y-4">
<button type="submit"
class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 sm:text-sm font-medium rounded-lg border border-transparent bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-indigo-700">
Log in
</button>
</div>
</form>
<div class="space-y-4">
<a id="loginGovUA" style="background-color:rgba(188, 208, 58, 0.449);border-radius:70px;font-size:18px;" class="py-3 px-4 w-full inline-flex justify-center items-center gap-x-2 sm:text-sm font-medium rounded-lg border border-transparent bg-indigo-600 text-white hover:bg-indigo-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-indigo-700" href="https://nsdi.gov.ua/auth/redirect">
<div class="full-height">
<div class="main-logo d-flex align-items-center">
<span class="d-inline-block m-r-sm"><b>Авторизуватись з</b></span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1336.82 360" height="30px">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<title>id.gov.ua</title>
<g id="Шар_2" data-name="Шар 2">
<g id="Layer_1" data-name="Layer 1">
<rect x="254" width="720" height="360" rx="180"></rect>
<path class="cls-1" d="M614,260a80,80,0,1,1,80-80A80.09,80.09,0,0,1,614,260Zm0-130a50,50,0,1,0,50,50A50.06,50.06,0,0,0,614,130Z"></path>
<path d="M1093,260a80.09,80.09,0,0,1-80-80V115a15,15,0,0,1,30,0v65a50,50,0,0,0,100,0V115a15,15,0,0,1,30,0v65A80.09,80.09,0,0,1,1093,260Z"></path>
<path class="cls-1" d="M785,260a15,15,0,0,1-13.52-8.51l-60-125a15,15,0,0,1,27-13L785,210.34l46.48-96.83a15,15,0,1,1,27,13l-60,125A15,15,0,0,1,785,260Z"></path>
<path d="M1321.83,260a15,15,0,0,1-13.54-8.51l-46.47-96.83-46.48,96.83a15,15,0,0,1-27-13l60-125a15,15,0,0,1,27,0l60,125A15,15,0,0,1,1321.83,260Z"></path>
<path class="cls-1" d="M432,260a80,80,0,1,1,56.57-136.57,15,15,0,1,1-21.21,21.21A50,50,0,1,0,479.7,195H432a15,15,0,0,1,0-30h65a15,15,0,0,1,15,15A80.09,80.09,0,0,1,432,260Z"></path>
<path d="M141,100H76a15,15,0,0,0-15,15V245a15,15,0,0,0,15,15h65a80,80,0,0,0,0-160Zm0,130H91V130h50a50,50,0,0,1,0,100Z"></path>
<path d="M15,100A15,15,0,0,0,0,115V245a15,15,0,0,0,30,0V115A15,15,0,0,0,15,100Z"></path>
</g>
</g>
</svg>
</div>
</div>
</a>
</div>
<div>
<a
href="https://id.softpro.ua/oauth/authorize?response_type=code&provider=google&client_id=photo-client-123&redirect_uri={{coalesce protocol 'https'}}://{{req.raw.headers.host}}/auth/by_data&scope=profile email"
class="flex items-center justify-center mt-4 text-gray-600 transition-colors duration-300 transform border rounded-lg hover:bg-gray-50">
<div class="px-4 py-2">
<svg class="w-6 h-6" viewBox="0 0 40 40">
<path
d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
fill="#FFC107"></path>
<path
d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z"
fill="#FF3D00"></path>
<path
d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z"
fill="#4CAF50"></path>
<path
d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
fill="#1976D2"></path>
</svg>
</div>
<span class="w-5/6 px-4 py-3 font-bold text-center"> Увійти через Google</span>
</a>
</div>
</div>
</main>
</body>
<script>
const error = location.search.includes('wrong_pass')
if(error){
document.getElementById('login_error').innerHTML='Не вірний користувач або пароль';
}
</script>
</html>