[PB-6824]:feat/new dynamic login desgin

src/App.tsx

@@ -24,6 +24,9 @@ import localStorageService from 'services/local-storage.service';
 import navigationService from 'services/navigation.service';
 
 import { AppViewConfig } from './app/core/types';
+import AuthShell from './components/AuthShell/AuthShell';
+import { LogIn } from './views/Login/components';
+import SignUpForm from './views/Signup/components/SignupForm';
 import { LRUFilesCacheManager } from './app/database/services/database.service/LRUFilesCacheManager';
 import { LRUFilesPreviewCacheManager } from './app/database/services/database.service/LRUFilesPreviewCacheManager';
 import FileViewerWrapper from './app/drive/components/FileViewer/FileViewerWrapper';
@@ -203,6 +206,18 @@ const App = (props: AppProps): JSX.Element => {
               to={`/?preferences=open&section=account&subsection=${params.get('tab') ?? 'account'}`}
             />
             <Redirect from="/app/:section?" to={{ pathname: '/:section?', search: `${queryParameters}` }} />
+            <Route
+              path={['/login', '/new']}
+              exact
+              render={() => (
+                <AuthShell>
+                  <Switch>
+                    <Route path="/login" component={LogIn} />
+                    <Route path="/new" component={SignUpForm} />
+                  </Switch>
+                </AuthShell>
+              )}
+            />
             {!MOBILE_EXCLUDED_PATHS.includes(pathName) && isMobile && isAuthenticated ? (
               <Route path="*">
                 <Mobile user={props.user} />

src/app/i18n/locales/de.json

@@ -77,7 +77,9 @@
     "environment": "Weltumwelt"
   },
   "auth": {
+    "emailFloatingLabel": "E-Mail-Adresse",
     "email": "E-Mail",
+    "passwordFloatingLabel": "Passwort",
     "password": "Passwort",
     "terms1": "Durch die Erstellung eines Kontos,",
     "terms2": "Sie akzeptieren die Geschäftsbedingungen",

src/app/i18n/locales/en.json

@@ -98,14 +98,16 @@
     "environment": "World Environment Day"
   },
   "auth": {
-    "email": "Email",
+    "emailFloatingLabel": "Email address",
+    "email": "Email address",
+    "passwordFloatingLabel": "Password",
     "password": "Password",
     "terms1": "By creating an account, ",
     "terms2": "you accept the terms & conditions",
     "decrypting": "Decrypting...",
     "login": {
-      "title": "Login",
-      "forgotPwd": "Forgot your password?",
+      "title": "Log in",
+      "forgotPwd": "I forgot my password",
       "dontHaveAccount": "Don’t have an account?",
       "dontHaveAccountMobile": "Don't have an Internxt account?",
       "createAccount": "Create account",

src/app/i18n/locales/es.json

@@ -77,7 +77,9 @@
     "environment": "Día Mundial del Medio Ambiente"
   },
   "auth": {
+    "emailFloatingLabel": "Correo electrónico",
     "email": "Correo electrónico",
+    "passwordFloatingLabel": "Contraseña",
     "password": "Contraseña",
     "terms1": "Al crear una cuenta, ",
     "terms2": "aceptas los términos y condiciones",

src/app/i18n/locales/fr.json

@@ -77,7 +77,9 @@
     "environment": "Journée Mondiale de l'Environnement"
   },
   "auth": {
+    "emailFloatingLabel": "Adresse e-mail",
     "email": "Email",
+    "passwordFloatingLabel": "Mot de passe",
     "password": " Mot de passe ",
     "terms1": "En créant un compte,",
     "terms2": "vous acceptez les termes et conditions",

src/app/i18n/locales/it.json

@@ -98,7 +98,9 @@
     "environment": "Giornata Mondiale dell'Ambiente"
   },
   "auth": {
+    "emailFloatingLabel": "Indirizzo email",
     "email": "Email",
+    "passwordFloatingLabel": "Password",
     "password": "Password",
     "terms1": "Creando un account, ",
     "terms2": "accetti i termini e le condizioni",

src/app/i18n/locales/ru.json

@@ -77,7 +77,9 @@
     "environment": "World Environment Day"
   },
   "auth": {
+    "emailFloatingLabel": "Электронная почта",
     "email": "Email",
+    "passwordFloatingLabel": "Пароль",
     "password": "Password",
     "terms1": "При создании учетной записи",
     "terms2": "вы принимаете условия и положения",

src/app/i18n/locales/tw.json

@@ -97,7 +97,9 @@
     "idManagement": "Identity Management"
   },
   "auth": {
+    "emailFloatingLabel": "電子郵件",
     "email": "電子郵件",
+    "passwordFloatingLabel": "密碼",
     "password": "密碼",
     "terms1": "通過創建帳戶，",
     "terms2": "您接受條款和條件",

src/app/i18n/locales/zh.json

@@ -95,7 +95,9 @@
     "anniversary": "Anniversary"
   },
   "auth": {
+    "emailFloatingLabel": "电子邮件",
     "email": "电子邮件",
+    "passwordFloatingLabel": "密码",
     "password": "密码",
     "terms1": "创建账户后，",
     "terms2": "您接受条款和条件",

src/components/AnimatedBackground.tsx

@@ -0,0 +1,141 @@
+export default function AnimatedBackground(): JSX.Element {
+  return (
+    <>
+      <style>{`
+        @keyframes orbTL {
+          0%, 100% { transform: translate(0, 0) rotate(-164.506deg); }
+          33%       { transform: translate(100vw, 0) rotate(-164.506deg); }
+          66%       { transform: translate(100vw, 100vh) rotate(-164.506deg); }
+        }
+        @keyframes orbTR {
+          0%, 100% { transform: translate(0, 0); }
+          33%       { transform: translate(0, 100vh); }
+          66%       { transform: translate(-100vw, 100vh); }
+        }
+        @keyframes orbBL {
+          0%, 100% { transform: translate(0, 0) rotate(-133.484deg); }
+          33%       { transform: translate(0, -100vh) rotate(-133.484deg); }
+          66%       { transform: translate(100vw, -100vh) rotate(-133.484deg); }
+        }
+        @keyframes orbBR {
+          0%, 100% { transform: translate(0, 0); }
+          33%       { transform: translate(-100vw, 0); }
+          66%       { transform: translate(-100vw, -100vh); }
+        }
+      `}</style>
+
+      {/* Light mode orbs */}
+      <div
+        className="pointer-events-none absolute dark:hidden"
+        style={{
+          width: '841.186px',
+          height: '863.451px',
+          top: '-300px',
+          left: '-300px',
+          background: 'rgba(0, 102, 255, 0.40)',
+          filter: 'blur(175px)',
+          borderRadius: '50%',
+          animation: 'orbTL 30s ease-in-out infinite',
+        }}
+      />
+      <div
+        className="pointer-events-none absolute dark:hidden"
+        style={{
+          width: '932.945px',
+          height: '932.945px',
+          top: '-350px',
+          right: '-350px',
+          background: 'rgba(214, 232, 255, 0.60)',
+          filter: 'blur(250px)',
+          borderRadius: '50%',
+          animation: 'orbTR 30s ease-in-out infinite 7s',
+        }}
+      />
+      <div
+        className="pointer-events-none absolute dark:hidden"
+        style={{
+          width: '653.061px',
+          height: '653.061px',
+          bottom: '-250px',
+          left: '-200px',
+          background: 'rgba(175, 168, 255, 0.30)',
+          filter: 'blur(225px)',
+          borderRadius: '50%',
+          animation: 'orbBL 30s ease-in-out infinite 14s',
+        }}
+      />
+      <div
+        className="pointer-events-none absolute dark:hidden"
+        style={{
+          width: '1280px',
+          height: '800px',
+          bottom: '-400px',
+          right: '-400px',
+          background: 'rgba(128, 191, 255, 0.40)',
+          filter: 'blur(225px)',
+          borderRadius: '50%',
+          animation: 'orbBR 30s ease-in-out infinite 3s',
+        }}
+      />
+
+      {/* Dark mode orbs */}
+      <div
+        className="pointer-events-none absolute hidden dark:block"
+        style={{
+          width: '841.186px',
+          height: '863.451px',
+          top: '-300px',
+          left: '-300px',
+          background: 'rgba(0, 102, 255, 0.60)',
+          filter: 'blur(250px)',
+          borderRadius: '50%',
+          animation: 'orbTL 30s ease-in-out infinite',
+        }}
+      />
+      <div
+        className="pointer-events-none absolute hidden dark:block"
+        style={{
+          width: '932.945px',
+          height: '932.945px',
+          aspectRatio: '1/1',
+          top: '-350px',
+          right: '-350px',
+          background: 'rgba(77, 163, 255, 0.65)',
+          mixBlendMode: 'soft-light',
+          filter: 'blur(175px)',
+          borderRadius: '50%',
+          animation: 'orbTR 30s ease-in-out infinite 7s',
+        }}
+      />
+      <div
+        className="pointer-events-none absolute hidden dark:block"
+        style={{
+          width: '765.146px',
+          height: '749.943px',
+          bottom: '-300px',
+          right: '-300px',
+          background: '#003D99',
+          mixBlendMode: 'overlay',
+          filter: 'blur(200px)',
+          borderRadius: '50%',
+          animation: 'orbBR 30s ease-in-out infinite 3s',
+        }}
+      />
+      <div
+        className="pointer-events-none absolute hidden dark:block"
+        style={{
+          width: '653.061px',
+          height: '653.061px',
+          aspectRatio: '1/1',
+          bottom: '-250px',
+          left: '-200px',
+          background: 'rgba(107, 92, 255, 0.95)',
+          mixBlendMode: 'overlay',
+          filter: 'blur(125px)',
+          borderRadius: '50%',
+          animation: 'orbBL 30s ease-in-out infinite 14s',
+        }}
+      />
+    </>
+  );
+}

src/components/AuthShell/AuthShell.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+import { isMobile } from 'react-device-detect';
+import InternxtLogo from 'assets/icons/big-logo.svg?react';
+import AnimatedBackground from 'components/AnimatedBackground';
+import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
+
+interface AuthShellProps {
+  readonly children: ReactNode;
+}
+
+export default function AuthShell({ children }: AuthShellProps): JSX.Element {
+  const { translate } = useTranslationContext();
+
+  return (
+    <div className="relative flex h-full w-full flex-col overflow-hidden dark:bg-[#0A0F1C]">
+      <AnimatedBackground />
+
+      <div className="relative z-20 flex shrink-0 flex-row justify-center py-10 sm:justify-center">
+        <InternxtLogo className="h-auto w-28 text-gray-100" />
+      </div>
+
+      <div className="relative z-10 flex h-full flex-col items-center justify-center">{children}</div>
+
+      <div className="relative z-10 flex shrink-0 flex-col items-center justify-center space-x-0 space-y-2 py-8 text-gray-80 dark:text-gray-10 sm:flex-row sm:space-x-8 sm:space-y-0">
+        {!isMobile && (
+          <a href="https://internxt.com/legal" target="_blank" className="auth-footer-link">
+            {translate('general.terms')}
+          </a>
+        )}
+        <a href="https://help.internxt.com" target="_blank" className="auth-footer-link">
+          {translate('general.help')}
+        </a>
+      </div>
+    </div>
+  );
+}

src/components/PasswordInput.scss

@@ -8,6 +8,6 @@
   }
 
   .input-error {
-    @apply h-11 w-full rounded-md border bg-transparent text-lg font-normal text-gray-80 outline-none ring-opacity-10 focus:ring-3 disabled:text-gray-40 disabled:placeholder-gray-20 dark:ring-opacity-20 ring-red disabled:border-gray-10 border-gray-40 placeholder-gray-30 px-4 focus:border-red;
+    @apply h-11 w-full rounded-md border bg-transparent text-lg font-normal text-gray-80 outline-none ring-opacity-10 focus:ring-3 disabled:text-gray-40 disabled:placeholder-gray-20 dark:ring-opacity-20 ring-red disabled:border-gray-10 border-red placeholder-gray-30 px-4 focus:border-red;
   }
 }

src/components/TextInput.scss

@@ -8,6 +8,6 @@
   }
 
   .input-error {
-    @apply h-11 w-full rounded-md border bg-transparent text-lg font-normal text-gray-80 outline-none ring-opacity-10 focus:ring-3 disabled:text-gray-40 disabled:placeholder-gray-20 dark:ring-opacity-20 ring-red disabled:border-gray-10 border-gray-40 placeholder-gray-30 px-4 focus:border-red;
+    @apply h-11 w-full rounded-md border bg-transparent text-lg font-normal text-gray-80 outline-none ring-opacity-10 focus:ring-3 disabled:text-gray-40 disabled:placeholder-gray-20 dark:ring-opacity-20 ring-red disabled:border-gray-10 border-red placeholder-gray-30 px-4 focus:border-red;
   }
 }

