1
0
Fork 0
mirror of https://github.com/Luzifer/password.git synced 2024-12-20 12:51:17 +00:00
password/frontend/index.html
Knut Ahlers 032281ba56
Port from coffeescript to plain ES6
- Use Babel to transpile sources
- Use Webpack to include all libraries

Signed-off-by: Knut Ahlers <knut@ahlers.me>
2018-12-30 12:40:19 +01:00

119 lines
4.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Secure Password</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="modal" data-target="#settingsModal">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
</button>
<a class="navbar-brand" href="#">Secure Password</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="https://github.com/Luzifer/password#via-alfred">
Alfred Extension</a></li>
<li><a href="https://github.com/Luzifer/password#via-api">
API Documentation</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<button type="button" class="btn btn-default navbar-btn" data-toggle="modal" data-target="#settingsModal">
<span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Settings
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="jumbotron">
<p class="center">
I will generate a new secure password every 30 seconds. Just click the password to keep the current one.
</p>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Your password
</div>
<div class="panel-body">
<div class="form-group">
<input class="form-control center" id="focusedInput" type="text" value="...">
</div>
</div>
<div class="panel-footer">
<div class="progress">
<div class="progress-bar" style="width: 100%;"></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
FAQ
</div>
<div class="panel-body">
<ul>
<li><strong>Do you store my password?</strong><br>
You decide which one to take and we will not store any of the generated passwords. That way you can be sure only you know which password you chose.
</li>
<li><strong>How secure are these passwords?</strong><br>
All passwords are checked against a set of rules to ensure they does not contain patterns which would make it easy for programs to guess the password.
</li>
<li><strong>Can I read the source code?</strong><br>
Of course you can. It's published on <a href="https://github.com/Luzifer/password">GitHub</a> together with a test suite to ensure the passwords are safe.
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="settingsModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Settings</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="passwordLengthOption" class="control-label">Password length:</label>
<input type="number" class="form-control" value="20" id="passwordLengthOption">
</div>
<div class="form-group">
<label>
<input type="checkbox" id="useSpecialOption"> Use special characters
</label>
</div>
<div class="form-group">
<label>
<input type="checkbox" id="useXKCDOption"> Use <a href="https://xkcd.com/936/" target="_blank">XKCD style passwords</a>
</label>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="optionSave">Save changes</button>
</div>
</div>
</div>
</div>
<script src="assets/bundle.js"></script>
</body>
</html>