[PB-5716] feature/Redesign mobile auth screens

src/app/i18n/locales/de.json

@@ -83,15 +83,20 @@
       "title": "Anmelden",
       "forgotPwd": "Haben Sie Ihr Passwort vergessen?",
       "dontHaveAccount": "Sie haben kein Konto?",
+      "dontHaveAccountMobile": "Sie haben kein Internxt-Konto?",
       "createAccount": "Konto erstellen",
       "2FA": "Zwei-Faktor-Code",
       "twoFactorAuthenticationCode": "Zwei-Faktor-Authentifizierungscode",
       "wrongLogin": "Ungültiger Benutzername oder Passwort",
       "failedToSendAuthData": "Fehler beim Senden der Authentifizierungsdaten. Bitte versuchen Sie es erneut."
     },
+    "button": {
+      "loginAction": "Anmelden"
+    },
     "signup": {
       "title": "Konto erstellen",
       "haveAccount": "Haben Sie bereits ein Konto?",
+      "haveAccountMobile": "Haben Sie bereits ein Internxt-Konto?",
       "login": "Anmelden",
       "encrypting": "Verschlüsselung im Gange",
       "info": {

src/app/i18n/locales/en.json

@@ -101,19 +101,24 @@
     "terms2": "you accept the terms & conditions",
     "decrypting": "Decrypting...",
     "login": {
-      "title": "Log in",
+      "title": "Login",
       "forgotPwd": "Forgot your password?",
-      "dontHaveAccount": "Don’t have an account?",
+      "dontHaveAccount": "Don't have an account?",
+      "dontHaveAccountMobile": "Don't have an Internxt account?",
       "createAccount": "Create account",
       "2FA": "Two factor code",
       "twoFactorAuthenticationCode": "Two factor authentication code",
       "wrongLogin": "Invalid username or password",
       "failedToSendAuthData": "Failed to send authentication data. Please try again."
     },
+    "button": {
+      "loginAction": "Log in"
+    },
     "signup": {
       "title": "Create account",
       "haveAccount": "Already have an account?",
-      "login": "Log in",
+      "haveAccountMobile": "Already have an Internxt account?",
+      "login": "Login",
       "encrypting": "Encrypting",
       "info": {
         "normalText": "Internxt doesn’t store passwords.",
@@ -244,7 +249,7 @@
       },
       "title": {
         "signUp": "Create an account",
-        "signIn": "Log in",
+        "signIn": "Login",
         "userIsSignedIn": "User signed in as"
       },
       "emailMustNotBeEmpty": "Email must not be empty",

src/app/i18n/locales/es.json

@@ -83,15 +83,20 @@
       "title": "Iniciar Sesión",
       "forgotPwd": "¿Olvidaste tu contraseña?",
       "dontHaveAccount": "¿No tienes cuenta?",
+      "dontHaveAccountMobile": "¿No tienes cuenta de Internxt?",
       "createAccount": "Crear cuenta",
       "2FA": "Código de dos factores",
       "twoFactorAuthenticationCode": "Código de autenticación de dos factores",
       "wrongLogin": "Nombre de usuario o contraseña no válidos",
       "failedToSendAuthData": "Error al enviar datos de autenticación. Por favor, inténtalo de nuevo."
     },
+    "button": {
+      "loginAction": "Iniciar sesión"
+    },
     "signup": {
       "title": "Crear cuenta",
       "haveAccount": "¿Ya tienes una cuenta?",
+      "haveAccountMobile": "¿Ya tienes una cuenta de Internxt?",
       "login": "Iniciar sesión",
       "encrypting": "Cifrando",
       "info": {

src/app/i18n/locales/fr.json

@@ -83,15 +83,20 @@
       "title": " Connexion ",
       "forgotPwd": "Mot de passe oublié?",
       "dontHaveAccount": "Vous n'avez pas de compte ?",
+      "dontHaveAccountMobile": "Vous n'avez pas de compte Internxt ?",
       "createAccount": "Créer un compte",
       "2FA": "Code à deux facteurs",
       "twoFactorAuthenticationCode": "Code d'authentification à deux facteurs",
       "wrongLogin": "Nom d'utilisateur ou mot de passe invalide",
       "failedToSendAuthData": "Échec de l'envoi des données d'authentification. Veuillez réessayer."
     },
+    "button": {
+      "loginAction": "Se connecter"
+    },
     "signup": {
       "title": "Créer un compte",
       "haveAccount": "Vous avez déjà un compte ?",
+      "haveAccountMobile": "Vous avez déjà un compte Internxt ?",
       "login": " Connexion ",
       "encrypting": "Encryptant",
       "info": {

src/app/i18n/locales/it.json

@@ -104,15 +104,20 @@
       "title": "Accedere",
       "forgotPwd": "Hai dimenticato la password?",
       "dontHaveAccount": "Non hai un account?",
+      "dontHaveAccountMobile": "Non hai un account Internxt?",
       "createAccount": "Creare un account",
       "2FA": "Codice a due fattori",
       "twoFactorAuthenticationCode": "Codice di autenticazione a due fattori",
       "wrongLogin": "Nome utente o password non validi",
       "failedToSendAuthData": "Impossibile inviare i dati di autenticazione. Riprova."
     },
+    "button": {
+      "loginAction": "Accedi"
+    },
     "signup": {
       "title": "Creare un account",
       "haveAccount": "Hai già un account?",
+      "haveAccountMobile": "Hai già un account Internxt?",
       "login": "Accedi",
       "encrypting": "Crittografia in corso",
       "info": {

src/app/i18n/locales/ru.json

@@ -83,15 +83,20 @@
       "title": "Войти",
       "forgotPwd": "Забыли пароль?",
       "dontHaveAccount": "У вас нет учетной записи?",
+      "dontHaveAccountMobile": "У вас нет учетной записи Internxt?",
       "createAccount": "Создать учетную запись",
       "2FA": "Двухфакторный код",
       "twoFactorAuthenticationCode": "Код двухфакторной аутентификации",
       "wrongLogin": "Неверное имя пользователя или пароль",
       "failedToSendAuthData": "Не удалось отправить данные аутентификации. Пожалуйста, попробуйте еще раз."
     },
+    "button": {
+      "loginAction": "Войти"
+    },
     "signup": {
       "title": "Создать учетную запись",
       "haveAccount": "Уже есть аккаунт?",
+      "haveAccountMobile": "Уже есть аккаунт Internxt?",
       "login": "Войти",
       "encrypting": "Идет шифрование",
       "info": {

src/app/i18n/locales/tw.json

@@ -103,15 +103,20 @@
       "title": "登錄",
       "forgotPwd": "忘記密碼？",
       "dontHaveAccount": "沒有帳戶？",
+      "dontHaveAccountMobile": "沒有 Internxt 帳戶？",
       "createAccount": "創建帳戶",
       "2FA": "雙重身份驗證代碼",
       "twoFactorAuthenticationCode": "雙重身份驗證代碼",
       "wrongLogin": "使用者名稱或密碼無效",
       "failedToSendAuthData": "無法發送身份驗證數據。請重試。"
     },
+    "button": {
+      "loginAction": "登錄"
+    },
     "signup": {
       "title": "創建帳戶",
       "haveAccount": "已有帳戶？",
+      "haveAccountMobile": "已有 Internxt 帳戶？",
       "login": "登錄",
       "encrypting": "加密中",
       "info": {

src/app/i18n/locales/zh.json

@@ -101,15 +101,20 @@
       "title": "登录",
       "forgotPwd": "忘记密码了？",
       "dontHaveAccount": "没有账户？",
+      "dontHaveAccountMobile": "没有 Internxt 账户？",
       "createAccount": "创建账户",
       "2FA": "双因素代码",
       "twoFactorAuthenticationCode": "双因素验证码",
       "wrongLogin": "用户名或密码无效",
       "failedToSendAuthData": "发送身份验证数据失败。请重试。"
     },
+    "button": {
+      "loginAction": "登录"
+    },
     "signup": {
       "title": "创建账户",
       "haveAccount": "已有账户？",
+      "haveAccountMobile": "已有 Internxt 账户？",
       "login": "登录",
       "encrypting": "加密中",
       "info": {

src/index.scss

@@ -393,3 +393,21 @@ abbr[title] {
 .text-ellipsis {
   text-overflow: ellipsis;
 }
+
+@media (width <= 639px) {
+  .bg-login-gradient {
+    background: linear-gradient(180deg, rgb(249 249 252 / 0%) 0%, #f9f9fc 100%);
+  }
+
+  .dark .bg-login-gradient {
+    background: linear-gradient(180deg, #1c1c1c 0%, #031632 100%);
+  }
+}
+
+.auth-footer-link {
+  @apply font-medium text-base no-underline text-primary hover:text-primary-dark;
+
+  @media (width >= 640px) {
+    @apply text-gray-80 hover:text-gray-100;
+  }
+}

src/views/Login/RecoveryLinkView.tsx

@@ -5,7 +5,7 @@ import { RecoveryLink } from './components';
 function RecoveryLinkView(): JSX.Element {
   const { translate } = useTranslationContext();
   return (
-    <div className="flex h-full w-full flex-col bg-surface dark:bg-gray-1">
+    <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">
         <InternxtLogo className="h-auto w-28 text-gray-100" />
       </div>
@@ -14,11 +14,11 @@ function RecoveryLinkView(): JSX.Element {
         <RecoveryLink />
       </div>
 
-      <div className="flex shrink-0 flex-col items-center justify-center space-x-0 space-y-3 py-8 sm:flex-row sm:space-x-8 sm:space-y-0">
-        <a href="https://internxt.com/legal" target="_blank" className="text-gray-80 no-underline hover:text-gray-100">
+      <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">
+        <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="text-gray-80 no-underline hover:text-gray-100">
+        <a href="https://help.internxt.com" target="_blank" className="auth-footer-link">
           {translate('general.help')}
         </a>
       </div>

src/views/Login/SignInView.tsx

@@ -8,10 +8,9 @@ interface SignInProps {
 
 export default function SignInView(props: Readonly<SignInProps>): JSX.Element {
   const { translate } = useTranslationContext();
+
   return (
-    <div
-      className={`flex h-full w-full flex-col bg-surface dark:bg-gray-1 ${props.displayIframe ? '' : 'overflow-auto'}`}
-    >
+    <div className={`flex h-full w-full flex-col bg-login-gradient ${props.displayIframe ? '' : 'overflow-auto'}`}>
       {!props.displayIframe && (
         <div className="flex shrink-0 flex-row justify-center py-10 sm:justify-start sm:pl-20">
           <InternxtLogo className="h-auto w-28 text-gray-100" />
@@ -23,19 +22,11 @@ export default function SignInView(props: Readonly<SignInProps>): JSX.Element {
       </div>
 
       {!props.displayIframe && (
-        <div className="flex shrink-0 flex-col items-center justify-center space-x-0 space-y-3 py-8 sm:flex-row sm:space-x-8 sm:space-y-0">
-          <a
-            href="https://internxt.com/legal"
-            target="_blank"
-            className="font-regular text-base text-gray-80 no-underline hover:text-gray-100"
-          >
+        <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">
+          <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="font-regular text-base text-gray-80 no-underline hover:text-gray-100"
-          >
+          <a href="https://help.internxt.com" target="_blank" className="auth-footer-link">
             {translate('general.help')}
           </a>
         </div>

src/views/Login/components/LogIn.tsx

@@ -6,26 +6,26 @@ import { SubmitHandler, useForm, useWatch } from 'react-hook-form';
 import { useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import localStorageService from 'services/local-storage.service';
-import { twoFactorRegexPattern } from 'services/validation.service';
 import { RootState } from 'app/store';
 import { useAppDispatch } from 'app/store/hooks';
 import { userActions } from 'app/store/slices/user';
 import authService, { authenticateUser, is2FANeeded } from 'services/auth.service';
+import localStorageService from 'services/local-storage.service';
+import { twoFactorRegexPattern } from 'services/validation.service';
 
 import { UserSettings } from '@internxt/sdk/dist/shared/types/userSettings';
 import { Button } from '@internxt/ui';
 import { WarningCircle } from '@phosphor-icons/react';
-import { useOAuthFlow } from 'views/Login/hooks/useOAuthFlow';
-import { errorService, navigationService, workspacesService, envService, vpnAuthService } from 'services';
 import AppError, { AppView, IFormValues } from 'app/core/types';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import notificationsService, { ToastType } from 'app/notifications/services/notifications.service';
-import useLoginRedirections from '../hooks/useLoginRedirections';
 import shareService from 'app/share/services/share.service';
 import PasswordInput from 'components/PasswordInput';
 import TextInput from 'components/TextInput';
+import { envService, errorService, navigationService, vpnAuthService, workspacesService } from 'services';
 import { AuthMethodTypes } from 'views/Checkout/types';
+import { useOAuthFlow } from 'views/Login/hooks/useOAuthFlow';
+import useLoginRedirections from '../hooks/useLoginRedirections';
 
 const showNotification = ({ text, isError }: { text: string; isError: boolean }) => {
   notificationsService.show({
@@ -272,7 +272,7 @@ export default function LogIn(): JSX.Element {
             variant="primary"
             disabled={isLoggingIn}
           >
-            {isLoggingIn && isValid ? translate('auth.decrypting') : translate('auth.login.title')}
+            {isLoggingIn && isValid ? translate('auth.decrypting') : translate('auth.button.loginAction')}
           </Button>
         </form>
 
@@ -288,7 +288,8 @@ export default function LogIn(): JSX.Element {
 
         <div className="w-full border-b border-gray-10" />
 
-        <div className="flex w-full items-center justify-center space-x-1.5 font-medium">
+        {/* Desktop: link style */}
+        <div className="hidden w-full items-center justify-center space-x-1.5 font-medium sm:flex">
           <span>{translate('auth.login.dontHaveAccount')}</span>
           <Link
             to={getSignupLink()}
@@ -297,6 +298,19 @@ export default function LogIn(): JSX.Element {
             {translate('auth.login.createAccount')}
           </Link>
         </div>
+
+        {/* Mobile: button style */}
+        <div className="w-full sm:hidden">
+          <p className="w-full text-center">{translate('auth.login.dontHaveAccountMobile')}</p>
+          <Link to={getSignupLink()} className="mt-2 block w-full no-underline">
+            <Button
+              variant="secondary"
+              className="w-full !border-highlight/10 !bg-white/15 !text-gray-80 !shadow-sm hover:!bg-white/25 dark:!border-white/10 dark:!text-white"
+            >
+              {translate('auth.login.createAccount')}
+            </Button>
+          </Link>
+        </div>
       </div>
     </>
   );

src/views/Signup/SignupView.tsx

@@ -20,9 +20,7 @@ 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-surface dark:bg-gray-1 ${props.displayIframe ? '' : 'overflow-auto'}`}
-    >
+    <div className={`flex h-full w-full flex-col bg-login-gradient ${props.displayIframe ? '' : 'overflow-auto'}`}>
       {isRegularSignup && (
         <div className="flex shrink-0 flex-row justify-center py-10 sm:justify-start sm:pl-20">
           <InternxtLogo className="h-auto w-28 text-gray-100" />
@@ -34,15 +32,11 @@ 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-3 py-8 sm:flex-row sm:space-x-8 sm:space-y-0">
-          <a
-            href="https://internxt.com/legal"
-            target="_blank"
-            className="text-gray-80 no-underline hover:text-gray-100"
-          >
+        <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">
+          <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="text-gray-80 no-underline hover:text-gray-100">
+          <a href="https://help.internxt.com" target="_blank" className="auth-footer-link">
             {translate('general.help')}
           </a>
         </div>