- {isPrimary ? Primary email : Email}
+ {isPrimary ? (
+ {t("frontend.user_email.primary_email")}
+ ) : (
+ {t("frontend.user_email.email")}
+ )}
{data.email}
@@ -170,14 +183,17 @@ const UserEmail: React.FC<{
disabled={pending}
onClick={onSetPrimaryClick}
>
- Make primary
+ {t("frontend.user_email.make_primary_button")}
)}
{!data.confirmedAt && (
- Unverified |{" "}
+
+ {t("frontend.user_email.unverified")}
+ {" "}
+ |{" "}
- Retry verification
+ {t("frontend.user_email.retry_button")}
)}
diff --git a/frontend/src/components/UserGreeting.tsx b/frontend/src/components/UserGreeting.tsx
index 1b414c964..db5ee77f1 100644
--- a/frontend/src/components/UserGreeting.tsx
+++ b/frontend/src/components/UserGreeting.tsx
@@ -16,6 +16,7 @@ import { Heading, Body, Avatar } from "@vector-im/compound-web";
import { useAtomValue } from "jotai";
import { atomFamily } from "jotai/utils";
import { atomWithQuery } from "jotai-urql";
+import { useTranslation } from "react-i18next";
import { graphql } from "../gql";
@@ -48,6 +49,7 @@ export const userGreetingFamily = atomFamily((userId: string) => {
const UserGreeting: React.FC<{ userId: string }> = ({ userId }) => {
const result = useAtomValue(userGreetingFamily(userId));
+ const { t } = useTranslation();
if (result.data?.user) {
const user = result.data.user;
@@ -71,7 +73,7 @@ const UserGreeting: React.FC<{ userId: string }> = ({ userId }) => {
);
}
- return <>Failed to load user;
+ return <>{t("frontend.user_greeting.error")};
};
export default UserGreeting;
diff --git a/frontend/src/components/UserProfile/AddEmailForm.tsx b/frontend/src/components/UserProfile/AddEmailForm.tsx
index 600e2100e..1b171a31f 100644
--- a/frontend/src/components/UserProfile/AddEmailForm.tsx
+++ b/frontend/src/components/UserProfile/AddEmailForm.tsx
@@ -23,6 +23,7 @@ import {
import { useAtom } from "jotai";
import { atomWithMutation } from "jotai-urql";
import { useRef, useTransition } from "react";
+import { useTranslation } from "react-i18next";
import { graphql } from "../../gql";
@@ -49,6 +50,7 @@ const AddEmailForm: React.FC<{
const fieldRef = useRef
(null);
const [addEmailResult, addEmail] = useAtom(addUserEmailAtom);
const [pending, startTransition] = useTransition();
+ const { t } = useTranslation();
const handleSubmit = (e: React.FormEvent): void => {
e.preventDefault();
@@ -87,20 +89,29 @@ const AddEmailForm: React.FC<{
<>
{emailExists && (
-
- The entered email is already added to this account
+
+ {t("frontend.add_email_form.email_exists_alert.text")}
)}
{emailInvalid && (
-
- The entered email is invalid
+
+ {t("frontend.add_email_form.email_invalid_alert.text")}
)}
{emailDenied && (
-
- The entered email is not allowed by the server policy.
+
+ {t("frontend.add_email_form.email_denied_alert.text")}
{violations.map((violation, index) => (
- • {violation}
@@ -110,11 +121,11 @@ const AddEmailForm: React.FC<{
)}
-
+
- Add
+ {t("common.add")}
diff --git a/frontend/src/components/UserProfile/UserEmailList.tsx b/frontend/src/components/UserProfile/UserEmailList.tsx
index 55c2f42c3..8bfa6ad3f 100644
--- a/frontend/src/components/UserProfile/UserEmailList.tsx
+++ b/frontend/src/components/UserProfile/UserEmailList.tsx
@@ -17,6 +17,7 @@ import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
import { atomFamily } from "jotai/utils";
import { atomWithQuery } from "jotai-urql";
import { useTransition } from "react";
+import { useTranslation } from "react-i18next";
import { graphql } from "../../gql";
import { PageInfo } from "../../gql/graphql";
@@ -135,6 +136,7 @@ const UserEmailList: React.FC<{
const [primaryEmailId, refreshPrimaryEmailId] = useAtom(
primaryEmailIdFamily(userId),
);
+ const { t } = useTranslation();
const paginate = (pagination: Pagination): void => {
startTransition(() => {
@@ -159,9 +161,12 @@ const UserEmailList: React.FC<{
return (
- Emails
+ {t("frontend.user_email_list.heading")}
{showNoPrimaryEmailAlert && (
-
+
)}
{result.data?.user?.emails?.edges?.map((edge) => (
= ({ userId }) => {
const [fieldValue, setFieldValue] = useState(displayName);
const userGreeting = useSetAtom(userGreetingFamily(userId));
+ const { t } = useTranslation();
useEffect(() => {
setFieldValue(displayName);
@@ -131,7 +133,7 @@ const UserName: React.FC<{ userId: string }> = ({ userId }) => {
return (
-
+
= ({ userId }) => {
/>
{!inProgress && errorMessage && (
-
+
{errorMessage}
)}
@@ -152,7 +154,8 @@ const UserName: React.FC<{ userId: string }> = ({ userId }) => {
size="sm"
type="submit"
>
- {!!inProgress && }Save
+ {!!inProgress && }
+ {t("action.save")}
);
diff --git a/frontend/src/components/UserSessionsOverview/AppSessionsList.tsx b/frontend/src/components/UserSessionsOverview/AppSessionsList.tsx
index 9684d4350..a4c879db8 100644
--- a/frontend/src/components/UserSessionsOverview/AppSessionsList.tsx
+++ b/frontend/src/components/UserSessionsOverview/AppSessionsList.tsx
@@ -17,6 +17,7 @@ import { atom, useAtomValue, useSetAtom } from "jotai";
import { atomFamily } from "jotai/utils";
import { atomWithQuery } from "jotai-urql";
import { useTransition } from "react";
+import { useTranslation } from "react-i18next";
import { mapQueryAtom } from "../../atoms";
import { graphql } from "../../gql";
@@ -120,9 +121,10 @@ const AppSessionsList: React.FC<{ userId: string }> = ({ userId }) => {
const result = useAtomValue(appSessionListFamily(userId));
const setPagination = useSetAtom(currentPaginationAtom);
const [prevPage, nextPage] = useAtomValue(paginationFamily(userId));
+ const { t } = useTranslation();
const appSessions = unwrap(result);
- if (!appSessions) return <>Failed to load app sessions;
+ if (!appSessions) return <>{t("frontend.app_sessions_list.error")};
const paginate = (pagination: Pagination): void => {
startTransition(() => {
@@ -133,7 +135,7 @@ const AppSessionsList: React.FC<{ userId: string }> = ({ userId }) => {
return (
- Apps
+ {t("frontend.app_sessions_list.heading")}
{appSessions.edges.map((session) => {
const type = session.node.__typename;
diff --git a/frontend/src/components/UserSessionsOverview/BrowserSessionsOverview.tsx b/frontend/src/components/UserSessionsOverview/BrowserSessionsOverview.tsx
index dfd56a5f4..c0d8951b5 100644
--- a/frontend/src/components/UserSessionsOverview/BrowserSessionsOverview.tsx
+++ b/frontend/src/components/UserSessionsOverview/BrowserSessionsOverview.tsx
@@ -13,6 +13,7 @@
// limitations under the License.
import { Body, H5 } from "@vector-im/compound-web";
+import { useTranslation } from "react-i18next";
import { FragmentType, graphql, useFragment } from "../../gql";
import { Link } from "../../routing";
@@ -34,22 +35,20 @@ const BrowserSessionsOverview: React.FC<{
user: FragmentType;
}> = ({ user }) => {
const data = useFragment(FRAGMENT, user);
-
- // allow this until we get i18n
- const pluraliseSession = (count: number): string =>
- count === 1 ? "session" : "sessions";
+ const { t } = useTranslation();
return (
-
Browsers
+ {t("frontend.browser_sessions_overview.heading")}
- {data.browserSessions.totalCount} active{" "}
- {pluraliseSession(data.browserSessions.totalCount)}
+ {t("frontend.browser_sessions_overview.body", {
+ count: data.browserSessions.totalCount,
+ })}
- View all
+ {t("frontend.browser_sessions_overview.view_all_button")}
);
diff --git a/frontend/src/components/UserSessionsOverview/UserSessionsOverview.tsx b/frontend/src/components/UserSessionsOverview/UserSessionsOverview.tsx
index c2a30728c..b66a0297c 100644
--- a/frontend/src/components/UserSessionsOverview/UserSessionsOverview.tsx
+++ b/frontend/src/components/UserSessionsOverview/UserSessionsOverview.tsx
@@ -13,6 +13,7 @@
// limitations under the License.
import { H3 } from "@vector-im/compound-web";
+import { useTranslation } from "react-i18next";
import { FragmentType, useFragment } from "../../gql";
import BlockList from "../BlockList";
@@ -24,10 +25,11 @@ const UserSessionsOverview: React.FC<{
user: FragmentType;
}> = ({ user }) => {
const data = useFragment(FRAGMENT, user);
+ const { t } = useTranslation();
return (
- Where you're signed in
+ {t("frontend.user_sessions_overview.heading")}
diff --git a/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap b/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap
index 357c046ff..c3d224c4d 100644
--- a/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap
+++ b/frontend/src/components/UserSessionsOverview/__snapshots__/BrowserSessionsOverview.test.tsx.snap
@@ -16,10 +16,7 @@ exports[`BrowserSessionsOverview > renders with no browser sessions 1`] = `
- 0
- active
-
- sessions
+ 0 active sessions