commit a9240e8efd49b38c6f355d4457ac32b5f4d0daeb · nekomimi.pet/microcosm-rs

+1 -1

who-am-i/src/server.rs

···

       164
       164
        
               );

     

       165
       165
        
       

     

       166
       166
        
               RenderHtml(

     

       167
       167
       -
                   "prompt-known",

     

       167
       167
       +
                   "prompt",

     

       168
       168
        
                   engine,

     

       169
       169
        
                   json!({

     

       170
       170
        
                       "did": did,

+1 -1

who-am-i/static/style.css

···

       157
       157
        
         margin: 0 0 1rem;

     

       158
       158
        
       }

     

       159
       159
        
       

     

       160
       160
       -
       input#handle {

     

       160
       160
       +
       input.handle {

     

       161
       161
        
         border: none;

     

       162
       162
        
         border-bottom: 1px dashed #aaa;

     

       163
       163
        
         background: transparent;

-167

who-am-i/templates/prompt-base.hbs

···

       1
       1
       -
       <!doctype html>

     

       2
       2
       -
       

     

       3
       3
       -
       <style>

     

       4
       4
       -
       body {

     

       5
       5
       -
         color: #434;

     

       6
       6
       -
         font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;

     

       7
       7
       -
         margin: 0;

     

       8
       8
       -
         min-height: 100vh;

     

       9
       9
       -
         padding: 0;

     

       10
       10
       -
       }

     

       11
       11
       -
       .wrap {

     

       12
       12
       -
         border: 2px solid #221828;

     

       13
       13
       -
         border-radius: 0.5rem;

     

       14
       14
       -
         box-sizing: border-box;

     

       15
       15
       -
         overflow: hidden;

     

       16
       16
       -
         display: flex;

     

       17
       17
       -
         flex-direction: column;

     

       18
       18
       -
         height: 100vh;

     

       19
       19
       -
       }

     

       20
       20
       -
       header {

     

       21
       21
       -
         background: #221828;

     

       22
       22
       -
         display: flex;

     

       23
       23
       -
         justify-content: space-between;

     

       24
       24
       -
         padding: 0 0.25rem;

     

       25
       25
       -
         color: #c9b;

     

       26
       26
       -
         display: flex;

     

       27
       27
       -
         gap: 0.5rem;

     

       28
       28
       -
         align-items: baseline;

     

       29
       29
       -
       }

     

       30
       30
       -
       header > * {

     

       31
       31
       -
         flex-basis: 33%;

     

       32
       32
       -
       }

     

       33
       33
       -
       header > .empty {

     

       34
       34
       -
         font-size: 0.8rem;

     

       35
       35
       -
         opacity: 0.5;

     

       36
       36
       -
       }

     

       37
       37
       -
       header > .title {

     

       38
       38
       -
         text-align: center;

     

       39
       39
       -
       }

     

       40
       40
       -
       header > a.micro {

     

       41
       41
       -
         text-decoration: none;

     

       42
       42
       -
         font-size: 0.8rem;

     

       43
       43
       -
         text-align: right;

     

       44
       44
       -
         opacity: 0.5;

     

       45
       45
       -
       }

     

       46
       46
       -
       header > a.micro:hover {

     

       47
       47
       -
         opacity: 1;

     

       48
       48
       -
       }

     

       49
       49
       -
       main {

     

       50
       50
       -
         background: #ccc;

     

       51
       51
       -
         display: flex;

     

       52
       52
       -
         flex-direction: column;

     

       53
       53
       -
         flex-grow: 1;

     

       54
       54
       -
         padding: 0.25rem 0.5rem;

     

       55
       55
       -
       }

     

       56
       56
       -
       p {

     

       57
       57
       -
         margin: 1rem 0 0;

     

       58
       58
       -
         text-align: center;

     

       59
       59
       -
       }

     

       60
       60
       -
       p.detail {

     

       61
       61
       -
         font-size: 0.8rem;

     

       62
       62
       -
       }

     

       63
       63
       -
       .parent-host {

     

       64
       64
       -
         font-weight: bold;

     

       65
       65
       -
         color: #48c;

     

       66
       66
       -
         display: inline-block;

     

       67
       67
       -
         padding: 0 0.125rem;

     

       68
       68
       -
         border-radius: 0.25rem;

     

       69
       69
       -
         border: 1px solid #aaa;

     

       70
       70
       -
         font-size: 0.8rem;

     

       71
       71
       -
       }

     

       72
       72
       -
       

     

       73
       73
       -
       #loader {

     

       74
       74
       -
         display: flex;

     

       75
       75
       -
         flex-grow: 1;

     

       76
       76
       -
         justify-content: center;

     

       77
       77
       -
         align-items: center;

     

       78
       78
       -
       }

     

       79
       79
       -
       .spinner {

     

       80
       80
       -
         animation: rotation 1.618s ease-in-out infinite;

     

       81
       81
       -
         border-radius: 50%;

     

       82
       82
       -
         border: 3px dashed #434;

     

       83
       83
       -
         box-sizing: border-box;

     

       84
       84
       -
         display: inline-block;

     

       85
       85
       -
         height: 1.5em;

     

       86
       86
       -
         width: 1.5em;

     

       87
       87
       -
       }

     

       88
       88
       -
       @keyframes rotation {

     

       89
       89
       -
         0% { transform: rotate(0deg) }

     

       90
       90
       -
         100% { transform: rotate(360deg) }

     

       91
       91
       -
       }

     

       92
       92
       -
       

     

       93
       93
       -
       #user-info {

     

       94
       94
       -
         flex-grow: 1;

     

       95
       95
       -
         display: flex;

     

       96
       96
       -
         flex-direction: column;

     

       97
       97
       -
         justify-content: center;

     

       98
       98
       -
       }

     

       99
       99
       -
       #action {

     

       100
       100
       -
         background: #eee;

     

       101
       101
       -
         display: flex;

     

       102
       102
       -
         justify-content: space-between;

     

       103
       103
       -
         padding: 0.5rem 0.25rem 0.5rem 0.5rem;

     

       104
       104
       -
         font-size: 0.8rem;

     

       105
       105
       -
         align-items: baseline;

     

       106
       106
       -
         border-radius: 0.5rem;

     

       107
       107
       -
         border: 1px solid #bbb;

     

       108
       108
       -
         cursor: pointer;

     

       109
       109
       -
       }

     

       110
       110
       -
       #action:hover {

     

       111
       111
       -
         background: #fff;

     

       112
       112
       -
       }

     

       113
       113
       -
       #allow {

     

       114
       114
       -
         background: transparent;

     

       115
       115
       -
         border: none;

     

       116
       116
       -
         border-left: 1px solid #bbb;

     

       117
       117
       -
         padding: 0 0.5rem;

     

       118
       118
       -
         color: #375;

     

       119
       119
       -
         font: inherit;

     

       120
       120
       -
         cursor: pointer;

     

       121
       121
       -
       }

     

       122
       122
       -
       #action:hover #allow {

     

       123
       123
       -
         color: #285;

     

       124
       124
       -
       }

     

       125
       125
       -
       

     

       126
       126
       -
       #or {

     

       127
       127
       -
         font-size: 0.8rem;

     

       128
       128
       -
         text-align: center;

     

       129
       129
       -
       }

     

       130
       130
       -
       #or p {

     

       131
       131
       -
         margin: 0 0 1rem;

     

       132
       132
       -
       }

     

       133
       133
       -
       

     

       134
       134
       -
       input#handle {

     

       135
       135
       -
         border: none;

     

       136
       136
       -
         border-bottom: 1px dashed #aaa;

     

       137
       137
       -
         background: transparent;

     

       138
       138
       -
       }

     

       139
       139
       -
       

     

       140
       140
       -
       .hidden {

     

       141
       141
       -
         display: none !important;

     

       142
       142
       -
       }

     

       143
       143
       -
       

     

       144
       144
       -
       </style>

     

       145
       145
       -
       

     

       146
       146
       -
       <div class="wrap">

     

       147
       147
       -
         <header>

     

       148
       148
       -
           <div class="empty">🔒</div>

     

       149
       149
       -
           <code class="title" style="font-family: monospace;"

     

       150
       150
       -
             >who-am-i</code>

     

       151
       151
       -
           <a href="https://microcosm.blue" target="_blank" class="micro"

     

       152
       152
       -
             ><span style="color: #f396a9">m</span

     

       153
       153
       -
             ><span style="color: #f49c5c">i</span

     

       154
       154
       -
             ><span style="color: #c7b04c">c</span

     

       155
       155
       -
             ><span style="color: #92be4c">r</span

     

       156
       156
       -
             ><span style="color: #4ec688">o</span

     

       157
       157
       -
             ><span style="color: #51c2b6">c</span

     

       158
       158
       -
             ><span style="color: #54bed7">o</span

     

       159
       159
       -
             ><span style="color: #8fb1f1">s</span

     

       160
       160
       -
             ><span style="color: #ce9df1">m</span

     

       161
       161
       -
           ></a>

     

       162
       162
       -
         </header>

     

       163
       163
       -
       

     

       164
       164
       -
         <main>

     

       165
       165
       -
           {{> main}}

     

       166
       166
       -
         </main>

     

       167
       167
       -
       </div>

