feat(console): add password not enabled notification (#7201)

add password not enabled notificaiton

Author: simeng-li

packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/PasswordDisabledNotification.tsx

@@ -0,0 +1,43 @@
+import { SignInIdentifier, type SignInExperience } from '@logto/schemas';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { isDevFeaturesEnabled } from '@/consts/env';
+import InlineNotification from '@/ds-components/InlineNotification';
+
+import { signUpFormDataParser } from '../utils/parser';
+
+type Props = {
+  readonly after: SignInExperience;
+  readonly className?: string;
+};
+
+function PasswordDisabledNotification({ after, className }: Props) {
+  const { signUp } = after;
+  const { identifiers, password } = signUpFormDataParser.fromSignUp(signUp);
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const shouldShowNotification = useMemo(() => {
+    if (!isDevFeaturesEnabled) {
+      return false;
+    }
+
+    return (
+      identifiers.length === 1 &&
+      identifiers[0]?.identifier === SignInIdentifier.Username &&
+      !password
+    );
+  }, [identifiers, password]);
+
+  if (!shouldShowNotification) {
+    return null;
+  }
+
+  return (
+    <InlineNotification className={className}>
+      {t('sign_in_exp.sign_up_and_sign_in.tip.password_disabled_notification')}
+    </InlineNotification>
+  );
+}
+
+export default PasswordDisabledNotification;

packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/index.module.scss

@@ -27,4 +27,8 @@
       }
     }
   }
+
+  .notification {
+    margin-top: _.unit(3);
+  }
 }

packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/index.tsx

@@ -1,6 +1,7 @@
 import type { SignInExperience } from '@logto/schemas';
 import { useTranslation } from 'react-i18next';
 
+import PasswordDisabledNotification from './PasswordDisabledNotification';
 import SignUpAndSignInDiffSection from './SignUpAndSignInDiffSection';
 import styles from './index.module.scss';
 
@@ -25,6 +26,7 @@ function SignUpAndSignInChangePreview({ before, after }: Props) {
           <SignUpAndSignInDiffSection isAfter before={before} after={after} />
         </div>
       </div>
+      <PasswordDisabledNotification after={after} className={styles.notification} />
     </div>
   );
 }

packages/phrases/src/locales/en/translation/admin-console/sign-in-exp/sign-up-and-sign-in.ts

@@ -56,6 +56,8 @@ const sign_up_and_sign_in = {
       'This is essential as you have only enabled the option to provide verification code when signing up. You’re free to uncheck the box when password set-up is allowed at the sign-up process.',
     delete_sign_in_method:
       'This is essential as you have selected {{identifier}} as a required identifier.',
+    password_disabled_notification:
+      'The "Create your password" option is disabled for username sign-up, which may prevent users from signing in. Confirm to proceed with saving.',
   },
   advanced_options: {
     title: 'ADVANCED OPTIONS',