wip(org): Updated account pages

sites/org/pages/account/apikeys.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -29,14 +28,9 @@ const DynamicApikeys = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('apikeys'), '/account/apikeys'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('apikeys')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicApikeys app={app} />
       </DynamicAuthWrapper>

sites/org/pages/account/bio.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicBio = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('bio'), '/account/bio'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('bio')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicBio app={app} title />
       </DynamicAuthWrapper>

sites/org/pages/account/compare.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicCompare = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('compare'), '/account/compare'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('compare')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicCompare app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'compare'],
+      },
     },
   }
 }

sites/org/pages/account/consent.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicConsent = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('account:yourAccount'), '/account'],
-    [t('consent'), '/account/consent'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('account:consent')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicConsent app={app} title />
       </DynamicAuthWrapper>

sites/org/pages/account/control.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,10 +27,9 @@ const DynamicControl = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
 
   return (
-    <PageWrapper app={app} itle={t('control')}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicControl app={app} title />
       </DynamicAuthWrapper>

sites/org/pages/account/email.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicEmail = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('email'), '/account/email'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('email')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicEmail app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'email'],
+      },
     },
   }
 }

sites/org/pages/account/github.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicGithub = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('github'), '/account/github'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('github')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicGithub app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'github'],
+      },
     },
   }
 }

sites/org/pages/account/img.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicImg = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('img'), '/account/img'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('img')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicImg app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'img'],
+      },
     },
   }
 }

sites/org/pages/account/language.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicLanguage = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('language'), '/account/language'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('language')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicLanguage app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'language'],
+      },
     },
   }
 }

sites/org/pages/account/mfa.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicMfa = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('mfa'), '/account/mfa'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('mfa')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicMfa app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'mfa'],
+      },
     },
   }
 }

sites/org/pages/account/newsletter.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicNewsletter = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('newsletter'), '/account/newsletter'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('newsletter')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicNewsletter app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'newsletter'],
+      },
     },
   }
 }

sites/org/pages/account/password.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicPassword = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('password'), '/account/password'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('password')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicPassword app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'password'],
+      },
     },
   }
 }

sites/org/pages/account/reload.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicReload = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('reload'), '/account/reload'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('reload')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicReload app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'reload'],
+      },
     },
   }
 }

sites/org/pages/account/units.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicImperial = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('imperial'), '/account/imperial'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('imperial')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicImperial app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'units'],
+      },
     },
   }
 }

sites/org/pages/account/username.mjs

@@ -1,6 +1,5 @@
 // Hooks
 import { useApp } from 'shared/hooks/use-app.mjs'
-import { useTranslation } from 'next-i18next'
 // Dependencies
 import dynamic from 'next/dynamic'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@@ -28,14 +27,9 @@ const DynamicUsername = dynamic(
 
 const AccountPage = (props) => {
   const app = useApp(props)
-  const { t } = useTranslation(namespaces)
-  const crumbs = [
-    [t('yourAccount'), '/account'],
-    [t('username'), '/account/username'],
-  ]
 
   return (
-    <PageWrapper app={app} title={t('username')} crumbs={crumbs}>
+    <PageWrapper app={app}>
       <DynamicAuthWrapper app={app}>
         <DynamicUsername app={app} title />
       </DynamicAuthWrapper>
@@ -49,6 +43,9 @@ export async function getStaticProps({ locale }) {
   return {
     props: {
       ...(await serverSideTranslations(locale, namespaces)),
+      page: {
+        path: ['account', 'username'],
+      },
     },
   }
 }

sites/shared/components/account/compare.mjs

@@ -37,7 +37,7 @@ export const CompareSettings = ({ app, title = false, welcome = false }) => {
       : '/docs/guide'
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('compareTitle')}</h2> : null}
       {['yes', 'no'].map((val) => (
         <Choice val={val} t={t} update={update} current={selection} bool key={val}>
@@ -75,7 +75,7 @@ export const CompareSettings = ({ app, title = false, welcome = false }) => {
       ) : (
         <BackToAccountButton loading={app.state.loading} />
       )}
-    </>
+    </div>
   )
 }
 

sites/shared/components/account/control.mjs

@@ -33,7 +33,7 @@ export const ControlSettings = ({ app, title = false, welcome = false }) => {
     welcomeSteps[selection].length > 1 ? '/welcome/' + welcomeSteps[selection][1] : '/docs/guide'
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h1 className="text-4xl">{t('controlTitle')}</h1> : null}
       {[1, 2, 3, 4, 5].map((val) => {
         if (selection === 1 && val > 2) return null
@@ -74,6 +74,6 @@ export const ControlSettings = ({ app, title = false, welcome = false }) => {
       ) : (
         <BackToAccountButton loading={app.state.loading} />
       )}
-    </>
+    </div>
   )
 }

sites/shared/components/account/email.mjs

@@ -33,7 +33,7 @@ export const EmailSettings = ({ app, title = false }) => {
   const valid = (validateEmail(email) && validateTld(email)) || false
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('emailTitle')}</h2> : null}
       {changed ? (
         <Popout note>
@@ -60,6 +60,6 @@ export const EmailSettings = ({ app, title = false }) => {
         </>
       )}
       <BackToAccountButton loading={app.state.loading} />
-    </>
+    </div>
   )
 }

