reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add multi-lang

Browse Source
This commit is contained in:
reya
2024-01-29 09:12:44 +07:00
parent 59435ccd13
commit 25ae4f2201
19 changed files with 256 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
apps/desktop/src/routes/auth/create-address.tsx
View File

@@ -14,6 +14,7 @@ import { Window } from "@tauri-apps/api/window";
import { useSetAtom } from "jotai";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useLoaderData, useNavigate } from "react-router-dom";
import { toast } from "sonner";
@@ -43,6 +44,7 @@ export function CreateAccountAddress() {
const [serviceId, setServiceId] = useState(services?.[0]?.id);
const [loading, setIsLoading] = useState(false);
const { t } = useTranslation();
const {
register,
handleSubmit,
@@ -156,7 +158,7 @@ export function CreateAccountAddress() {
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
<div className="flex flex-col gap-1 text-center items-center">
<h1 className="text-2xl font-semibold">
Let's set up your account on Nostr
{t("signupWithProvider.title")}
</h1>
</div>
{!services ? (
@@ -174,7 +176,7 @@ export function CreateAccountAddress() {
htmlFor="username"
className="text-sm font-semibold uppercase text-neutral-600"
>
Username *
{t("signupWithProvider.username")}
</label>
<div className="flex flex-col gap-1.5">
<div className="flex items-center justify-between w-full gap-2 bg-neutral-900 rounded-xl">
@@ -203,7 +205,7 @@ export function CreateAccountAddress() {
<Select.Viewport className="p-3">
<Select.Group>
<Select.Label className="mb-2 text-sm font-medium uppercase px-7 text-neutral-600">
Choose a Provider
{t("signupWithProvider.chooseProvider")}
</Select.Label>
{services.map((service) => (
<Item key={service.id} event={service} />
@@ -215,8 +217,7 @@ export function CreateAccountAddress() {
</Select.Root>
</div>
<span className="text-sm text-neutral-600">
Use to login to Lume and other Nostr apps. You can choose
provider you trust to manage your account
{t("signupWithProvider.usernameFooter")}
</span>
</div>
</div>
@@ -226,7 +227,7 @@ export function CreateAccountAddress() {
htmlFor="email"
className="text-sm font-semibold uppercase text-neutral-600"
>
Backup Email (optional)
{t("signupWithProvider.email")}
</label>
<input
type={"email"}
@@ -238,7 +239,7 @@ export function CreateAccountAddress() {
/>
</div>
<span className="text-sm text-neutral-600">
Use for recover your account if you lose your password
{t("signupWithProvider.emailFooter")}
</span>
</div>
</div>
@@ -251,7 +252,7 @@ export function CreateAccountAddress() {
{loading ? (
<LoaderIcon className="size-5 animate-spin" />
) : (
"Continue"
t("global.continue")
)}
</button>
</div>

15
apps/desktop/src/routes/auth/create-keys.tsx
View File

@@ -11,6 +11,7 @@ import { useSetAtom } from "jotai";
import { nanoid } from "nanoid";
import { getPublicKey, nip19 } from "nostr-tools";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
@@ -20,6 +21,7 @@ export function CreateAccountKeys() {
const setOnboarding = useSetAtom(onboardingAtom);
const navigate = useNavigate();
const [t] = useTranslation();
const [key, setKey] = useState("");
const [loading, setLoading] = useState(false);
const [showKey, setShowKey] = useState(false);
@@ -76,11 +78,10 @@ export function CreateAccountKeys() {
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
<div className="flex flex-col gap-1 text-center items-center">
<h1 className="text-2xl font-semibold">
This is your new Account Key
{t("signupWithSelfManage.title")}
</h1>
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
Keep your key in safe place. If you lose this key, you will lose
access to your account.
{t("signupWithSelfManage.subtitle")}
</p>
</div>
<div className="flex flex-col gap-6 mb-0">
@@ -122,7 +123,7 @@ export function CreateAccountKeys() {
className="text-sm leading-none text-neutral-500"
htmlFor="confirm1"
>
I understand the risk of lost private key.
{t("signupWithSelfManage.confirm1")}
</label>
</div>
<div className="flex items-center gap-2">
@@ -142,7 +143,7 @@ export function CreateAccountKeys() {
className="text-sm leading-none text-neutral-500"
htmlFor="confirm2"
>
I will make sure keep it safe and not sharing with anyone.
{t("signupWithSelfManage.confirm2")}
</label>
</div>
<div className="flex items-center gap-2">
@@ -162,7 +163,7 @@ export function CreateAccountKeys() {
className="text-sm leading-none text-neutral-500"
htmlFor="confirm3"
>
I understand I cannot recover private key.
{t("signupWithSelfManage.confirm3")}
</label>
</div>
</div>
@@ -176,7 +177,7 @@ export function CreateAccountKeys() {
{loading ? (
<LoaderIcon className="size-5 animate-spin" />
) : (
"Save key & Continue"
t("signupWithSelfManage.button")
)}
</button>
</div>

18
apps/desktop/src/routes/auth/create.tsx
View File

@@ -1,11 +1,13 @@
import { LoaderIcon } from "@lume/icons";
import { cn } from "@lume/utils";
import { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
export function CreateAccountScreen() {
const navigate = useNavigate();
const [t] = useTranslation();
const [method, setMethod] = useState<"self" | "managed">("self");
const [loading, setLoading] = useState(false);
@@ -23,9 +25,9 @@ export function CreateAccountScreen() {
<div className="relative flex items-center justify-center w-full h-full">
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
<div className="flex flex-col gap-1 text-center items-center">
<h1 className="text-2xl font-semibold">Let's Get Started</h1>
<h1 className="text-2xl font-semibold">{t("signup.title")}</h1>
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
Choose one of methods below to create your account
{t("signup.subtitle")}
</p>
</div>
<div className="flex flex-col gap-4">
@@ -37,9 +39,9 @@ export function CreateAccountScreen() {
method === "self" ? "ring-1 ring-teal-500" : "",
)}
>
<p className="font-semibold">Self-Managed</p>
<p className="font-semibold">{t("signup.selfManageMethod")}</p>
<p className="text-sm font-medium text-neutral-500">
You create your keys and keep them safe.
{t("signup.selfManageMethodDescription")}
</p>
</button>
<button
@@ -50,9 +52,9 @@ export function CreateAccountScreen() {
method === "managed" ? "ring-1 ring-teal-500" : "",
)}
>
<p className="font-semibold">Managed by Provider</p>
<p className="font-semibold">{t("signup.providerMethod")}</p>
<p className="text-sm font-medium text-neutral-500">
A 3rd party provider will handle your sign in keys for you.
{t("signup.providerMethodDescription")}
</p>
</button>
<button
@@ -63,7 +65,7 @@ export function CreateAccountScreen() {
{loading ? (
<LoaderIcon className="size-5 animate-spin" />
) : (
"Continue"
t("global.continue")
)}
</button>
</div>

21
apps/desktop/src/routes/auth/login-key.tsx
View File

@@ -4,6 +4,7 @@ import { useStorage } from "@lume/storage";
import { getPublicKey, nip19 } from "nostr-tools";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { Trans, useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
@@ -15,6 +16,7 @@ export function LoginWithKey() {
const [showKey, setShowKey] = useState(false);
const [loading, setLoading] = useState(false);
const { t } = useTranslation("loginWithPrivkey.subtitle");
const {
register,
handleSubmit,
@@ -52,9 +54,14 @@ export function LoginWithKey() {
<div className="relative flex items-center justify-center w-full h-full">
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
<div className="flex flex-col gap-1 text-center items-center">
<h1 className="text-2xl font-semibold">Enter your Private Key</h1>
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
Lume will put your private key to{" "}
<h1 className="text-2xl font-semibold">
{t("loginWithPrivkey.title")}
</h1>
<Trans
t={t}
className="text-lg font-medium whitespace-pre-line leading-snug text-neutral-600 dark:text-neutral-500"
>
Lume will put your private key to
<span className="text-teal-500">
{storage.platform === "macos"
? "Apple Keychain"
@@ -62,10 +69,8 @@ export function LoginWithKey() {
? "Credential Manager"
: "Secret Service"}
</span>
.
<br />
It will be secured by your OS.
</p>
. It will be secured by your OS.
</Trans>
</div>
<div className="flex flex-col gap-6">
<form
@@ -107,7 +112,7 @@ export function LoginWithKey() {
{loading ? (
<LoaderIcon className="size-5 animate-spin" />
) : (
"Continue"
t("global.continue")
)}
</button>
</form>

6
apps/desktop/src/routes/auth/login-nsecbunker.tsx
View File

@@ -5,6 +5,7 @@ import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
import { nip19 } from "nostr-tools";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
@@ -15,6 +16,7 @@ export function LoginWithNsecbunker() {
const [loading, setLoading] = useState(false);
const { t } = useTranslation();
const {
register,
handleSubmit,
@@ -69,7 +71,7 @@ export function LoginWithNsecbunker() {
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
<div className="flex flex-col gap-1 text-center items-center">
<h1 className="text-2xl font-semibold">
Enter your nsecbunker token
{t("loginWithBunker.title")}
</h1>
</div>
<div className="flex flex-col gap-6">
@@ -101,7 +103,7 @@ export function LoginWithNsecbunker() {
{loading ? (
<LoaderIcon className="size-5 animate-spin" />
) : (
"Continue"
t("global.continue")
)}
</button>
</form>

8
apps/desktop/src/routes/auth/login-oauth.tsx
View File

@@ -7,6 +7,7 @@ import { Window } from "@tauri-apps/api/window";
import { fetch } from "@tauri-apps/plugin-http";
import { useState } from "react";
import { useForm } from "react-hook-form";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
@@ -19,6 +20,7 @@ export function LoginWithOAuth() {
const [loading, setLoading] = useState(false);
const { t } = useTranslation();
const {
register,
handleSubmit,
@@ -130,7 +132,9 @@ export function LoginWithOAuth() {
<div className="relative flex items-center justify-center w-full h-full">
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
<div className="flex flex-col gap-1 text-center items-center">
<h1 className="text-2xl font-semibold">Enter your Nostr Address</h1>
<h1 className="text-2xl font-semibold">
{t("loginWithAddress.title")}
</h1>
</div>
<div className="flex flex-col gap-6">
<form
@@ -161,7 +165,7 @@ export function LoginWithOAuth() {
{loading ? (
<LoaderIcon className="size-5 animate-spin" />
) : (
"Continue"
t("global.continue")
)}
</button>
</form>

13
apps/desktop/src/routes/auth/login.tsx
View File

@@ -1,11 +1,14 @@
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
export function LoginScreen() {
const { t } = useTranslation();
return (
<div className="relative flex items-center justify-center w-full h-full">
<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
<div className="flex flex-col gap-1 text-center items-center">
<h1 className="text-2xl font-semibold">Welcome back, anon!</h1>
<h1 className="text-2xl font-semibold">{t("login.title")}</h1>
</div>
<div className="flex flex-col gap-6">
<div className="flex flex-col gap-2">
@@ -13,13 +16,13 @@ export function LoginScreen() {
to="/auth/login-oauth"
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
>
Login with Nostr Address
{t("login.loginWithAddress")}
</Link>
<Link
to="/auth/login-nsecbunker"
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
>
Login with nsecBunker
{t("login.loginWithBunker")}
</Link>
</div>
<div className="flex flex-col gap-6">
@@ -29,7 +32,7 @@ export function LoginScreen() {
</div>
<div className="relative flex justify-center">
<span className="px-2 font-medium bg-black text-neutral-600">
Or continue with
{t("login.or")}
</span>
</div>
</div>
@@ -38,7 +41,7 @@ export function LoginScreen() {
to="/auth/login-key"
className="mb-2 inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
>
Login with Private Key
{t("login.loginWithPrivkey")}
</Link>
<p className="text-sm text-center text-neutral-500">
Lume will put your Private Key in{" "}

32
apps/desktop/src/routes/auth/onboarding.tsx
View File

@@ -8,6 +8,7 @@ import {
requestPermission,
} from "@tauri-apps/plugin-notification";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
@@ -16,6 +17,7 @@ export function OnboardingScreen() {
const storage = useStorage();
const navigate = useNavigate();
const [t] = useTranslation();
const [loading, setLoading] = useState(false);
const [apiKey, setAPIKey] = useState("");
const [settings, setSettings] = useState({
@@ -91,10 +93,10 @@ export function OnboardingScreen() {
<div className="mx-auto flex w-full max-w-md flex-col gap-8">
<div className="flex flex-col gap-1 text-center items-center">
<h1 className="text-2xl font-semibold">
You&apos;re almost ready to use Lume.
{t("onboardingSettings.title")}
</h1>
<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
Let&apos;s start personalizing your experience.
{t("onboardingSettings.subtitle")}
</p>
</div>
<div className="flex flex-col gap-3">
@@ -107,10 +109,11 @@ export function OnboardingScreen() {
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
</Switch.Root>
<div>
<h3 className="font-semibold text-lg">Push notification</h3>
<h3 className="font-semibold text-lg">
{t("onboardingSettings.notification.title")}
</h3>
<p className="text-neutral-500">
Enabling push notifications will allow you to receive
notifications from Lume.
{t("onboardingSettings.notification.subtitle")}
</p>
</div>
</div>
@@ -123,10 +126,11 @@ export function OnboardingScreen() {
<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
</Switch.Root>
<div>
<h3 className="font-semibold text-lg">Low Power Mode</h3>
<h3 className="font-semibold text-lg">
{t("onboardingSettings.lowPower.title")}
</h3>
<p className="text-neutral-500">
Limited relay connection and hide all media, sustainable for low
network environment.
{t("onboardingSettings.lowPower.subtitle")}
</p>
</div>
</div>
@@ -140,11 +144,10 @@ export function OnboardingScreen() {
</Switch.Root>
<div>
<h3 className="font-semibold text-lg">
Translation (nostr.wine)
{t("onboardingSettings.translation.title")}
</h3>
<p className="text-neutral-500">
Translate text to your preferred language, powered by Nostr
Wine.
{t("onboardingSettings.translation.subtitle")}
</p>
</div>
</div>
@@ -175,10 +178,7 @@ export function OnboardingScreen() {
) : null}
<div className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm bg-blue-950 text-blue-300">
<InfoIcon className="size-8" />
<p>
There are many more settings you can configure from the
&quot;Settings&quot; screen. Be sure to visit it later.
</p>
<p>{t("onboardingSettings.footer")}</p>
</div>
<button
type="button"
@@ -188,7 +188,7 @@ export function OnboardingScreen() {
{loading ? (
<LoaderIcon className="size-5 animate-spin" />
) : (
"Continue"
t("global.continue")
)}
</button>
</div>

15
apps/desktop/src/routes/auth/welcome.tsx
View File

@@ -1,6 +1,9 @@
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";
export function WelcomeScreen() {
const { t } = useTranslation();
return (
<div className="flex flex-col items-center justify-between w-full h-full">
<div />
@@ -12,10 +15,8 @@ export function WelcomeScreen() {
alt="lume"
className="w-2/3"
/>
<p className="mt-5 text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
Lume is a magnificent client for Nostr to meet, explore
<br />
and freely share your thoughts with everyone.
<p className="mt-5 text-lg whitespace-pre-line font-medium leading-snug text-neutral-600 dark:text-neutral-500">
{t("welcome.title")}
</p>
</div>
<div className="flex flex-col w-full max-w-xs gap-2 mx-auto">
@@ -23,19 +24,19 @@ export function WelcomeScreen() {
to="/auth/create"
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
>
Join Nostr
{t("welcome.signup")}
</Link>
<Link
to="/auth/login"
className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
>
Login
{t("welcome.login")}
</Link>
</div>
</div>
<div className="flex items-center justify-center h-11">
<p className="text-neutral-700">
Before joining Nostr, you can take time to learn more about Nostr{" "}
{t("welcome.footer")}{" "}
<Link
to="https://nostr.com"
target="_blank"