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

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/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/SignInView.tsx

@@ -1,5 +1,6 @@
 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 { LogIn } from './components';
 
@@ -11,19 +12,23 @@ export default function SignInView(props: Readonly<SignInProps>): JSX.Element {
   const { translate } = useTranslationContext();
 
   return (
-    <div className={`flex h-full w-full flex-col bg-login-gradient ${props.displayIframe ? '' : 'overflow-auto'}`}>
+    <div
+      className={`relative flex h-full w-full flex-col dark:bg-[#0A0F1C] ${props.displayIframe ? '' : 'overflow-hidden'}`}
+    >
+      <AnimatedBackground />
+
       {!props.displayIframe && (
-        <div className="flex shrink-0 flex-row justify-center py-10 sm:justify-start sm:pl-20">
+        <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 ${!props.displayIframe && 'items-center justify-center'}`}>
+      <div className={`relative z-10 flex h-full flex-col ${!props.displayIframe && 'items-center justify-center'}`}>
         <LogIn />
       </div>
 
       {!props.displayIframe && (
-        <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 text-gray-80 dark:text-gray-10 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')}

src/views/Login/components/LogIn.tsx

@@ -216,16 +216,20 @@ export default function LogIn(): JSX.Element {
   };
 
   return (
-    <>
+    <div
+      className="bg-white dark:bg-gray-1 dark:border-gray-5 rounded-2xl "
+      style={{ boxShadow: '0 32px 40px 0 rgba(0, 0, 0, 0.08)' }}
+    >
       <Helmet>
         <link rel="canonical" href={`${envService.getVariable('hostname')}/login`} />
       </Helmet>
-      <div className="flex h-fit w-96 flex-col items-start justify-center space-y-5 px-8 py-10">
-        <h1 data-cy="loginTitle" className="text-3xl font-medium">
+      <div className="flex h-fit w-96 flex-col items-center justify-center space-y-5 px-8 py-10">
+        <h1 data-cy="loginTitle" className="text-3xl font-medium dark:text-white">
           {translate('auth.login.title')}
         </h1>
 
         <form data-cy="loginWrapper" className="flex w-full flex-col space-y-2" onSubmit={handleSubmit(onSubmit)}>
+          <p> {translate('auth.emailFloatingLabel')}</p>
           <TextInput
             placeholder={translate('auth.email')}
             inputDataCy="emailInput"
@@ -234,8 +238,9 @@ export default function LogIn(): JSX.Element {
             register={register}
             minLength={{ value: 1, message: 'Email must not be empty' }}
             error={errors.email}
+            hasError={showErrors && loginError.length > 0}
           />
-
+          <p> {translate('auth.passwordFloatingLabel')}</p>
           <PasswordInput
             placeholder={translate('auth.password')}
             inputDataCy="passwordInput"
@@ -244,6 +249,7 @@ export default function LogIn(): JSX.Element {
             required={true}
             minLength={{ value: 1, message: 'Password must not be empty' }}
             error={errors.password}
+            passwordError={showErrors && loginError.length > 0}
           />
 
           {showTwoFactor && (
@@ -271,7 +277,7 @@ export default function LogIn(): JSX.Element {
             loading={isLoggingIn}
             buttonDataCy="loginButton"
             variant="primary"
-            disabled={isLoggingIn}
+            className="disabled:!bg-primary disabled:!text-white"
           >
             {isLoggingIn && isValid ? translate('auth.decrypting') : translate('auth.button.loginAction')}
           </Button>
@@ -313,6 +319,6 @@ export default function LogIn(): JSX.Element {
           </Link>
         </div>
       </div>
-    </>
+    </div>
   );
 }

src/views/Signup/SignupView.tsx

@@ -4,6 +4,7 @@ import { isMobile } from 'react-device-detect';
 import SignUpForm from './components/SignupForm';
 import { useMemo } from 'react';
 import authService from 'services/auth.service';
+import AnimatedBackground from 'components/AnimatedBackground';
 
 export interface SignUpViewProps {
   location: {
@@ -21,9 +22,11 @@ export default function SignUpView(props: Readonly<SignUpViewProps>): JSX.Elemen
   const isRegularSignup = !props.displayIframe && !autoSubmit.enabled;
 
   return (
-    <div className={`flex h-full w-full flex-col bg-login-gradient ${props.displayIframe ? '' : 'overflow-auto'}`}>
+    <div className={`flex h-full w-full flex-col dark:bg-[#0A0F1C] ${props.displayIframe ? '' : 'overflow-auto'}`}>
+      <AnimatedBackground />
+
       {isRegularSignup && (
-        <div className="flex shrink-0 flex-row justify-center py-10 sm:justify-start sm:pl-20">
+        <div className="flex shrink-0 flex-row justify-center py-10 ">
           <InternxtLogo className="h-auto w-28 text-gray-100" />
         </div>
       )}
@@ -33,7 +36,7 @@ export default function SignUpView(props: Readonly<SignUpViewProps>): JSX.Elemen
       </div>
 
       {isRegularSignup && (
-        <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="flex shrink-0 flex-col items-center justify-center text-gray-80 dark:text-gray-10 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')}