Create splash screen and modify sign in page

Author: GuidoBR

frontend/src/assets/Splash.png

@@ -11,6 +11,7 @@ import VerificationPage from 'pages/Auth/Verify/VerificationPage';
 import OAuthRedirectHandler from 'pages/Auth/OAuth/OAuthRedirectHandler';
 import ForgotPasswordPage from 'pages/Auth/ForgotPassword/ForgotPasswordPage';
 import ResetPasswordPage from 'pages/Auth/ResetPassword/ResetPasswordPage';
+import SplashPage from 'pages/Auth/Splash/SplashPage';
 
 /**
  * The application router.  This is the main router for the Ionic React
@@ -40,10 +41,11 @@ const AppRouter = (): JSX.Element => {
         <Route exact path="/auth/signout" render={() => <SignOutPage />} />
         <Route exact path="/auth/forgot-password" render={() => <ForgotPasswordPage />} />
         <Route exact path="/auth/reset-password" render={() => <ResetPasswordPage />} />
+        <Route exact path="/auth/splash" render={() => <SplashPage />} />
         <Route exact path="/">
-          <Redirect to="/tabs" />
+          <Redirect to="/auth/splash" />
         </Route>
-        <Route render={() => <Redirect to="/tabs" />} />
+        <Route render={() => <Redirect to="/auth/splash" />} />
       </IonRouterOutlet>
     </IonReactRouter>
   );

frontend/src/common/components/Router/AppRouter.tsx

@@ -2,6 +2,13 @@
   "app": {
     "name": "MEDReport AI"
   },
+  "splash": {
+    "background-alt": "Application background",
+    "logo-alt": "MEDReport AI logo"
+  },
+  "signin": {
+    "logo-alt": "MEDReport AI logo"
+  },
   "confirm-prompt": "Are you sure?",
   "created": "created",
   "deleted": "deleted",

frontend/src/common/utils/i18n/resources/en/common.json

@@ -1,20 +1,27 @@
 .ls-signin-page {
-  --ion-background-color: #1a233f;
+  --ion-background-color: transparent;
 
   &__background {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
+    justify-content: flex-start;
     padding: 2rem 1.5rem;
+    background-color: #1c1e2e;
+    background-image: url('../../../../src/assets/Splash.png');
+    background-size: cover;
+    background-position: center;
+    position: relative;
   }
 
   &__logo-container {
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 2.5rem;
+    margin-top: 2rem;
   }
 
   &__logo {
@@ -35,7 +42,8 @@
     background-color: white;
     border-radius: 1.5rem;
     padding: 2.5rem 2rem;
-    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
+    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 15%);
+    z-index: 1;
   }
 
   &__header {

frontend/src/pages/Auth/SignIn/SignInPage.scss

@@ -5,7 +5,7 @@ import './SignInPage.scss';
 import { PropsWithTestId } from 'common/components/types';
 import ProgressProvider from 'common/providers/ProgressProvider';
 import SignInForm from './components/SignInForm';
-import logo from 'assets/logo_ls.png';
+import logo from '../../../assets/logo_ls.png';
 
 /**
  * Properties for the `SignInPage` component.
@@ -23,10 +23,14 @@ const SignInPage = ({ testid = 'page-signin' }: SignInPageProps): JSX.Element =>
   return (
     <IonPage className="ls-signin-page" data-testid={testid}>
       <ProgressProvider>
-        <IonContent fullscreen className="ion-padding">
+        <IonContent fullscreen className="ion-no-padding">
           <div className="ls-signin-page__background">
             <div className="ls-signin-page__logo-container">
-              <IonImg src={logo} alt="Logo" className="ls-signin-page__logo" />
+              <IonImg
+                src={logo}
+                alt={t('signin.logo-alt', { ns: 'common' })}
+                className="ls-signin-page__logo"
+              />
               <span className="ls-signin-page__logo-text">{t('app.name', { ns: 'common' })}</span>
             </div>
 

frontend/src/pages/Auth/SignIn/SignInPage.tsx

@@ -0,0 +1,56 @@
+.ls-splash-page {
+  --ion-background-color: transparent;
+
+  &__container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    overflow: hidden;
+  }
+
+  &__background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index: 0;
+  }
+
+  &__logo-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    padding: 2rem;
+    animation: fade-in 1s ease-in;
+  }
+
+  &__logo {
+    width: 120px;
+    height: auto;
+    margin-bottom: 1rem;
+  }
+
+  &__app-name {
+    color: white;
+    font-size: 2rem;
+    font-weight: 600;
+    text-align: center;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

frontend/src/pages/Auth/Splash/SplashPage.scss

@@ -0,0 +1,59 @@
+import { IonContent, IonImg, IonPage } from '@ionic/react';
+import { useEffect } from 'react';
+import { useIonRouter } from '@ionic/react';
+import { useTranslation } from 'react-i18next';
+
+import './SplashPage.scss';
+import splashBg from '../../../../src/assets/Splash.png';
+import logo from '../../../assets/logo_ls.png';
+import { PropsWithTestId } from 'common/components/types';
+
+/**
+ * Properties for the `SplashPage` component.
+ */
+interface SplashPageProps extends PropsWithTestId {}
+
+/**
+ * The `SplashPage` renders the initial splash screen with the app logo.
+ * It automatically redirects to the login page after a short delay.
+ *
+ * @param {SplashPageProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
+const SplashPage = ({ testid = 'page-splash' }: SplashPageProps): JSX.Element => {
+  const router = useIonRouter();
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    // Redirect to login page after a delay
+    const timer = setTimeout(() => {
+      router.push('/auth/signin', 'forward', 'replace');
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [router]);
+
+  return (
+    <IonPage className="ls-splash-page" data-testid={testid}>
+      <IonContent fullscreen className="ion-no-padding">
+        <div className="ls-splash-page__container">
+          <img
+            src={splashBg}
+            alt={t('splash.background-alt', { ns: 'common' })}
+            className="ls-splash-page__background"
+          />
+          <div className="ls-splash-page__logo-container">
+            <IonImg
+              src={logo}
+              alt={t('splash.logo-alt', { ns: 'common' })}
+              className="ls-splash-page__logo"
+            />
+            <span className="ls-splash-page__app-name">{t('app.name', { ns: 'common' })}</span>
+          </div>
+        </div>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default SplashPage;