Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 13 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save janwillemtulp/8968bb6cc207b329913eee893a35bc66 to your computer and use it in GitHub Desktop.
Save janwillemtulp/8968bb6cc207b329913eee893a35bc66 to your computer and use it in GitHub Desktop.
Svelte simple static page password protection
<script>
let password = ''
const hash = s =>
s.split('').reduce((a, b) => {
a = (a << 5) - a + b.charCodeAt(0)
return a & a
}, 0)
$: console.log(password, hash(password))
</script>
<style>
div {
font-family: sans-serif;
font-size: 12px;
margin-left: 50%;
width: 400px;
margin-top: 100px;
}
label {
font-weight: bold;
}
input[type='password'] {
width: 200px;
}
</style>
{#if hash(password) === -791498901}
<slot />
{:else}
<div>
<label for="password">Password:</label>
<input id="password" bind:value={password} type="password" />
</div>
{/if}
@joeqj
Copy link

joeqj commented Jul 29, 2022

This is genius thank you. Chrome now displays warnings in the console for accessibility issues so have had to update the html to silence these:

<form>
  <input hidden type="text" autocomplete="username" value="">
  <label for="password">Password:</label>
  <input id="password" bind:value={password} type="password" autocomplete="current-password" />
</form>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment