Add back and forth links for register and login

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",

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="mt-12">
-      <div className="mx-auto inline-grid grid-cols-1 gap-3 justify-center items-center">
+      <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>

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>
+  );
+}

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>
   );
 }

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>
   );
 }

themes/default.ts

@@ -63,7 +63,7 @@ export const defaultTheme = {
         secondary: "#64647B",
         danger: "#F46E6E",
         link: "#A87FD1",
-        linkHover: "#A87FD1",
+        linkHover: "#ba8fe6",
       },
 
       // search bar