refactor(account-center): remove disabled state from CTA buttons (#8114)

Align account-center with the experience package pattern where CTA
buttons are always clickable. Instead of disabling buttons when inputs
are empty, validation errors are now shown inline on the inputs when
the user clicks submit.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Author: wangsijie

packages/account-center/src/components/PasswordVerification/index.tsx

@@ -25,13 +25,16 @@ const PasswordVerification = ({ onBack, onSwitchMethod, hasAlternativeMethod }:
   const { setVerificationId, setToast } = useContext(PageContext);
   const { loading } = useContext(LoadingContext);
   const [password, setPassword] = useState('');
+  const [passwordError, setPasswordError] = useState<string>();
   const asyncVerifyPassword = useApi(verifyPassword);
   const handleError = useErrorHandler();
 
   const handleVerify = async (event?: FormEvent<HTMLFormElement>) => {
     event?.preventDefault();
+    setPasswordError(undefined);
 
-    if (!password || loading) {
+    if (!password) {
+      setPasswordError(t('error.password_required'));
       return;
     }
 
@@ -63,6 +66,8 @@ const PasswordVerification = ({ onBack, onSwitchMethod, hasAlternativeMethod }:
           autoComplete="current-password"
           label={t('input.password')}
           value={password}
+          errorMessage={passwordError}
+          isDanger={Boolean(passwordError)}
           onChange={(event) => {
             if (event.target instanceof HTMLInputElement) {
               setPassword(String(event.target.value));
@@ -73,7 +78,6 @@ const PasswordVerification = ({ onBack, onSwitchMethod, hasAlternativeMethod }:
           className={styles.submit}
           htmlType="submit"
           title="action.continue"
-          disabled={!password || loading}
           isLoading={loading}
         />
         {hasAlternativeMethod && (

packages/account-center/src/components/SetPassword/index.tsx

@@ -32,17 +32,25 @@ const SetPassword = ({
   const { t } = useTranslation();
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [newPasswordError, setNewPasswordError] = useState<string>();
   const [confirmPasswordError, setConfirmPasswordError] = useState<string>();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
 
   const handleSubmit = useCallback(
     async (event?: FormEvent<HTMLFormElement>) => {
       event?.preventDefault();
+      setNewPasswordError(undefined);
       setConfirmPasswordError(undefined);
       clearErrorMessage?.();
 
-      if (!newPassword || !confirmPassword) {
+      if (!newPassword) {
+        setNewPasswordError(t('error.password_required'));
+        return;
+      }
+
+      if (!confirmPassword) {
+        setConfirmPasswordError(t('error.password_required'));
         return;
       }
 
@@ -74,8 +82,8 @@ const SetPassword = ({
         autoFocus={autoFocus}
         value={newPassword}
         maxLength={maxLength}
-        isDanger={Boolean(errorMessage)}
-        errorMessage={errorMessage}
+        isDanger={Boolean(errorMessage ?? newPasswordError)}
+        errorMessage={errorMessage ?? newPasswordError}
         isSuffixFocusVisible={Boolean(newPassword)}
         suffix={
           <IconButton
@@ -126,7 +134,6 @@ const SetPassword = ({
         title="action.save_password"
         htmlType="submit"
         isLoading={isSubmitting}
-        disabled={!newPassword || !confirmPassword}
       />
     </form>
   );

packages/account-center/src/pages/CodeFlow/IdentifierSendStep.tsx

@@ -65,11 +65,17 @@ const IdentifierSendStep = ({
   const handleSend = useCallback(
     async (event?: FormEvent<HTMLFormElement>) => {
       event?.preventDefault();
+      setLocalErrorMessage(undefined);
       clearErrorMessage?.();
 
       const target = pendingValue.trim();
 
-      if (!target || loading) {
+      if (!target) {
+        setLocalErrorMessage(
+          t('error.general_required', {
+            types: [identifierType === 'email' ? t('input.email') : t('input.phone_number')],
+          })
+        );
         return;
       }
 
@@ -79,9 +85,6 @@ const IdentifierSendStep = ({
         return;
       }
 
-      // Clear any previous validation error
-      setLocalErrorMessage(undefined);
-
       const [error, result] = await sendCodeRequest(target);
 
       if (error) {
@@ -104,7 +107,6 @@ const IdentifierSendStep = ({
       clearErrorMessage,
       handleError,
       identifierType,
-      loading,
       onCodeSent,
       onSendFailed,
       pendingValue,
@@ -142,7 +144,6 @@ const IdentifierSendStep = ({
           type="primary"
           htmlType="submit"
           className={styles.submit}
-          disabled={!pendingValue || loading}
           isLoading={loading}
         />
       </form>

packages/account-center/src/pages/Username/index.tsx

@@ -33,6 +33,7 @@ const Username = () => {
   const defaultUsername = userInfo?.username ?? '';
   const [pendingUsername, setPendingUsername] = useState(defaultUsername);
   const [inputKey, setInputKey] = useState(defaultUsername);
+  const [usernameError, setUsernameError] = useState<string>();
   const updateUsernameRequest = useApi(updateUsername);
   const handleError = useErrorHandler();
 
@@ -56,20 +57,27 @@ const Username = () => {
 
   const handleSubmit = async (event?: FormEvent) => {
     event?.preventDefault();
+    setUsernameError(undefined);
 
-    if (!verificationId || loading) {
+    if (!verificationId) {
       return;
     }
 
     const username = pendingUsername.trim();
+
+    if (!username) {
+      setUsernameError(t('error.username_required'));
+      return;
+    }
+
     const validationError = validateUsername(username);
 
     if (validationError) {
       const message =
         typeof validationError === 'string'
           ? t(`error.${validationError}`)
           : t(`error.${validationError.code}`, validationError.data ?? {});
-      setToast(message);
+      setUsernameError(message);
       return;
     }
 
@@ -116,6 +124,8 @@ const Username = () => {
           label={t('input.username')}
           defaultValue={pendingUsername}
           enabledTypes={[SignInIdentifier.Username]}
+          errorMessage={usernameError}
+          isDanger={Boolean(usernameError)}
           onChange={(inputValue) => {
             setPendingUsername(inputValue.value);
           }}
@@ -124,7 +134,6 @@ const Username = () => {
           className={styles.submit}
           title="action.continue"
           htmlType="submit"
-          disabled={!pendingUsername.trim() || loading}
           isLoading={loading}
         />
       </form>