chore(org): Tweaks to account pages

sites/org/components/account/apikeys.mjs

@@ -309,7 +309,7 @@ export const Apikeys = ({ app }) => {
                   href="https://freesewing.dev/reference/backend/api/apikeys"
                   txt="the API keys reference documentation"
                 />{' '}
-                on <WebLink href="https://freesewing.dev/" txt="FreeSewing.dev" /> our site for
+                on <WebLink href="https://freesewing.dev/" txt="FreeSewing.dev" />, our site for
                 developers and contributors.
               </p>
             </Popout>

sites/org/components/account/github.mjs

@@ -7,7 +7,7 @@ import { useToast } from 'site/hooks/useToast.mjs'
 import { BackToAccountButton } from './shared.mjs'
 import { SaveSettingsButton } from 'site/components/buttons/save-settings-button.mjs'
 
-export const ns = ['account']
+export const ns = ['account', 'toast']
 
 export const GithubSettings = ({ app, title = false, welcome = false }) => {
   const backend = useBackend(app)

sites/org/components/account/password.mjs

@@ -17,6 +17,7 @@ export const PasswordSettings = ({ app, title = false, welcome = false }) => {
   const { t } = useTranslation(ns)
   const toast = useToast()
   const [password, setPassword] = useState('')
+  const [reveal, setReveal] = useState(false)
 
   const save = async () => {
     app.startLoading()
@@ -29,18 +30,26 @@ export const PasswordSettings = ({ app, title = false, welcome = false }) => {
   return (
     <>
       {title ? <h2 className="text-4xl">{t('passwordTitle')}</h2> : null}
-      <div className="flex flex-row items-center mt-4">
+      <div className="flex flex-row items-center mt-4 gap-2">
         <input
           value={password}
           onChange={(evt) => setPassword(evt.target.value)}
           className="input w-full input-bordered flex flex-row"
-          type="text"
+          type={reveal ? 'text' : 'password'}
           placeholder={t('newPasswordPlaceholder')}
         />
+        <button
+          className="btn hover:bg-opacity-10 border-0 btn-outline"
+          onClick={() => setReveal(!reveal)}
+        >
+          <span role="img" className="text-3xl">
+            {reveal ? '👀' : '🙈'}
+          </span>
+        </button>
       </div>
       <SaveSettingsButton app={app} btnProps={{ onClick: save, disabled: password.length < 4 }} />
       {!welcome && <BackToAccountButton loading={app.loading} />}
-      {!app.account.mfa && (
+      {!app.account.mfaEnabled && (
         <Popout tip>
           <h5>{t('mfaTipTitle')}</h5>
           <p>{t('mfaTipMsg')}</p>

sites/org/components/account/shared.mjs

@@ -27,7 +27,7 @@ const btnClasses = {
     'border border-secondary hover:border hover:border-secondary',
 }
 const spanClasses =
-  'p-4 w-8 h-8 shrink-0 rounded-full text-center p-0 py-2 bg-secondary text-secondary-content'
+  'p-2 w-8 h-8 shrink-0 rounded-full text-center p-0 py-2 bg-secondary text-secondary-content'
 
 export const BackToAccountButton = ({ loading = false }) => {
   const { t } = useTranslation(['account'])

sites/org/pages/account/consent.mjs

@@ -30,7 +30,7 @@ const AccountPage = (props) => {
   const app = useApp(props)
   const { t } = useTranslation(namespaces)
   const crumbs = [
-    [t('yourAccount'), '/account'],
+    [t('account:yourAccount'), '/account'],
     [t('consent'), '/account/consent'],
   ]