Add simple tries left for MFA

frontend/public/locales/en/mfa.json

@@ -0,0 +1,28 @@
+{
+  "title": "Sign Up",
+  "og-title": "Replace .env files with 1 line of code. Sign Up for Infisical in 3 minutes.",
+  "og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage API-keys and environemntal variables. Works with Node.js, Next.js, Gatsby, Nest.js...",
+  "signup": "Sign Up",
+  "already-have-account": "Have an account? Log in",
+  "forgot-password": "Forgot your password?",
+  "verify": "Verify",
+  "step1-start": "Let's get started",
+  "step1-privacy": "By creating an account, you agree to our Terms and have read and acknowledged the Privacy Policy.",
+  "step1-submit": "Get Started",
+  "step2-message": "We've sent a verification code to",
+  "step2-code-error": "Oops. Your code is wrong. Tries left:",
+  "step2-resend-alert": "Don't see the code?",
+  "step2-resend-submit": "Resend",
+  "step2-resend-progress": "Resending...",
+  "step2-spam-alert": "Make sure to check your spam inbox.",
+  "step3-message": "Almost there!",
+  "step4-message": "Save your Emergency Kit",
+  "step4-description1": "If you get locked out of your account, your Emergency Kit is the only way to sign in.",
+  "step4-description2": "We recommend you download it and keep it somewhere safe.",
+  "step4-description3": "It contains your Secret Key which we cannot access or recover for you if you lose it.",
+  "step4-download": "Download PDF",
+  "step5-send-invites": "Send Invites",
+  "step5-invite-team": "Invite your team",
+  "step5-subtitle": "Infisical is meant to be used with your teammates. Invite them to test it out.",
+  "step5-skip": "Skip"
+}

frontend/public/locales/fr/mfa.json

@@ -0,0 +1,28 @@
+{
+  "title": "S'inscrire",
+  "og-title": "Remplacez les fichiers .env par 1 ligne de code. Inscrivez-vous à Infisical en 3 minutes.",
+  "og-description": "Infisical, une plate-forme simple et chiffré de bout en bout qui permet aux équipes de synchroniser et de gérer des clefs API et des variables d'environnement. Fonctionne avec Node.js, Next.js, Gatsby, Nest.js ...",
+  "signup": "S'inscrire",
+  "already-have-account": "Déjà inscris? Se connecter",
+  "forgot-password": "Mot de passe oublié?",
+  "verify": "Vérifier",
+  "step1-start": "Bon, on commence!",
+  "step1-privacy": "En créant votre compte, vous acceptez nos conditions et avez lu et reconnu notre politique de confidentialité.",
+  "step1-submit": "C'est parti",
+  "step2-message": "Nous avons envoyé un email de vérification à",
+  "step2-code-error": "Oops. Votre code est faux. Essais restants:",
+  "step2-resend-alert": "Vous ne voyez pas le code?",
+  "step2-resend-submit": "Renvoyer",
+  "step2-resend-progress": "Envoie en cours...",
+  "step2-spam-alert": "Assurez-vous de vérifier vos spams.",
+  "step3-message": "Nous y sommes presque!",
+  "step4-message": "Enregistrez votre kit d'urgence",
+  "step4-description1": "Si vous n'arrivez plus à vous connecter à votre compte, votre kit d'urgence est le seul moyen d'y arriver.",
+  "step4-description2": "Nous vous recommandons de le télécharger et de le garder en sécurité.",
+  "step4-description3": "Il contient votre clef secrète que nous ne pouvons pas récupérer pour vous si vous la perdez.",
+  "step4-download": "Téléchargez le PDF",
+  "step5-send-invites": "Envoyer les invitations",
+  "step5-invite-team": "Invitez votre équipe",
+  "step5-subtitle": "Infisical a pour but d'être utilisé avec vos coéquipiers. Invitez-les à le tester.",
+  "step5-skip": "Passer"
+}

frontend/public/locales/ko/mfa.json

