fix login input field to work with password managers #15

merged

opened by

sapphic.moe 1 month ago targeting main from [deleted fork]: main

changed the id property from handle to username and added autocomplete="username" so password managers like 1password can play nicely

options

unified split

Changed files

+6 -3

src

components

+6 -3

src/components/login.tsx

···

       62
        
       

     

       63
        
         return (

     

       64
        
           <form class="flex flex-col gap-y-2 px-1" onsubmit={(e) => e.preventDefault()}>

     

       65
       -
             <label for="handle" class="hidden">

     

       66
        
               Add account

     

       67
        
             </label>

     

       68
        
             <div class="dark:bg-dark-100 dark:shadow-dark-700 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-600 dark:focus-within:outline-neutral-400">

     

       69
        
               <label

     

       70
       -
                 for="handle"

     

       71
        
                 class="iconify lucide--user-round-plus shrink-0 text-neutral-500 dark:text-neutral-400"

     

       72
        
               ></label>

     

       73
        
               <input

     

       74
        
                 type="text"

     

       75
        
                 spellcheck={false}

     

       76
        
                 placeholder="user.bsky.social"

     

       77
       -
                 id="handle"

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       78
        
                 class="grow py-1 select-none placeholder:text-sm focus:outline-none"

     

       79
        
                 onInput={(e) => setLoginInput(e.currentTarget.value)}

     

       80
        
               />

···

       62
        
       

     

       63
        
         return (

     

       64
        
           <form class="flex flex-col gap-y-2 px-1" onsubmit={(e) => e.preventDefault()}>

     

       65
       +
             <label for="username" class="hidden">

     

       66
        
               Add account

     

       67
        
             </label>

     

       68
        
             <div class="dark:bg-dark-100 dark:shadow-dark-700 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 shadow-xs focus-within:outline-[1px] focus-within:outline-neutral-600 dark:border-neutral-600 dark:focus-within:outline-neutral-400">

     

       69
        
               <label

     

       70
       +
                 for="username"

     

       71
        
                 class="iconify lucide--user-round-plus shrink-0 text-neutral-500 dark:text-neutral-400"

     

       72
        
               ></label>

     

       73
        
               <input

     

       74
        
                 type="text"

     

       75
        
                 spellcheck={false}

     

       76
        
                 placeholder="user.bsky.social"

     

       77
       +
                 id="username"

     

       78
       +
                 name="username"

     

       79
       +
                 autocomplete="username"

     

       80
       +
                 aria-label="Your AT Protocol handle"

     

       81
        
                 class="grow py-1 select-none placeholder:text-sm focus:outline-none"

     

       82
        
                 onInput={(e) => setLoginInput(e.currentTarget.value)}

     

       83
        
               />