hackmhs/tutorial.html at master · ken-myers/hackmhs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<html lang="en">
  <head>
    <title>Tutorial</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
  </head>
  <body>

    <div class="container">
        <div class="row pt-4">
            <h1>Welcome to Psonic!</h1>
            <p>Everyone knows that you should keep a secure password for every online (or offline) account you have. Unfortunately, that's much easier said than done because secure passwords are difficult to remember. With Psonic, this is no longer the case! Psonic is a password generator capable of generating and storing highly secure passwords, but also ships with a mnemonic generation algorithm. Using this technology, we're able to convert jumbled messes of passwords into easy to remember, grammatically and syntactically correct sentences.
            </p>
            <!-- TODO: add check password field -->
            <form>
                <p>We store all your passwords in an AES encrypted file, so you're going to need a key to access them. Don't forget this password, as it's the only one Psonic can't help you remember, and it's required to access all your other passwords.</p>
                <div class="form-group">
                  <input autofocus type="password" class="form-control" id="masterpass" placeholder="Enter Master Password">
                  <small class="form-text text-muted">Make sure you can remember it!</small>
                </div>
                <p>To randomly generate your passwords, we need a source of truly random information. Type in some random characters here. Really, you can even just keyboard mash.
                </p>
                <div class="form-group">
                  <input type="text" class="form-control" id="seed" placeholder="Enter Random Seed">
                  <small class="form-text text-muted">Something like this: jdio^&^#2h(Hjf093NU872wd887eyH</small>
                </div>
                <button type="submit" class="btn btn-primary mb-4">Submit</button>
              </form>
        </div>
    </div>

    <script>
        const electron = require('electron');
        const {ipcRenderer} = electron;

        const form = document.querySelector('form');
        form.addEventListener('submit', submitForm);

        function submitForm(e){
            e.preventDefault();
            const masterpass = document.querySelector('#masterpass').value;
            const seed = document.querySelector('#seed').value;
            ipcRenderer.send('masterpass:set', masterpass, seed);
        }
    </script>

    <!-- Optional JavaScript -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>