@ynotzort/sveltekit-password-protect
Version:
Simple utility to add a layer of protection to your websites, very useful for agencies and freelancers
138 lines (122 loc) • 2.69 kB
JavaScript
export const PAGE_TEMPLATE = `
<html class="%theme%">
<head>
<title>%title%</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
:root {
--foreground: #000;
--background: #f0f0f0;
--card: #fff;
--muted: #666;
--border: #ccc;
--primary: #357DED;
--primary-foreground: #fff;
--error: #E9190F;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background);
color: var(--foreground);
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
}
form {
border: 1px solid var(--border);
padding: 16px;
max-width: 360px;
border-radius: 8px;
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
background-color: var(--card);
}
form * {
margin-bottom: 16px;
}
h1 {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 10px;
}
p {
font-size: 0.8rem;
color: var(--muted);
margin-bottom: 10px;
}
label {
font-size: 0.8rem;
color: var(--muted);
margin-bottom: 10px;
text-transform: uppercase;
}
input {
padding: 10px;
border: 1px solid var(--border);
border-radius: 5px;
width: 100%;
display: block;
margin-top: 4px;
}
button {
padding: 10px;
border: 1px solid var(--border);
background-color: var(--primary);
color: var(--primary-foreground);
border-radius: 5px;
width: 100%;
font-size: 0.8rem;
text-transform: uppercase;
font-weight: 600;
transition: all 0.2s ease-in-out;
}
input:focus {
outline: none;
}
button:hover {
cursor: pointer;
opacity: 0.8;
}
.dark {
--foreground: #fff;
--background: #000;
--card: #111;
--muted: #ccc;
--border: #333;
--primary: #357DED;
--primary-foreground: #fff;
}
.error {
color: var(--error);
margin-bottom: 10px;
font-size: 0.8rem;
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<form action="%path%" method="POST">
<h1>%title%</h1>
<p>%description%</p>
<div class="error">
%error%
</div>
<label for="password">Password</label>
<input type="password" name="password" placeholder="Password" required />
<input type="hidden" name="redirect" value="%redirect%" />
<input type="hidden" name="csrf_token" value="%csrf_token%" />
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
`;