sites/shared/components/account/github.mjs

@@ -29,7 +29,7 @@ export const GithubSettings = ({ app, title = false, welcome = false }) => {
   }
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('githubTitle')}</h2> : null}
       <div className="flex flex-row items-center mt-4">
         <input
@@ -42,6 +42,6 @@ export const GithubSettings = ({ app, title = false, welcome = false }) => {
       </div>
       <SaveSettingsButton app={app} btnProps={{ onClick: save }} />
       {!welcome && <BackToAccountButton loading={app.state.loading} />}
-    </>
+    </div>
   )
 }

sites/shared/components/account/img.mjs

@@ -44,7 +44,7 @@ export const ImgSettings = ({ app, title = false, welcome = false }) => {
   const nextHref = '/docs/guide'
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('imgTitle')}</h2> : null}
       <div>
         {!welcome || img !== false ? (
@@ -96,6 +96,6 @@ export const ImgSettings = ({ app, title = false, welcome = false }) => {
           <BackToAccountButton loading={app.state.loading} />
         </>
       )}
-    </>
+    </div>
   )
 }

sites/shared/components/account/imperial.mjs

@@ -37,7 +37,7 @@ export const ImperialSettings = ({ app, title = false, welcome = false }) => {
       : '/docs/guide'
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h1 className="text-4xl">{t('unitsTitle')}</h1> : <h1></h1>}
       {['metric', 'imperial'].map((val) => (
         <Choice
@@ -79,6 +79,6 @@ export const ImperialSettings = ({ app, title = false, welcome = false }) => {
       ) : (
         <BackToAccountButton loading={app.state.loading} />
       )}
-    </>
+    </div>
   )
 }

sites/shared/components/account/language.mjs

@@ -33,7 +33,7 @@ export const LanguageSettings = ({ app, title = false }) => {
   }
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('languageTitle')}</h2> : null}
       {conf.languages.map((val) => (
         <Choice val={val} t={t} update={update} current={language} key={val}>
@@ -41,6 +41,6 @@ export const LanguageSettings = ({ app, title = false }) => {
         </Choice>
       ))}
       <BackToAccountButton loading={app.state.loading} />
-    </>
+    </div>
   )
 }

sites/shared/components/account/mfa.mjs

@@ -80,7 +80,7 @@ export const MfaSettings = ({ app, title = false, welcome = false }) => {
   if (enable) titleText = t('mfaSetup')
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{titleText}</h2> : null}
       {enable ? (
         <>
@@ -146,6 +146,6 @@ export const MfaSettings = ({ app, title = false, welcome = false }) => {
         )}
       </div>
       {!welcome && <BackToAccountButton loading={app.state.loading} />}
-    </>
+    </div>
   )
 }

sites/shared/components/account/newsletter.mjs

@@ -37,7 +37,7 @@ export const NewsletterSettings = ({ app, title = false, welcome = false }) => {
       : '/docs/guide'
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h1 className="text-4xl">{t('newsletterTitle')}</h1> : null}
       {['yes', 'no'].map((val) => (
         <Choice val={val} t={t} update={update} current={selection} bool key={val}>
@@ -75,7 +75,7 @@ export const NewsletterSettings = ({ app, title = false, welcome = false }) => {
       ) : (
         <BackToAccountButton loading={app.state.loading} />
       )}
-    </>
+    </div>
   )
 }
 

sites/shared/components/account/password.mjs

@@ -33,7 +33,7 @@ export const PasswordSettings = ({ app, title = false, welcome = false }) => {
   }
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h2 className="text-4xl">{t('passwordTitle')}</h2> : null}
       <div className="flex flex-row items-center mt-4 gap-2">
         <input
@@ -65,6 +65,6 @@ export const PasswordSettings = ({ app, title = false, welcome = false }) => {
           </p>
         </Popout>
       )}
-    </>
+    </div>
   )
 }

sites/shared/components/account/username.mjs

@@ -57,7 +57,7 @@ export const UsernameSettings = ({ app, title = false, welcome = false }) => {
   }
 
   return (
-    <>
+    <div className="max-w-xl">
       {title ? <h1 className="text-4xl">{t('usernameTitle')}</h1> : null}
       <div className="flex flex-row items-center">
         <input
@@ -114,6 +114,6 @@ export const UsernameSettings = ({ app, title = false, welcome = false }) => {
       ) : (
         <BackToAccountButton loading={app.state.loading} />
       )}
-    </>
+    </div>
   )
 }