From 2b2f2d589cafe827d48c2fc40f994fe0eee260c3 Mon Sep 17 00:00:00 2001
From: Tom Smith <tsmith123@users.noreply.github.com>
Date: Fri, 17 May 2024 16:47:06 +0100
Subject: [PATCH] Show Alert Message on Settings Page (#1179)

* Show alert message

* Add extra line

* Use css var

* Restore lightning in filter

* Show alert at top of page
---
 pages/settings/index.js            | 17 +++++++++++++++--
 pages/settings/settings.module.css |  5 +++++
 2 files changed, 20 insertions(+), 2 deletions(-)

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 (
     <Layout>
       <div className='pb-3 w-100 mt-2' style={{ maxWidth: '600px' }}>
+        {hasOnlyOneAuthMethod(settings?.authMethods) && <div className={styles.alert}>Please add a second auth method to avoid losing access to your account.</div>}
         <SettingsHeader />
         <Form
           initial={{
@@ -673,8 +687,7 @@ function AuthMethods ({ methods, apiKeyEnabled }) {
     }
   )
 
-  // sort to prevent hydration mismatch
-  const providers = Object.keys(methods).filter(k => 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;
+}