From 1217bae7eeada8325a5a2c88a05872f711174bc4 Mon Sep 17 00:00:00 2001 From: mrjvs Date: Thu, 7 Dec 2023 01:52:35 +0100 Subject: [PATCH] Add back and forth links for register and login --- src/assets/locales/en.json | 2 ++ src/components/layout/LargeCard.tsx | 17 ++++++++++++++--- src/components/text/Link.tsx | 23 +++++++++++++++++++++++ src/pages/parts/auth/LoginFormPart.tsx | 8 +++++++- src/pages/parts/auth/TrustBackendPart.tsx | 12 +++++++++--- themes/default.ts | 2 +- 6 files changed, 56 insertions(+), 8 deletions(-) create mode 100644 src/components/text/Link.tsx diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index b84d0804..4d098125 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -2,6 +2,8 @@ "auth": { "deviceNameLabel": "Device name", "deviceNamePlaceholder": "Personal phone", + "hasAccount": "Already have an account? <0>Login here.", + "createAccount": "Dont have an account yet? <0>Create an account.", "register": { "information": { "title": "Account information", diff --git a/src/components/layout/LargeCard.tsx b/src/components/layout/LargeCard.tsx index 2266be3a..dbc010af 100644 --- a/src/components/layout/LargeCard.tsx +++ b/src/components/layout/LargeCard.tsx @@ -1,3 +1,5 @@ +import classNames from "classnames"; + export function LargeCard(props: { children: React.ReactNode; top?: React.ReactNode; @@ -36,10 +38,19 @@ export function LargeCardText(props: { ); } -export function LargeCardButtons(props: { children: React.ReactNode }) { +export function LargeCardButtons(props: { + children: React.ReactNode; + splitAlign?: boolean; +}) { return ( -
-
+
+
{props.children}
diff --git a/src/components/text/Link.tsx b/src/components/text/Link.tsx new file mode 100644 index 00000000..0956b307 --- /dev/null +++ b/src/components/text/Link.tsx @@ -0,0 +1,23 @@ +import { ReactNode } from "react"; +import { Link as LinkRouter } from "react-router-dom"; + +export function MwLink(props: { + children?: ReactNode; + to?: string; + url?: string; + onClick?: () => void; +}) { + const isExternal = !!props.url; + const isInternal = !!props.to; + const content = ( + + {props.children} + + ); + + if (isExternal) return {content}; + if (isInternal) return {content}; + return ( + props.onClick && props.onClick()}>{content} + ); +} diff --git a/src/pages/parts/auth/LoginFormPart.tsx b/src/pages/parts/auth/LoginFormPart.tsx index 82836e74..d87f6e14 100644 --- a/src/pages/parts/auth/LoginFormPart.tsx +++ b/src/pages/parts/auth/LoginFormPart.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { useTranslation } from "react-i18next"; +import { Trans, useTranslation } from "react-i18next"; import { useAsyncFn } from "react-use"; import { verifyValidMnemonic } from "@/backend/accounts/crypto"; @@ -10,6 +10,7 @@ import { LargeCardButtons, LargeCardText, } from "@/components/layout/LargeCard"; +import { MwLink } from "@/components/text/Link"; import { AuthInputBox } from "@/components/text-inputs/AuthInputBox"; import { useAuth } from "@/hooks/auth/useAuth"; import { useBookmarkStore } from "@/stores/bookmarks"; @@ -88,6 +89,11 @@ export function LoginFormPart(props: LoginFormPartProps) { {t("auth.login.submit")} +

+ + . + +

); } diff --git a/src/pages/parts/auth/TrustBackendPart.tsx b/src/pages/parts/auth/TrustBackendPart.tsx index 77a88409..9118eeae 100644 --- a/src/pages/parts/auth/TrustBackendPart.tsx +++ b/src/pages/parts/auth/TrustBackendPart.tsx @@ -12,6 +12,7 @@ import { LargeCardText, } from "@/components/layout/LargeCard"; import { Loading } from "@/components/layout/Loading"; +import { MwLink } from "@/components/text/Link"; import { useBackendUrl } from "@/hooks/auth/useBackendUrl"; import { conf } from "@/setup/config"; @@ -60,16 +61,21 @@ export function TrustBackendPart(props: TrustBackendPartProps) { {cardContent}
+ - +

+ + . + +

); } diff --git a/themes/default.ts b/themes/default.ts index bc855bc4..4f773103 100644 --- a/themes/default.ts +++ b/themes/default.ts @@ -63,7 +63,7 @@ export const defaultTheme = { secondary: "#64647B", danger: "#F46E6E", link: "#A87FD1", - linkHover: "#A87FD1", + linkHover: "#ba8fe6", }, // search bar