1
0
Fork 0

wip(org): Updated account pages

This commit is contained in:
Joost De Cock 2023-03-27 19:21:27 +02:00
parent 9e3861b009
commit ff95af3a0f
26 changed files with 70 additions and 123 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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'],
},
},
}
}

View file

@ -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>

View file

@ -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>

View file

@ -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'],
},
},
}
}

View file

@ -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'],
},
},
}
}

View file

@ -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'],
},
},
}
}

View file

@ -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'],
},
},
}
}

View file

@ -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'],
},
},
}
}

View file

@ -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'],
},
},
}
}

View file

@ -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'],
},
},
}
}

View file

@ -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'],
},
},
}
}

View file

@ -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'],
},
},
}
}

View file

@ -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'],
},
},
}
}

View file

@ -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>
)
}

View file

@ -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>
)
}

View file

@ -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>
)
}

View file

@ -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>
)
}

View file

@ -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>
)
}

View file

@ -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>
)
}

View file

@ -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>
)
}

View file

@ -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>
)
}

View file

@ -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>
)
}

View file

@ -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>
)
}

View file

@ -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>
)
}