src/components/TextInput.tsx

@@ -25,6 +25,7 @@ interface InputProps {
   onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   value?: string;
   style?: React.CSSProperties;
+  hasError?: boolean;
 }
 
 export default function TextInput({
@@ -48,6 +49,7 @@ export default function TextInput({
   onKeyDown,
   value,
   style,
+  hasError,
 }: Readonly<InputProps>): JSX.Element {
   return (
     <div className={`${className}`}>
@@ -71,7 +73,7 @@ export default function TextInput({
               pattern,
             })
           : { value, onChange, onKeyDown })}
-        className={`${error ? 'inxt-input input-error' : 'inxt-input input-primary'} ${inputClassName || ''}`}
+        className={`${error || hasError ? 'inxt-input input-error' : 'inxt-input input-primary'} ${inputClassName || ''}`}
       />
     </div>
   );

src/views/Login/RecoveryLinkView.tsx

@@ -1,21 +1,24 @@
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import InternxtLogo from 'assets/icons/big-logo.svg?react';
+import AnimatedBackground from 'components/AnimatedBackground';
 import { isMobile } from 'react-device-detect';
 import { RecoveryLink } from './components';
 
 function RecoveryLinkView(): JSX.Element {
   const { translate } = useTranslationContext();
   return (
-    <div className="flex h-full w-full flex-col bg-login-gradient overflow-auto">
-      <div className="flex shrink-0 flex-row justify-center py-10 sm:justify-start sm:pl-20">
+    <div className="relative flex h-full w-full flex-col overflow-hidden dark:bg-[#0A0F1C]">
+      <AnimatedBackground />
+
+      <div className="relative z-20 flex shrink-0 flex-row justify-center py-10 sm:justify-center">
         <InternxtLogo className="h-auto w-28 text-gray-100" />
       </div>
 
-      <div className="flex h-full flex-col items-center justify-center">
+      <div className="relative z-10 flex h-full flex-col items-center justify-center">
         <RecoveryLink />
       </div>
 
-      <div className="flex shrink-0 flex-col items-center justify-center space-x-0 space-y-2 py-8 sm:flex-row sm:space-x-8 sm:space-y-0">
+      <div className="relative z-10 flex shrink-0 flex-col items-center justify-center space-x-0 space-y-2 py-8 sm:flex-row sm:space-x-8 sm:space-y-0">
         {!isMobile && (
           <a href="https://internxt.com/legal" target="_blank" className="auth-footer-link">
             {translate('general.terms')}