From 1217bae7eeada8325a5a2c88a05872f711174bc4 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
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.</0>",
+    "createAccount": "Dont have an account yet? <0>Create an account.</0>",
     "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 (
-    <div className="flex justify-center mt-12">
-      <div className="mx-auto inline-grid grid-cols-1 gap-3 justify-center items-center">
+    <div className="mt-12">
+      <div
+        className={classNames("mx-auto", {
+          "flex flex-row-reverse justify-between items-center":
+            props.splitAlign,
+          "flex max-w-xs flex-col-reverse gap-3": !props.splitAlign,
+        })}
+      >
         {props.children}
       </div>
     </div>
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 = (
+    <span className="group mt-1 cursor-pointer font-bold text-type-link hover:text-type-linkHover active:scale-95">
+      {props.children}
+    </span>
+  );
+
+  if (isExternal) return <a href={props.url}>{content}</a>;
+  if (isInternal) return <LinkRouter to={props.to ?? ""}>{content}</LinkRouter>;
+  return (
+    <span onClick={() => props.onClick && props.onClick()}>{content}</span>
+  );
+}
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")}
         </Button>
       </LargeCardButtons>
+      <p className="text-center mt-6">
+        <Trans i18nKey="auth.createAccount">
+          <MwLink to="/register">.</MwLink>
+        </Trans>
+      </p>
     </LargeCard>
   );
 }
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}
       </div>
       <LargeCardButtons>
+        <Button theme="secondary" onClick={() => history.push("/")}>
+          {t("auth.trust.no")}
+        </Button>
         <Button
           theme="purple"
           onClick={() => result.value && props.onNext?.(result.value)}
         >
           {t("auth.trust.yes")}
         </Button>
-        <Button theme="secondary" onClick={() => history.push("/")}>
-          {t("auth.trust.no")}
-        </Button>
       </LargeCardButtons>
+      <p className="text-center mt-6">
+        <Trans i18nKey="auth.hasAccount">
+          <MwLink to="/login">.</MwLink>
+        </Trans>
+      </p>
     </LargeCard>
   );
 }
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