diff --git a/pages/settings/index.js b/pages/settings/index.js index 20888c0a..d701cc2a 100644 --- a/pages/settings/index.js +++ b/pages/settings/index.js @@ -38,6 +38,19 @@ function bech32encode (hexString) { return bech32.encode('npub', bech32.toWords(Buffer.from(hexString, 'hex'))) } +// sort to prevent hydration mismatch +const getProviders = (authMethods) => + Object.keys(authMethods).filter(k => k !== '__typename' && k !== 'apiKey').sort() + +// Show alert message if user only has one auth method activated +// as users are losing access to their accounts +const hasOnlyOneAuthMethod = (authMethods) => { + const activatedAuths = getProviders(authMethods) + .filter(provider => !!authMethods[provider]) + + return activatedAuths.length === 1 +} + export function SettingsHeader () { const router = useRouter() const pathParts = router.asPath.split('/').filter(segment => !!segment) @@ -94,6 +107,7 @@ export default function Settings ({ ssrData }) { return (
+ {hasOnlyOneAuthMethod(settings?.authMethods) &&
Please add a second auth method to avoid losing access to your account.
}
k !== '__typename' && k !== 'apiKey').sort() + const providers = getProviders(methods) const unlink = async type => { // if there's only one auth method left diff --git a/pages/settings/settings.module.css b/pages/settings/settings.module.css index 2d505ab1..d5bbbd88 100644 --- a/pages/settings/settings.module.css +++ b/pages/settings/settings.module.css @@ -15,3 +15,8 @@ .nav :global .active { border-bottom: 2px solid var(--bs-primary); } + +.alert { + color: var(--bs-danger); + margin-bottom: 10px; +}