2023-12-01 11:18:39 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
2024-01-22 08:50:28 +07:00
|
|
|
<head>
|
|
|
|
|
<meta name="robots" content="noindex">
|
2023-12-01 11:18:39 +00:00
|
|
|
<meta charset="UTF-8">
|
2024-01-22 08:50:28 +07:00
|
|
|
<title>Create Account - Nostr</title>
|
2023-12-01 11:18:39 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
2024-01-22 08:50:28 +07:00
|
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
|
2024-01-02 11:11:06 +00:00
|
|
|
<script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>
|
|
|
|
|
<script>
|
2024-01-22 08:50:28 +07:00
|
|
|
tailwind.config = {
|
|
|
|
|
theme: {
|
|
|
|
|
extend: {
|
|
|
|
|
colors: {
|
|
|
|
|
neutral: {
|
|
|
|
|
750: '#313131'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
boxShadow: {
|
|
|
|
|
input: `
|
|
|
|
|
0px 1px 0px -1px var(--tw-shadow-color),
|
|
|
|
|
0px 1px 1px -1px var(--tw-shadow-color),
|
|
|
|
|
0px 1px 2px -1px var(--tw-shadow-color),
|
|
|
|
|
0px 2px 4px -2px var(--tw-shadow-color),
|
|
|
|
|
0px 3px 6px -3px var(--tw-shadow-color)
|
|
|
|
|
`,
|
|
|
|
|
highlight: `
|
|
|
|
|
inset 0px 0px 0px 1px var(--tw-shadow-color),
|
|
|
|
|
inset 0px 1px 0px var(--tw-shadow-color)
|
|
|
|
|
`,
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
|
const form = document.querySelector('form');
|
|
|
|
|
const password = document.querySelector('input[name="password"]');
|
|
|
|
|
const confirmPassword = document.querySelector('input[name="confirm_password"]');
|
2024-01-02 11:11:06 +00:00
|
|
|
|
2024-01-22 08:50:28 +07:00
|
|
|
form.addEventListener('submit', function (event) {
|
|
|
|
|
let valid = true;
|
2024-01-02 11:11:06 +00:00
|
|
|
|
2024-01-22 08:50:28 +07:00
|
|
|
// Check if passwords match and are at least 8 characters long
|
|
|
|
|
if (password.value !== confirmPassword.value) {
|
|
|
|
|
alert("Passwords do not match!");
|
|
|
|
|
valid = false;
|
|
|
|
|
} else if (password.value.length < 8) {
|
|
|
|
|
alert("Password must be at least 8 characters long!");
|
|
|
|
|
valid = false;
|
|
|
|
|
}
|
2024-01-02 11:11:06 +00:00
|
|
|
|
2024-01-22 08:50:28 +07:00
|
|
|
if (!valid) {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
}
|
2024-01-02 11:11:06 +00:00
|
|
|
});
|
2024-01-22 08:50:28 +07:00
|
|
|
});
|
2024-01-02 11:11:06 +00:00
|
|
|
</script>
|
2023-12-01 11:18:39 +00:00
|
|
|
<style>
|
2024-01-22 08:50:28 +07:00
|
|
|
body {
|
|
|
|
|
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
|
|
|
}
|
2023-12-01 11:18:39 +00:00
|
|
|
|
2024-01-22 08:50:28 +07:00
|
|
|
.border {
|
|
|
|
|
background-clip: padding-box;
|
|
|
|
|
}
|
2023-12-01 11:18:39 +00:00
|
|
|
</style>
|
2024-01-22 08:50:28 +07:00
|
|
|
</head>
|
|
|
|
|
<body
|
|
|
|
|
class="p-2 flex flex-col justify-center items-center min-h-screen bg-gray-100 dark:bg-neutral-800 text-neutrla-950 dark:text-neutral-50">
|
|
|
|
|
<div class="max-w-md mx-auto w-full">
|
|
|
|
|
<div class="flex justify-start mb-10">
|
|
|
|
|
<h1
|
|
|
|
|
class="text-neutral-950 dark:text-neutral-50 text-lg font-semibold w-full">
|
|
|
|
|
Complete Creating Account
|
|
|
|
|
</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<form
|
2024-01-23 14:31:49 +07:00
|
|
|
action="{{urlPrefix}}/register/{{record.id}}"
|
2024-01-22 08:50:28 +07:00
|
|
|
method="POST"
|
|
|
|
|
class="w-full flex flex-col gap-5">
|
|
|
|
|
{{#if error}}
|
|
|
|
|
<div
|
|
|
|
|
class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
|
|
|
|
|
role="alert">
|
|
|
|
|
<span class="block sm:inline">{{error}}</span>
|
2023-12-20 10:21:24 +00:00
|
|
|
</div>
|
2024-01-22 08:50:28 +07:00
|
|
|
{{/if}}
|
2023-12-20 10:21:24 +00:00
|
|
|
|
2024-02-15 13:18:17 +00:00
|
|
|
<input type="hidden" name="email" value="" />
|
2023-12-01 11:18:39 +00:00
|
|
|
|
2024-01-22 08:50:28 +07:00
|
|
|
<label class="flex flex-col gap-2">
|
|
|
|
|
<span
|
|
|
|
|
class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
|
|
|
|
|
Username
|
|
|
|
|
</span>
|
|
|
|
|
<div
|
|
|
|
|
class="relative before:pointer-events-none focus-within:before:opacity-100 before:opacity-0 before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight dark:after:shadow-white/5 dark:focus-within:after:shadow-blue-500/20 after:transition">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
name="username"
|
|
|
|
|
value="{{username}}"
|
2024-01-22 09:14:45 +07:00
|
|
|
class="w-full relative text-sm text-blue-500 dark:text-blue-500 bg-neutral-200 dark:bg-neutral-800 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 px-3.5 py-2 rounded-lg border-none" />
|
2024-01-22 08:50:28 +07:00
|
|
|
<span
|
2024-01-22 09:14:45 +07:00
|
|
|
class="text-neutral-500 text-sm absolute right-4 top-1/2 transform -translate-y-1/2">
|
2024-01-22 08:50:28 +07:00
|
|
|
@{{domain}}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
2023-12-01 11:18:39 +00:00
|
|
|
|
2024-01-22 08:50:28 +07:00
|
|
|
<label class="flex flex-col gap-2">
|
|
|
|
|
<span
|
|
|
|
|
class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
|
|
|
|
|
Password
|
|
|
|
|
</span>
|
|
|
|
|
<div
|
|
|
|
|
class="relative before:pointer-events-none focus-within:before:opacity-100 before:opacity-0 before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight dark:after:shadow-white/5 dark:focus-within:after:shadow-blue-500/20 after:transition">
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
name="password"
|
|
|
|
|
required
|
|
|
|
|
class="w-full relative text-sm text-neutral-800 dark:text-neutral-200 bg-white dark:bg-neutral-750 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 px-3.5 py-2 rounded-lg border border-black/5 shadow-input shadow-black/5 dark:shadow-black/10 !outline-none" />
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
2023-12-20 14:57:51 +00:00
|
|
|
|
2024-01-22 08:50:28 +07:00
|
|
|
<label class="flex flex-col gap-2">
|
|
|
|
|
<span
|
|
|
|
|
class="text-sm font-medium text-neutral-800 dark:text-neutral-200">
|
|
|
|
|
Password confirmation
|
|
|
|
|
</span>
|
|
|
|
|
<div
|
|
|
|
|
class="relative before:pointer-events-none focus-within:before:opacity-100 before:opacity-0 before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-blue-500 before:ring-2 before:ring-blue-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight dark:after:shadow-white/5 dark:focus-within:after:shadow-blue-500/20 after:transition">
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
name="confirm_password"
|
|
|
|
|
required
|
|
|
|
|
class="w-full relative text-sm text-neutral-800 dark:text-neutral-200 bg-white dark:bg-neutral-750 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 px-3.5 py-2 rounded-lg border border-black/5 shadow-input shadow-black/5 dark:shadow-black/10 !outline-none" />
|
|
|
|
|
</div>
|
|
|
|
|
</label>
|
2023-12-01 11:18:39 +00:00
|
|
|
|
2024-01-22 08:50:28 +07:00
|
|
|
<input type="hidden" name="domain" value="{{domain}}" />
|
|
|
|
|
<input type="hidden" name="callbackUrl" value="{{callbackUrl}}" />
|
2023-12-01 11:18:39 +00:00
|
|
|
|
2024-01-22 08:50:28 +07:00
|
|
|
<button
|
|
|
|
|
type="submit"
|
2024-01-23 13:20:37 +07:00
|
|
|
class="px-6 h-9 bg-neutral-900 dark:bg-neutral-100 hover:bg-neutral-800 dark:hover:bg-neutral-200 dark:text-neutral-950 rounded-lg justify-center items-center gap-2 inline-flex text-white text-sm font-semibold">
|
2024-01-22 08:50:28 +07:00
|
|
|
Sign Up
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
2023-12-20 10:21:24 +00:00
|
|
|
</div>
|
2024-01-22 08:50:28 +07:00
|
|
|
</body>
|
2024-02-18 00:10:03 +00:00
|
|
|
</html>
|
