From 3c31901c2a028b961e92428e5bd06c4cc2bc4cc7 Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Sun, 26 Feb 2023 14:19:43 +0100
Subject: [PATCH] chore(org): Tweaks to account pages

---
 sites/org/components/account/apikeys.mjs  |  2 +-
 sites/org/components/account/github.mjs   |  2 +-
 sites/org/components/account/password.mjs | 15 ++++++++++++---
 sites/org/components/account/shared.mjs   |  2 +-
 sites/org/pages/account/consent.mjs       |  2 +-
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/sites/org/components/account/apikeys.mjs b/sites/org/components/account/apikeys.mjs
index 2b394302f20..bf7f458b2d3 100644
--- a/sites/org/components/account/apikeys.mjs
+++ b/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>
diff --git a/sites/org/components/account/github.mjs b/sites/org/components/account/github.mjs
index aa072906f21..2f16e88c5ec 100644
--- a/sites/org/components/account/github.mjs
+++ b/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)
diff --git a/sites/org/components/account/password.mjs b/sites/org/components/account/password.mjs
index 1ebb151c3e8..fb86277bba7 100644
--- a/sites/org/components/account/password.mjs
+++ b/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>
diff --git a/sites/org/components/account/shared.mjs b/sites/org/components/account/shared.mjs
index b8923df7040..4f79baff7c4 100644
--- a/sites/org/components/account/shared.mjs
+++ b/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'])
diff --git a/sites/org/pages/account/consent.mjs b/sites/org/pages/account/consent.mjs
index 151601bb3a2..89ce6eceeab 100644
--- a/sites/org/pages/account/consent.mjs
+++ b/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'],
   ]