135 lines
3.9 KiB
HTML
135 lines
3.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
|
<title>Password Generator</title>
|
||
|
|
<link rel="stylesheet" href="assets/css/bulma-0.9.4.min.css">
|
||
|
|
<style>
|
||
|
|
[v-cloak] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
body > footer {
|
||
|
|
position: sticky;
|
||
|
|
top: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media screen and (min-width: 1068px) {
|
||
|
|
.container {
|
||
|
|
max-width: 600px;
|
||
|
|
width: 600px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.notification {
|
||
|
|
opacity: 0;
|
||
|
|
animation: fadeInOut 5s linear forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeInOut {
|
||
|
|
0% { opacity: 0; }
|
||
|
|
15% { opacity: 1; }
|
||
|
|
85% { opacity: 1; }
|
||
|
|
100% { opacity: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.footer {
|
||
|
|
padding: 2rem;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<script defer src="assets/js/array-flat-polyfill-1.0.1.min.js"></script>
|
||
|
|
<script defer src="assets/js/vue-3.3.2.global.prod.js"></script>
|
||
|
|
<script defer src="assets/js/clipboard-2.0.6.min.js"></script>
|
||
|
|
<script defer src="app.js?v=1.3"></script>
|
||
|
|
|
||
|
|
<section id="app" class="section" v-cloak>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<h1 class="title">Password Generator</h1>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<label class="label is-uppercase">Password Length</label>
|
||
|
|
<div class="control">
|
||
|
|
<input class="input" type="text" v-model="passwordLength" placeholder="The desired password length">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<label class="label is-uppercase">Character Sets</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field is-horizontal">
|
||
|
|
<label class="checkbox mr-5" v-for="charSet in charSets" :key="charSet.name" :title="charSet.value">
|
||
|
|
<input type="checkbox" v-model="selectedCharSets" :value="charSet">
|
||
|
|
{{ charSet.name }}
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<label class="label is-uppercase">Extra Characters</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<div class="control is-expanded">
|
||
|
|
<input class="input is-family-monospace" type="text" placeholder="Any additional characters to use" v-model="extraCharacters">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field is-clearfix">
|
||
|
|
<div class="control is-pulled-right">
|
||
|
|
<button class="button is-info is-light is-small" @click="initializeCharacterSelection()">Reset</button>
|
||
|
|
<button class="button is-warning is-light is-small" @click="clearCharacterSelection()">Clear</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field">
|
||
|
|
<div class="control">
|
||
|
|
<button @click="generatePassword" class="button is-link is-medium is-fullwidth" v-bind:disabled="characters.length === 0">Generate</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="field has-addons">
|
||
|
|
<div class="control is-expanded">
|
||
|
|
<input v-model="password" id="generated-password" class="input is-large has-text-centered is-family-monospace" type="text" readonly>
|
||
|
|
</div>
|
||
|
|
<div class="control">
|
||
|
|
<a class="button is-large is-light" id="clipboard-button" data-clipboard-target="#generated-password" title="Copy to clipboard">
|
||
|
|
<img src="assets/img/clippy.svg" height="36" width="36">
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="notification fade is-success is-light has-text-centered" v-bind:class="{ 'is-hidden': !isToastVisible }">
|
||
|
|
The password has been copied to your clipboard.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p v-show="entropy && password" class="has-text-grey is-size-7">
|
||
|
|
{{ entropy }} bits of entropy
|
||
|
|
</p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<footer class="footer">
|
||
|
|
<div class="container">
|
||
|
|
<div class="content has-text-centered">
|
||
|
|
<p>
|
||
|
|
Built by <a href="https://dan.hersam.com">Dan Hersam</a> | <a href="https://github.com/jaden/passgen">Source on GitHub</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|