commit 8de64e040a18356c44bd7b59390d485d3f158ae6 · cduck.me/statusphere-example-app-fork

+17 -52

src/pages/home.ts

···

       65
       65
        
                       <button type="submit">Log out</button>

     

       66
       66
        
                     </div>

     

       67
       67
        
                   </form>`

     

       68
       68
       -
                 : html`<p><a href="/login">Log in</a> to set your status!</p>`}

     

       68
       68
       +
                 : html`<div class="session-form">

     

       69
       69
       +
                     <div><a href="/login">Log in</a> to set your status!</div>

     

       70
       70
       +
                     <div>

     

       71
       71
       +
                       <a href="/login" class="button">Log in</a>

     

       72
       72
       +
                     </div>

     

       73
       73
       +
                   </div>`}

     

       69
       74
        
             </div>

     

       70
       70
       -
             <div class="">

     

       71
       71
       -
               <div class="status-options">

     

       72
       72
       -
                 ${STATUS_OPTIONS.map(

     

       73
       73
       -
                   (status) =>

     

       74
       74
       -
                     html`<div class="status-option" data-value="${status}">

     

       75
       75
       -
                       ${status}

     

       76
       76
       -
                     </div>`

     

       77
       77
       -
                 )}

     

       78
       78
       -
               </div>

     

       79
       79
       -
             </div>

     

       80
       80
       -
             <div class="status-line no-line">

     

       81
       81
       -
               <div class="status">👍</div>

     

       82
       82
       -
               <div class="desc">

     

       83
       83
       -
                 <a class="author" href="/">@pfrazee.com</a>

     

       84
       84
       -
                 is feeling 👍 on Aug 12, 2024

     

       85
       85
       -
               </div>

     

       86
       86
       -
             </div>

     

       87
       87
       -
             <div class="status-line">

     

       88
       88
       -
               <div class="status">👍</div>

     

       89
       89
       -
               <div class="desc">

     

       90
       90
       -
                 <a class="author" href="/">@pfrazee.com</a>

     

       91
       91
       -
                 is feeling 👍 on Aug 12, 2024

     

       92
       92
       -
               </div>

     

       93
       93
       -
             </div>

     

       94
       94
       -
             <div class="status-line">

     

       95
       95
       -
               <div class="status">👍</div>

     

       96
       96
       -
               <div class="desc">

     

       97
       97
       -
                 <a class="author" href="/">@pfrazee.com</a>

     

       98
       98
       -
                 is feeling 👍 on Aug 12, 2024

     

       99
       99
       -
               </div>

     

       100
       100
       -
             </div>

     

       101
       101
       -
             <div class="status-line">

     

       102
       102
       -
               <div class="status">👍</div>

     

       103
       103
       -
               <div class="desc">

     

       104
       104
       -
                 <a class="author" href="/">@pfrazee.com</a>

     

       105
       105
       -
                 is feeling 👍 on Aug 12, 2024

     

       106
       106
       -
               </div>

     

       107
       107
       -
             </div>

     

       108
       108
       -
             <div class="status-line">

     

       109
       109
       -
               <div class="status">👍</div>

     

       110
       110
       -
               <div class="desc">

     

       111
       111
       -
                 <a class="author" href="/">@pfrazee.com</a>

     

       112
       112
       -
                 is feeling 👍 on Aug 12, 2024

     

       113
       113
       -
               </div>

     

       114
       114
       -
             </div>

     

       115
       115
       -
             <div class="status-line">

     

       116
       116
       -
               <div class="status">👍</div>

     

       117
       117
       -
               <div class="desc">

     

       118
       118
       -
                 <a class="author" href="/">@pfrazee.com</a>

     

       119
       119
       -
                 is feeling 👍 on Aug 12, 2024

     

       120
       120
       -
               </div>

     

       75
       75
       +
             <div class="status-options">

     

       76
       76
       +
               ${STATUS_OPTIONS.map(

     

       77
       77
       +
                 (status) =>

     

       78
       78
       +
                   html`<div

     

       79
       79
       +
                     class="status-option"

     

       80
       80
       +
                     data-value="${status}"

     

       81
       81
       +
                     data-authed=${profile ? '1' : '0'}

     

       82
       82
       +
                   >

     

       83
       83
       +
                     ${status}

     

       84
       84
       +
                   </div>`

     

       85
       85
       +
               )}

     

       121
       86
        
             </div>

     

       122
       87
        
             ${statuses.map((status, i) => {

     

       123
       88
        
               const handle = didHandleMap[status.authorDid] || status.authorDid

+16 -5

src/pages/login.ts

···

       12
       12
        
       

     

       13
       13
        
       function content({ error }: Props) {

     

       14
       14
        
         return html`<div id="root">

     

       15
       15
       -
           <form action="/login" method="post">

     

       16
       16
       -
             <input type="text" name="handle" placeholder="handle" required />

     

       17
       17
       -
             <button type="submit">Log in.</button>

     

       18
       18
       -
             ${error ? html`<p>Error: <i>${error}</i></p>` : undefined}

     

       19
       19
       -
           </form>

     

       15
       15
       +
           <div id="header">

     

       16
       16
       +
             <h1>Statusphere</h1>

     

       17
       17
       +
             <p>Set your status on the Atmosphere.</p>

     

       18
       18
       +
           </div>

     

       19
       19
       +
           <div class="container">

     

       20
       20
       +
             <form action="/login" method="post" class="login-form">

     

       21
       21
       +
               <input

     

       22
       22
       +
                 type="text"

     

       23
       23
       +
                 name="handle"

     

       24
       24
       +
                 placeholder="Enter your handle (eg alice.bsky.social)"

     

       25
       25
       +
                 required

     

       26
       26
       +
               />

     

       27
       27
       +
               <button type="submit">Log in</button>

     

       28
       28
       +
               ${error ? html`<p>Error: <i>${error}</i></p>` : undefined}

     

       29
       29
       +
             </form>

     

       30
       30
       +
           </div>

     

       20
       31
        
         </div>`

     

       21
       32
        
       }

src/public/home.js

···

       1
       1
        
       Array.from(document.querySelectorAll('.status-option'), (el) => {

     

       2
       2
        
         el.addEventListener('click', async (ev) => {

     

       3
       3
        
           setError('')

     

       4
       4
       +
       

     

       5
       5
       +
           if (el.dataset.authed !== '1') {

     

       6
       6
       +
             window.location = '/login'

     

       7
       7
       +
             return

     

       8
       8
       +
           }

     

       9
       9
       +
       

     

       4
       10
        
           const res = await fetch('/status', {

     

       5
       11
        
             method: 'POST',

     

       6
       12
        
             headers: { 'content-type': 'application/json' },

+19 -2

src/public/styles.css

···

       43
       43
        
       /*

     

       44
       44
        
         Common components

     

       45
       45
        
       */

     

       46
       46
       -
       button {

     

       46
       46
       +
       button, .button {

     

       47
       47
       +
         display: inline-block;

     

       47
       48
        
         border: 0;

     

       48
       49
        
         background-color: var(--primary-500);

     

       49
       50
        
         border-radius: 50px;

     

       50
       51
        
         color: #fff;

     

       51
       52
        
         padding: 2px 10px;

     

       52
       53
        
         cursor: pointer;

     

       54
       54
       +
         text-decoration: none;

     

       53
       55
        
       }

     

       54
       54
       -
       button:hover {

     

       56
       56
       +
       button:hover, .button:hover {

     

       55
       57
        
         background: var(--primary-400);

     

       56
       58
        
       }

     

       57
       59
        
       

     
···

       106
       108
        
         flex-direction: row;

     

       107
       109
        
         align-items: center;

     

       108
       110
        
         justify-content: space-between;

     

       111
       111
       +
       }

     

       112
       112
       +
       

     

       113
       113
       +
       .login-form {

     

       114
       114
       +
         display: flex;

     

       115
       115
       +
         flex-direction: row;

     

       116
       116
       +
         gap: 6px;

     

       117
       117
       +
         border: 1px solid var(--border-color);

     

       118
       118
       +
         border-radius: 6px;

     

       119
       119
       +
         padding: 10px 16px;

     

       120
       120
       +
         background-color: #fff;

     

       121
       121
       +
       }

     

       122
       122
       +
       

     

       123
       123
       +
       .login-form input {

     

       124
       124
       +
         flex: 1;

     

       125
       125
       +
         border: 0;

     

       109
       126
        
       }

     

       110
       127
        
       

     

       111
       128
        
       .status-options {