Skip to content

Commit

Permalink
chore(frontend): update some files about translate
Browse files Browse the repository at this point in the history
  • Loading branch information
@gangjun06
gangjun06 committed Dec 26, 2022
1 parent 5b8337a commit 991e4b7
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 92 deletions.
4 changes: 2 additions & 2 deletions frontend/components/basic/dialog/AddIncidentContactDialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Fragment, useState } from "react";
import useTranslate from "next-translate/useTranslation";
import { useTranslation } from "next-i18next";
import { Dialog, Transition } from "@headlessui/react";

import addIncidentContact from "~/pages/api/organization/addIncidentContact";
Expand All @@ -15,7 +15,7 @@ const AddIncidentContactDialog = ({
setIncidentContacts,
}) => {
let [incidentContactEmail, setIncidentContactEmail] = useState("");
const { t } = useTranslate();
const { t } = useTranslation();

const submit = () => {
setIncidentContacts(
Expand Down
3 changes: 1 addition & 2 deletions frontend/components/basic/dialog/AddProjectMemberDialog.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Fragment, useState } from "react";
import { useRouter } from "next/router";
import Trans from "next-translate/Trans";
import { useTranslation } from "next-i18next";
import { Trans, useTranslation } from "next-i18next";
import { Dialog, Transition } from "@headlessui/react";

import Button from "../buttons/Button";
Expand Down
88 changes: 55 additions & 33 deletions frontend/pages/login.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,44 @@
import React, { useEffect, useState } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import { useRouter } from 'next/router';
import { faWarning } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useEffect, useState } from "react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { faWarning } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import Button from '~/components/basic/buttons/Button';
import Error from '~/components/basic/Error';
import InputField from '~/components/basic/InputField';
import attemptLogin from '~/utilities/attemptLogin';
import Button from "~/components/basic/buttons/Button";
import Error from "~/components/basic/Error";
import InputField from "~/components/basic/InputField";
import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
import attemptLogin from "~/utilities/attemptLogin";

import getWorkspaces from './api/workspace/getWorkspaces';
import getWorkspaces from "./api/workspace/getWorkspaces";
import ListBox from "~/components/basic/Listbox";

export default function Login() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [errorLogin, setErrorLogin] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
const { t } = useTranslation();
const lang = router.locale ?? "en";

const setLanguage = async (to: string) => {
router.push("/login", "/login", { locale: to });
localStorage.setItem("lang", to);
};

useEffect(() => {
const redirectToDashboard = async () => {
let userWorkspace;
try {
const userWorkspaces = await getWorkspaces();
userWorkspace = userWorkspaces[0]._id;
router.push('/dashboard/' + userWorkspace);
router.push("/dashboard/" + userWorkspace);
} catch (error) {
console.log('Error - Not logged in yet');
console.log("Error - Not logged in yet");
}
};
redirectToDashboard();
Expand All @@ -49,7 +59,7 @@ export default function Login() {
setErrorLogin,
router,
false,
true,
true
).then(() => {
setTimeout(function () {
setIsLoading(false);
Expand All @@ -60,14 +70,11 @@ export default function Login() {
return (
<div className="bg-bunker-800 h-screen flex flex-col justify-start px-6">
<Head>
<title>Login</title>
<title>{t("common:head-title", { title: t("login:title") })}</title>
<link rel="icon" href="/infisical.ico" />
<meta property="og:image" content="/images/message.png" />
<meta property="og:title" content="Log In to Infisical" />
<meta
name="og:description"
content="Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
/>
<meta property="og:title" content={t("login:og-title") ?? ""} />
<meta name="og:description" content={t("login:og-description") ?? ""} />
</Head>
<Link href="/">
<div className="flex justify-center mb-8 mt-20 cursor-pointer">
Expand All @@ -80,15 +87,16 @@ export default function Login() {
</div>
</Link>
<form
onChange={() => setErrorLogin(false)} onSubmit={(e) => e.preventDefault()}
onChange={() => setErrorLogin(false)}
onSubmit={(e) => e.preventDefault()}
>
<div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
<p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
Log in to your account
{t("login:login-to")}
</p>
<div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
<InputField
label="Email"
label={t("common:email")}
onChangeHandler={setEmail}
type="email"
value={email}
Expand All @@ -99,7 +107,7 @@ export default function Login() {
</div>
<div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
<InputField
label="Password"
label={t("common:password")}
onChangeHandler={setPassword}
type="password"
value={password}
Expand All @@ -112,12 +120,14 @@ export default function Login() {
<Link href="/verify-email">Forgot password?</Link>
</div>
</div>
{!isLoading && errorLogin && <Error text="Your email and/or password are wrong." />}
{!isLoading && errorLogin && (
<Error text="Your email and/or password are wrong." />
)}
<div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
<div className="text-l mt-6 m-8 px-8 py-3 text-lg">
<Button
type="submit"
text="Log In"
text={t("login:login") ?? ""}
onButtonPressed={loginCheck}
loading={isLoading}
size="lg"
Expand All @@ -131,21 +141,33 @@ export default function Login() {
{false && (
<div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
<FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
We are experiencing minor technical difficulties. We are working on
solving it right now. Please come back in a few minutes.
{t("common:maintenance-alert")}
</div>
)}
<div className="flex flex-row items-center justify-center md:pb-4 mt-4">
<p className="text-sm flex justify-center text-gray-400 w-max">
Need an Infisical account?
{t("login:need-account")}
</p>
<Link href="/signup">
<button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
Sign up here.
{t("login:create-account")}
</button>
</Link>
</div>
</form>
<div className="mt-4 flex items-center justify-center w-full">
<div className="w-48 mx-auto">
<ListBox
selected={lang}
onChange={setLanguage}
data={["en", "ko"]}
isFull
text={`${t("common:language")}: `}
/>
</div>
</div>
</div>
);
}

export const getStaticProps = getTranslatedStaticProps(["auth", "login"]);
75 changes: 39 additions & 36 deletions frontend/pages/password-reset.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,35 @@
import React, { useState } from 'react';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import React, { useState } from "react";
import Image from "next/image";
import { useRouter } from "next/router";
import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import Button from '~/components/basic/buttons/Button';
import InputField from '~/components/basic/InputField';
import passwordCheck from '~/components/utilities/checks/PasswordCheck';
import Aes256Gcm from '~/components/utilities/cryptography/aes-256-gcm';
import Button from "~/components/basic/buttons/Button";
import InputField from "~/components/basic/InputField";
import passwordCheck from "~/components/utilities/checks/PasswordCheck";
import Aes256Gcm from "~/components/utilities/cryptography/aes-256-gcm";

import EmailVerifyOnPasswordReset from './api/auth/EmailVerifyOnPasswordReset';
import getBackupEncryptedPrivateKey from './api/auth/getBackupEncryptedPrivateKey';
import resetPasswordOnAccountRecovery from './api/auth/resetPasswordOnAccountRecovery';
import EmailVerifyOnPasswordReset from "./api/auth/EmailVerifyOnPasswordReset";
import getBackupEncryptedPrivateKey from "./api/auth/getBackupEncryptedPrivateKey";
import resetPasswordOnAccountRecovery from "./api/auth/resetPasswordOnAccountRecovery";
import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";

const queryString = require('query-string');
const nacl = require('tweetnacl');
const jsrp = require('jsrp');
nacl.util = require('tweetnacl-util');
const queryString = require("query-string");
const nacl = require("tweetnacl");
const jsrp = require("jsrp");
nacl.util = require("tweetnacl-util");
const client = new jsrp.client();

export default function PasswordReset() {
const router = useRouter();
const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
const parsedUrl = queryString.parse(router.asPath.split("?")[1]);
const token = parsedUrl.token;
const email = parsedUrl.to?.replace(' ', '+').trim();
const [verificationToken, setVerificationToken] = useState('');
const email = parsedUrl.to?.replace(" ", "+").trim();
const [verificationToken, setVerificationToken] = useState("");
const [step, setStep] = useState(1);
const [backupKey, setBackupKey] = useState('');
const [privateKey, setPrivateKey] = useState('');
const [newPassword, setNewPassword] = useState('');
const [backupKey, setBackupKey] = useState("");
const [privateKey, setPrivateKey] = useState("");
const [newPassword, setNewPassword] = useState("");
const [backupKeyError, setBackupKeyError] = useState(false);
const [passwordErrorLength, setPasswordErrorLength] = useState(false);
const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
Expand All @@ -43,7 +44,7 @@ export default function PasswordReset() {
ciphertext: result.encryptedPrivateKey,
iv: result.iv,
tag: result.tag,
secret: backupKey
secret: backupKey,
})
);
setStep(3);
Expand All @@ -60,7 +61,7 @@ export default function PasswordReset() {
setPasswordErrorLength,
setPasswordErrorNumber,
setPasswordErrorLowerCase,
currentErrorCheck: errorCheck
currentErrorCheck: errorCheck,
});

if (!errorCheck) {
Expand All @@ -72,14 +73,14 @@ export default function PasswordReset() {
.padStart(
32 +
(newPassword.slice(0, 32).length - new Blob([newPassword]).size),
'0'
)
"0"
),
}) as { ciphertext: string; iv: string; tag: string };

client.init(
{
username: email,
password: newPassword
password: newPassword,
},
async () => {
client.createVerifier(
Expand All @@ -90,12 +91,12 @@ export default function PasswordReset() {
iv,
tag,
salt: result.salt,
verifier: result.verifier
verifier: result.verifier,
});

// if everything works, go the main dashboard page.
if (response?.status === 200) {
router.push('/login');
router.push("/login");
}
}
);
Expand All @@ -122,14 +123,14 @@ export default function PasswordReset() {
onButtonPressed={async () => {
const response = await EmailVerifyOnPasswordReset({
email,
code: token
code: token,
});
if (response.status == 200) {
setVerificationToken((await response.json()).token);
setStep(2);
} else {
console.log('ERROR', response);
router.push('/email-not-verified');
console.log("ERROR", response);
router.push("/email-not-verified");
}
}}
size="lg"
Expand Down Expand Up @@ -195,7 +196,7 @@ export default function PasswordReset() {
setPasswordErrorLength,
setPasswordErrorNumber,
setPasswordErrorLowerCase,
currentErrorCheck: false
currentErrorCheck: false,
});
}}
type="password"
Expand Down Expand Up @@ -224,7 +225,7 @@ export default function PasswordReset() {
)}
<div
className={`${
passwordErrorLength ? 'text-gray-400' : 'text-gray-600'
passwordErrorLength ? "text-gray-400" : "text-gray-600"
} text-sm`}
>
14 characters
Expand All @@ -241,7 +242,7 @@ export default function PasswordReset() {
)}
<div
className={`${
passwordErrorLowerCase ? 'text-gray-400' : 'text-gray-600'
passwordErrorLowerCase ? "text-gray-400" : "text-gray-600"
} text-sm`}
>
1 lowercase character
Expand All @@ -258,7 +259,7 @@ export default function PasswordReset() {
)}
<div
className={`${
passwordErrorNumber ? 'text-gray-400' : 'text-gray-600'
passwordErrorNumber ? "text-gray-400" : "text-gray-600"
} text-sm`}
>
1 number
Expand Down Expand Up @@ -288,3 +289,5 @@ export default function PasswordReset() {
</div>
);
}

export const getServerSideProps = getTranslatedStaticProps([]);
19 changes: 11 additions & 8 deletions frontend/pages/verify-email.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
import React, { useState } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import React, { useState } from "react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";

import Button from '~/components/basic/buttons/Button';
import InputField from '~/components/basic/InputField';
import Button from "~/components/basic/buttons/Button";
import InputField from "~/components/basic/InputField";
import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";

import SendEmailOnPasswordReset from './api/auth/SendEmailOnPasswordReset';
import SendEmailOnPasswordReset from "./api/auth/SendEmailOnPasswordReset";

export default function VerifyEmail() {
const [email, setEmail] = useState('');
const [email, setEmail] = useState("");
const [step, setStep] = useState(1);

/**
Expand Down Expand Up @@ -92,3 +93,5 @@ export default function VerifyEmail() {
</div>
);
}

export const getServerSideProps = getTranslatedStaticProps([]);
Loading

0 comments on commit 991e4b7

Please sign in to comment.