-59

who-am-i/templates/prompt-known.hbs

···

       1
       1
       -
       {{#*inline "main"}}

     

       2
       2
       -
       <p>

     

       3
       3
       -
         Share your identity with

     

       4
       4
       -
         <span class="parent-host">{{ parent_host }}</span>?

     

       5
       5
       -
       </p>

     

       6
       6
       -
       <div id="loader">

     

       7
       7
       -
         <span class="spinner"></span>

     

       8
       8
       -
       </div>

     

       9
       9
       -
       <div id="user-info" class="hidden">

     

       10
       10
       -
         <div id="action">

     

       11
       11
       -
           <span id="handle"></span>

     

       12
       12
       -
           <button id="allow">Allow</button>

     

       13
       13
       -
         </div>

     

       14
       14
       -
       </div>

     

       15
       15
       -
       <div id="or">

     

       16
       16
       -
         <p>or, <a id="switch" href="#">use another account</a></p>

     

       17
       17
       -
       </div>

     

       18
       18
       -
       

     

       19
       19
       -
       <script>

     

       20
       20
       -
       var loaderEl = document.getElementById('loader');

     

       21
       21
       -
       var infoEl = document.getElementById('user-info');

     

       22
       22
       -
       var actionEl = document.getElementById('action');

     

       23
       23
       -
       var handleEl = document.getElementById('handle');

     

       24
       24
       -
       var allowEl = document.getElementById('allow');

     

       25
       25
       -
       var switchEl = document.getElementById('switch');

     

       26
       26
       -
       

     

       27
       27
       -
       switchEl.addEventListener('click', e => {

     

       28
       28
       -
         e.preventDefault();

     

       29
       29
       -
         console.log('switch plz');

     

       30
       30
       -
       });

     

       31
       31
       -
       

     

       32
       32
       -
       var DID = {{{json did}}};

     

       33
       33
       -
       let user_info = new URL('/user-info', window.location);

     

       34
       34
       -
       user_info.searchParams.set('fetch-key', {{{json fetch_key}}});

     

       35
       35
       -
       fetch(user_info)

     

       36
       36
       -
         .then(resp => {

     

       37
       37
       -
           if (!resp.ok) throw new Error('request failed');

     

       38
       38
       -
           return resp.json();

     

       39
       39
       -
         })

     

       40
       40
       -
         .then(

     

       41
       41
       -
           ({ handle }) => {

     

       42
       42
       -
             loaderEl.remove();

     

       43
       43
       -
             handleEl.textContent = `@${handle}`;

     

       44
       44
       -
             infoEl.classList.remove('hidden');

     

       45
       45
       -
             actionEl.addEventListener('click', () => share(handle));

     

       46
       46
       -
           },

     

       47
       47
       -
           err => {

     

       48
       48
       -
             infoEl.textContent = 'ohno';

     

       49
       49
       -
             console.error(err);

     

       50
       50
       -
           },

     

       51
       51
       -
         );

     

       52
       52
       -
       

     

       53
       53
       -
       function share(handle) {

     

       54
       54
       -
         top.postMessage({ source: 'whoami', handle }, '*'); // TODO: pass the referrer back from server

     

       55
       55
       -
       }

     

       56
       56
       -
       </script>

     

       57
       57
       -
       {{/inline}}

     

       58
       58
       -
       

     

       59
       59
       -
       {{#> prompt-base}}{{/prompt-base}}

+23 -10

who-am-i/templates/prompt.hbs

···

       16
       16
        
       <div id="user-info">

     

       17
       17
        
         <form id="form-action" action="/auth" method="GET" target="_blank" class="action {{#if did}}hidden{{/if}}">

     

       18
       18
        
           <label>

     

       19
       19
       -
             @<input id="handle" name="handle" placeholder="example.bsky.social" />

     

       19
       19
       +
             @<input id="handle-input" class="handle" name="handle" placeholder="example.bsky.social" />

     

       20
       20
        
           </label>

     

       21
       21
        
           <button id="connect" type="submit">connect</button>

     

       22
       22
        
         </form>

     

       23
       23
        
       

     

       24
       24
        
         <div id="handle-action" class="action">

     

       25
       25
       -
           <span id="handle"></span>

     

       25
       25
       +
           <span id="handle-view" class="handle"></span>

     

       26
       26
        
           <button id="allow">Allow</button>

     

       27
       27
        
         </div>

     

       28
       28
        
       </div>

     
···

       34
       34
        
       const promptEl = document.getElementById('prompt');

     

       35
       35
        
       const loaderEl = document.getElementById('loader');

     

       36
       36
        
       const infoEl = document.getElementById('user-info');

     

       37
       37
       -
       const handleEl = document.getElementById('handle');

     

       37
       37
       +
       const handleInputEl = document.getElementById('handle-input');

     

       38
       38
       +
       const handleViewEl = document.getElementById('handle-view');

     

       38
       39
        
       const formEl = document.getElementById('form-action'); // for anon

     

       39
       39
       -
       const allowEl = document.getElementById('allow'); // for known-did

     

       40
       40
       +
       const allowEl = document.getElementById('handle-action'); // for known-did

     

       40
       41
        
       const connectEl = document.getElementById('connect'); // for anon

     

       41
       42
        
       

     

       42
       43
        
       function err(e, msg) {

     
···

       46
       47
        
         throw new Error(e);

     

       47
       48
        
       }

     

       48
       49
        
       

     

       49
       49
       -
       formEl && (formEl.onsubmit = e => {

     

       50
       50
       +
       // already-known user

     

       51
       51
       +
       ({{{json did}}}) && (async () => {

     

       52
       52
       +
       

     

       53
       53
       +
         const handle = await lookUp({{{json fetch_key}}});

     

       54
       54
       +
         console.log('got handle', handle);

     

       55
       55
       +
       

     

       56
       56
       +
         loaderEl.classList.add('hidden');

     

       57
       57
       +
         handleViewEl.textContent = `@${handle}`;

     

       58
       58
       +
         allowEl.addEventListener('click', () => shareAllow(handle));

     

       59
       59
       +
       })();

     

       60
       60
       +
       

     

       61
       61
       +
       // anon user

     

       62
       62
       +
       formEl.onsubmit = e => {

     

       50
       63
        
         e.preventDefault();

     

       51
       64
        
         loaderEl.classList.remove('hidden');

     

       52
       65
        
         // TODO: include expected referer! (..this system is probably bad)

     

       53
       66
        
         // maybe a random localstorage key that we specifically listen for?

     

       54
       67
        
         const url = new URL('/auth', window.location);

     

       55
       55
       -
         url.searchParams.set('handle', handleEl.value);

     

       68
       68
       +
         url.searchParams.set('handle', handleInputEl.value);

     

       56
       69
        
         window.open(url, '_blank');

     

       57
       57
       -
       });

     

       70
       70
       +
       };

     

       58
       71
        
       

     

       59
       72
        
       window.addEventListener('storage', async e => {

     

       60
       73
        
         // here's a fun minor vuln: we can't tell which flow triggers the storage event.

     
···

       64
       77
        
         const fail = (e, msg) => {

     

       65
       78
        
           loaderEl.classList.add('hidden');

     

       66
       79
        
           formEl.classList.remove('hidden');

     

       67
       67
       -
           handleEl.focus();

     

       68
       68
       -
           handleEl.select();

     

       80
       80
       +
           handleInputEl.focus();

     

       81
       81
       +
           handleInputEl.select();

     

       69
       82
        
           err(e, msg);

     

       70
       83
        
         }

     

       71
       84
        
       

     
···

       98
       111
        
         shareAllow(handle);

     

       99
       112
        
       });

     

       100
       113
        
       

     

       101
       101
       -
       const lookUp = async fetch_key => {

     

       114
       114
       +
       async function lookUp(fetch_key) {

     

       102
       115
        
         const user_info = new URL('/user-info', window.location);

     

       103
       116
        
         user_info.searchParams.set('fetch-key', fetch_key);

     

       104
       117
        
         let info;