style(ui): update error page back button (#3457)

packages/phrases-ui/src/locales/en.ts

@@ -81,7 +81,7 @@ const translation = {
     password_changed: 'Password changed',
     no_account: 'No account yet? ',
     have_account: 'Already had an account?',
-    enter_password: 'Enter ppassword',
+    enter_password: 'Enter password',
     enter_password_for: 'Sign in with the password to {{method}} {{value}}',
     enter_username: 'Set username',
     enter_username_description:

packages/ui/src/App.tsx

@@ -81,7 +81,7 @@ const App = () => {
             <Route element={<AppLayout />}>
               <Route
                 path="unknown-session"
-                element={<ErrorPage isRootPath message="error.invalid_session" />}
+                element={<ErrorPage message="error.invalid_session" />}
               />
               <Route path="springboard" element={<Springboard />} />
 
@@ -127,7 +127,7 @@ const App = () => {
                 <Route path="callback/:connectorId" element={<Callback />} />
               </Route>
 
-              <Route path="*" element={<ErrorPage isRootPath />} />
+              <Route path="*" element={<ErrorPage />} />
             </Route>
           </Routes>
         </AppBoundary>

packages/ui/src/pages/ErrorPage/index.tsx

@@ -2,12 +2,10 @@ import { Theme } from '@logto/schemas';
 import { useContext } from 'react';
 import type { TFuncKey } from 'react-i18next';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 
 import StaticPageLayout from '@/Layout/StaticPageLayout';
 import EmptyStateDark from '@/assets/icons/empty-state-dark.svg';
 import EmptyState from '@/assets/icons/empty-state.svg';
-import Button from '@/components/Button';
 import NavBar from '@/components/NavBar';
 import { PageContext } from '@/hooks/use-page-context';
 
@@ -17,33 +15,23 @@ type Props = {
   title?: TFuncKey;
   message?: TFuncKey;
   rawMessage?: string;
-  isRootPath?: boolean;
 };
 
-const ErrorPage = ({ title = 'description.not_found', message, rawMessage, isRootPath }: Props) => {
+const ErrorPage = ({ title = 'description.not_found', message, rawMessage }: Props) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+
   const { theme } = useContext(PageContext);
 
   const errorMessage = rawMessage ?? (message && t(message));
 
   return (
     <StaticPageLayout>
-      {!isRootPath && <NavBar />}
+      {history.length > 1 && <NavBar />}
       <div className={styles.container}>
         {theme === Theme.Light ? <EmptyState /> : <EmptyStateDark />}
         <div className={styles.title}>{t(title)}</div>
         {errorMessage && <div className={styles.message}>{String(errorMessage)}</div>}
       </div>
-      {!isRootPath && (
-        <Button
-          className={styles.backButton}
-          title="action.back"
-          onClick={() => {
-            navigate(-1);
-          }}
-        />
-      )}
     </StaticPageLayout>
   );
 };

packages/ui/src/pages/Register/index.tsx

@@ -17,7 +17,7 @@ const Register = () => {
   const { t } = useTranslation();
 
   if (!signInMode || signInMode === SignInMode.SignIn) {
-    return <ErrorPage isRootPath />;
+    return <ErrorPage />;
   }
 
   return (

packages/ui/src/pages/SignIn/index.tsx

@@ -17,7 +17,7 @@ const SignIn = () => {
   const { t } = useTranslation();
 
   if (!signInMode || signInMode === SignInMode.Register) {
-    return <ErrorPage isRootPath />;
+    return <ErrorPage />;
   }
 
   return (