@@ -0,0 +1,21 @@
+{
+  "title": "회원가입",
+  "og-title": "한줄의 코드르 .env파일을 교체하세요. 3분이면 가입할 수 있어요.",
+  "og-description": "Infisical은 팀원과 .env파일을 공유하고 연동할 수 있는 심플한 end-to-end 암호화 플렛폼입니다. Node.js, Next.js, Gatsby, Nest.js 와 같은 다양한 플렛폼에서 작동해요.",
+  "signup": "회원가입",
+  "already-have-account": "이미 계정이 있나요? 로그인하기",
+  "forgot-password": "비밀번호를 잊으셨나요?",
+  "verify": "인증",
+  "step1-start": "시작하기",
+  "step1-privacy": "회원가입시 약관과 개인 정보 보호 정책을 읽고 동의한 것으로 간주합니다.",
+  "step1-submit": "시작하기",
+  "step2-message": "<email>{{email}}</email><wrapper>로 인증 메일을 전송하였습니다</wrapper><email>{{email}}</email>",
+  "step2-code-error": "코드가 잘못된 것 같아요. 남은 시도:",
+  "step2-spam-alert": "스팸함에 메일이 있지는 않은지 확인하세요",
+  "step3-message": "거의다 끝났어요!",
+  "step4-message": "긴급복구 키트 저장하기",
+  "step4-description1": "계정이 잠겼을 경우 비상 키트를 사용하여 로그인할 수 있어요.",
+  "step4-description2": "다운로드 후 안전한 곳에 보관하는 것을 추천합니다.",
+  "step4-description3": "분실시 접근하거나 복구할 수 없는 시크릿 키가 포함되어 있어요.",
+  "step4-download": "PDF 다운로드"
+}

frontend/public/locales/pt-BR/mfa.json

@@ -0,0 +1,21 @@
+{
+  "title": "Inscrever-se",
+  "og-title": "Substitua os arquivos .env por 1 linha de código. Cadastre-se no Infisical em 3 minutos.",
+  "og-description": "Infisical é uma plataforma criptografada de ponta a ponta simples que permite que as equipes sincronizem e gerenciem chaves de API e variáveis ambientais. Funciona com Node.js, Next.js, Gatsby, Nest.js...",
+  "signup": "Inscrever-se",
+  "already-have-account": "Possui uma conta? Conecte-se",
+  "forgot-password": "Esqueceu sua senha?",
+  "verify": "Verificar",
+  "step1-start": "Vamos começar",
+  "step1-privacy": "Ao criar uma conta, você concorda com nossos Termos e leu e reconheceu a Política de Privacidade.",
+  "step1-submit": "Iniciar",
+  "step2-message": "<wrapper>Enviamos um e-mail de verificação para</wrapper><email>{{email}}</email>",
+  "step2-code-error": "Ops. Seu código está errado. Tentativas restantes:",
+  "step2-spam-alert": "Certifique-se de verificar sua caixa de entrada de spam.",
+  "step3-message": "Quase lá!",
+  "step4-message": "Guarde o seu Kit de Emergência",
+  "step4-description1": "Se sua conta for bloqueada, seu Kit de emergência é a única maneira de fazer login.",
+  "step4-description2": "Recomendamos que você faça o download e guarde-o em algum lugar seguro.",
+  "step4-description3": "Ele contém sua chave secreta que não podemos acessar ou recuperar para você se você a perder.",
+  "step4-download": "Baixar PDF"
+}

frontend/public/locales/tr/mfa.json

@@ -0,0 +1,28 @@
+{
+  "title": "Kayıt olun",
+  "og-title": "Tek satır kodla .env dosyalarını değiştirin. 3 dakika içerinde Infisical'a kayıt olun.",
+  "og-description": "Infisical takımların API anahtarlarını ve ortam değişkenlerini yönetmelerini ve senkronize etmelerini sağlayan basit, uçtan uca şifrelenmiş bir platformdur. Node.js, Next.js, Gatsby, Nest.js ve daha fazlası ile çalışır.",
+  "signup": "Kayıt ol",
+  "already-have-account": "Hesabın var mı? Giriş yap",
+  "forgot-password": "Şifreni mi unuttun?",
+  "verify": "Doğrula",
+  "step1-start": "Hadi başlayalım",
+  "step1-privacy": "Hesap oluşturarak, Şartlarımızı ve Gizlilik Politikasını okuyup kabul etmiş olursunuz.",
+  "step1-submit": "Başla",
+  "step2-message": "Şu adrese bir doğrulama maili yolladık",
+  "step2-code-error": "Tüh. Kodun hatalı. Kalan denemeler:",
+  "step2-resend-alert": "Kodu ulaşamadı mı?",
+  "step2-resend-submit": "Tekrar Yolla",
+  "step2-resend-progress": "Tekrar yollanıyor...",
+  "step2-spam-alert": "Spam kutunuzu kontrol ettiğinizden emin olun.",
+  "step3-message": "Çok az kaldı!",
+  "step4-message": "Acil Durum Kitinizi kayıt edin",
+  "step4-description1": "Eğer hesabınıza erişemezseniz, Acil Durum Kitiniz giriş yapmanın tek yoludur.",
+  "step4-description2": "Bunu indirmenizi ve güvenli bir ortamda saklamanızı öneriyoruz.",
+  "step4-description3": "Kaybetmeniz durumunda bizim dahi erişemeyeceğimiz veya kurtaramayacağımız Gizli Anahtarınızı barındırır.",
+  "step4-download": "PDF'yi indir",
+  "step5-send-invites": "Davetleri yolla",
+  "step5-invite-team": "Takımını davet et",
+  "step5-subtitle": "Infisical takım arkadaşlarınız ile kullanılmak üzere yapılmıştır. Birlikte test etmek için onları davet edin.",
+  "step5-skip": "Atla"
+}

