feat(ui): display error message on social callback page (#1097)

* feat(ui): display error message on social callback page display error message on social callback page * refactor(ui): display server side error message direactly display server side error message directly
logto-io · Jun 10, 2022 · f3b8678 · f3b8678
1 parent c078cc1
commit f3b8678
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 9 deletions.
diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts
@@ -87,7 +87,6 @@ const translation = {
       invalid_passcode: 'The passcode is invalid.',
       invalid_connector_auth: 'The authorization is invalid.',
       invalid_connector_request: 'The connector data is invalid.',
-      request: 'Request error: {{message}}',
       unknown: 'Unknown error, please try again later.',
       invalid_session: 'Session not found. Please go back and sign in again.',
     },

diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts
@@ -87,7 +87,6 @@ const translation = {
       invalid_passcode: '无效的验证码。',
       invalid_connector_auth: '登录失败。',
       invalid_connector_request: '无效的登录请求。',
-      request: '请求错误：{{ message }}', // All error messages end with '。'.
       unknown: '未知错误，请稍后重试。',
       invalid_session: '未找到有效的会话，请重新登录。',
     },

diff --git a/packages/ui/src/containers/SocialLanding/index.module.scss b/packages/ui/src/containers/SocialLanding/index.module.scss
@@ -3,6 +3,7 @@
 
 .container {
   @include _.flex-column;
+  @include _.full-width;
 }
 
 .connector {
@@ -14,3 +15,9 @@
     @include _.image-align-center;
   }
 }
+
+.message {
+  text-align: center;
+  font: var(--font-caption);
+  color: var(--color-caption);
+}
diff --git a/packages/ui/src/containers/SocialLanding/index.tsx b/packages/ui/src/containers/SocialLanding/index.tsx
@@ -10,9 +10,10 @@ type Props = {
   className?: string;
   connectorId: string;
   isLoading?: boolean;
+  message?: string;
 };
 
-const SocialLanding = ({ className, connectorId, isLoading = false }: Props) => {
+const SocialLanding = ({ className, connectorId, message, isLoading = false }: Props) => {
   const { experienceSettings } = useContext(PageContext);
   const connector = experienceSettings?.socialConnectors.find(({ id }) => id === connectorId);
 
@@ -22,6 +23,7 @@ const SocialLanding = ({ className, connectorId, isLoading = false }: Props) =>
         {connector?.logo ? <img src={connector.logo} /> : connectorId}
       </div>
       {isLoading && <LoadingIcon />}
+      {!isLoading && message && <div className={styles.message}>{message}</div>}
     </div>
   );
 };

diff --git a/packages/ui/src/hooks/use-api.ts b/packages/ui/src/hooks/use-api.ts
@@ -74,7 +74,7 @@ function useApi<Args extends any[], Response>(
       return;
     }
 
-    const { code } = error;
+    const { code, message } = error;
     const handler = errorHandlers?.[code] ?? errorHandlers?.global;
 
     errorHandlers?.callback?.(error);
@@ -85,7 +85,7 @@ function useApi<Args extends any[], Response>(
       return;
     }
 
-    setToast(t('error.request', { ...error }));
+    setToast(message);
   }, [error, errorHandlers, setToast, t]);
 
   return {

diff --git a/packages/ui/src/hooks/use-social-callback-handler.ts b/packages/ui/src/hooks/use-social-callback-handler.ts
@@ -9,6 +9,7 @@ import { PageContext } from './use-page-context';
 
 const useSocialCallbackHandler = () => {
   const [loading, setLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState<string>();
   const { setToast } = useContext(PageContext);
   const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
   const navigate = useNavigate();
@@ -17,12 +18,12 @@ const useSocialCallbackHandler = () => {
     (connectorId: string) => {
       // Apple use fragment mode to store auth parameter. Need to support it.
       const data = window.location.search || '?' + window.location.hash.slice(1);
-      const { state, error, error_description } = parseQueryParameters(data);
+      const { state, error, error_description = '' } = parseQueryParameters(data);
 
       // Connector auth error
       if (error) {
         setLoading(false);
-        setToast(`${error}${error_description ? `: ${error_description}` : ''}`);
+        setErrorMessage(`${error}${error_description ? `: ${error_description}` : ''}`);
 
         return;
       }
@@ -58,7 +59,7 @@ const useSocialCallbackHandler = () => {
     [navigate, setToast, t]
   );
 
-  return { socialCallbackHandler, loading };
+  return { socialCallbackHandler, loading, errorMessage };
 };
 
 export default useSocialCallbackHandler;
diff --git a/packages/ui/src/pages/Callback/index.tsx b/packages/ui/src/pages/Callback/index.tsx
@@ -13,7 +13,7 @@ type Parameters = {
 const Callback = () => {
   const { connector: connectorId } = useParams<Parameters>();
 
-  const { socialCallbackHandler, loading } = useSocialCallbackHandler();
+  const { socialCallbackHandler, loading, errorMessage } = useSocialCallbackHandler();
 
   // SocialSignIn Callback Handler
   useEffect(() => {
@@ -33,6 +33,7 @@ const Callback = () => {
         className={styles.connectorContainer}
         connectorId={connectorId}
         isLoading={loading}
+        message={errorMessage}
       />
     </div>
   );