frontend/src/components/login/MFAStep.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 
 import attemptLoginMfa from '@app/components/utilities/attemptLoginMfa';
+import { getTranslatedStaticProps } from '@app/components/utilities/withTranslateProps';
 import { useSendMfaToken } from '@app/hooks/api/auth';
 
 import Button from '../basic/buttons/Button';
@@ -60,12 +61,12 @@ export default function MFAStep({
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [mfaCode, setMfaCode] = useState('');
-  const [codeError, setCodeError] = useState(false);
-
-  const sendMfaToken = useSendMfaToken();
+  const [triesLeft, setTriesLeft] = useState<number | undefined>(undefined);
 
   const { t } = useTranslation();
 
+  const sendMfaToken = useSendMfaToken();
+
   const handleLoginMfa = async () => {
     try {
       if (mfaCode.length !== 6) {
@@ -89,13 +90,14 @@ export default function MFAStep({
       
       if (error?.response?.status === 500) {
         window.location.reload();
-      } else if (error?.response?.data?.context?.triesLeft === 0) {
-        window.location.reload();
-        router.push('/login'); 
+      } else if (error?.response?.data?.context?.triesLeft) {
+        setTriesLeft(error?.response?.data?.context?.triesLeft);
+        if (error.response.data.context.triesLeft === 0) {
+          window.location.reload();
+        }
       }
 
       setIsLoading(false);
-      setCodeError(true);
     }
   }
   
@@ -109,7 +111,7 @@ export default function MFAStep({
 
   return (
     <form className="bg-bunker w-max mx-auto h-7/12 pt-10 pb-4 px-8 rounded-xl drop-shadow-xl mb-64 md:mb-16">
-      <p className="text-l flex justify-center text-bunker-300">{t('signup:step2-message')}</p>
+      <p className="text-l flex justify-center text-bunker-300">{t('mfa:step2-message')}</p>
       <p className="text-l flex justify-center font-semibold my-2 text-bunker-300">{email} </p>
       <div className="hidden md:block">
         <ReactCodeInput
@@ -122,17 +124,17 @@ export default function MFAStep({
           className="mt-6 mb-2"
         />
       </div>
-      {codeError && <Error text={t('signup:step2-code-error')} />}
+      {typeof triesLeft === 'number' && <Error text={`${t('mfa:step2-code-error')} ${triesLeft}`} />}
       <div className="flex max-w-max min-w-28 flex-col items-center justify-center md:p-2 max-h-24 mx-auto text-lg px-4 mt-4 mb-2">
         <Button
-          text={t('signup:verify') ?? ''} 
+          text={t('mfa:verify') ?? ''} 
           onButtonPressed={() => handleLoginMfa()} 
           size="lg" 
         />
       </div>
       <div className="flex flex-col items-center justify-center w-full max-h-24 max-w-md mx-auto pt-2">
         <div className="flex flex-row items-baseline gap-1 text-sm">
-          <span className="text-bunker-400">{t('signup:step2-resend-alert')}</span>
+          <span className="text-bunker-400">{t('mfa:step2-resend-alert')}</span>
           <u
             className={`font-normal ${
               isLoading
@@ -142,13 +144,15 @@ export default function MFAStep({
           >
             <button disabled={isLoading} onClick={() => handleResendMfaCode()} type="button">
               {isLoading
-                ? t('signup:step2-resend-progress')
-                : t('signup:step2-resend-submit')}
+                ? t('mfa:step2-resend-progress')
+                : t('mfa:step2-resend-submit')}
             </button>
           </u>
         </div>
-        <p className="text-sm text-bunker-400 pb-2">{t('signup:step2-spam-alert')}</p>
+        <p className="text-sm text-bunker-400 pb-2">{t('mfa:step2-spam-alert')}</p>
       </div>
     </form>
   );
 }
+
+export const getStaticProps = getTranslatedStaticProps(['auth', 'mfa']);

frontend/src/pages/login.tsx

@@ -100,4 +100,4 @@ export default function Login() {
   );
 }
 
-export const getStaticProps = getTranslatedStaticProps(['auth', 'login', 'signup']);
+export const getStaticProps = getTranslatedStaticProps(['auth', 'login', 'mfa']);