From 52fe03ddf986207f3fe33d98689160c8b46c5560 Mon Sep 17 00:00:00 2001
From: Gao Sun <gaosun.dev@gmail.com>
Date: Mon, 26 Jul 2021 23:56:38 +0800
Subject: [PATCH] feat(ui): add create account link

---
 .vscode/settings.json                         |  2 +-
 .../src/components/TextLink/index.module.scss | 12 ++++++++++++
 packages/ui/src/components/TextLink/index.tsx | 19 +++++++++++++++++++
 packages/ui/src/locales/en.json               |  3 ++-
 packages/ui/src/locales/zh-CN.json            |  3 ++-
 .../ui/src/pages/SignIn/index.module.scss     | 10 ++++++++--
 packages/ui/src/pages/SignIn/index.tsx        |  4 ++++
 7 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui/src/components/TextLink/index.module.scss
 create mode 100644 packages/ui/src/components/TextLink/index.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
index a5851c94f..9a629c958 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,7 +11,7 @@
   ],
   "eslint.workingDirectories": [
     {
-      "pattern": "./packages/*/"
+      "pattern": "./packages/*"
     }
   ]
 }
diff --git a/packages/ui/src/components/TextLink/index.module.scss b/packages/ui/src/components/TextLink/index.module.scss
new file mode 100644
index 000000000..21d8fcaf7
--- /dev/null
+++ b/packages/ui/src/components/TextLink/index.module.scss
@@ -0,0 +1,12 @@
+@use '/src/scss/underscore' as _;
+
+.link {
+  color: var(--color-button-background);
+  font: var(--font-body-bold);
+  transition: var(--transition-default-control);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-button-background-hover);
+  }
+}
diff --git a/packages/ui/src/components/TextLink/index.tsx b/packages/ui/src/components/TextLink/index.tsx
new file mode 100644
index 000000000..e8dd33137
--- /dev/null
+++ b/packages/ui/src/components/TextLink/index.tsx
@@ -0,0 +1,19 @@
+import React, { ReactChildren } from 'react';
+import classNames from 'classnames';
+import styles from './index.module.scss';
+
+export type Props = {
+  className?: string;
+  children: ReactChildren;
+  href: string;
+};
+
+const TextLink = ({ className, children, href }: Props) => {
+  return (
+    <a className={classNames(styles.link, className)} href={href}>
+      {children}
+    </a>
+  );
+};
+
+export default TextLink;
diff --git a/packages/ui/src/locales/en.json b/packages/ui/src/locales/en.json
index 8b9accaa3..d6e28811b 100644
--- a/packages/ui/src/locales/en.json
+++ b/packages/ui/src/locales/en.json
@@ -4,6 +4,7 @@
     "sign_in.loading": "Signing in...",
     "sign_in.error": "Username or password is invalid.",
     "sign_in.username": "Username",
-    "sign_in.password": "Password"
+    "sign_in.password": "Password",
+    "register.create_account": "Create an Account"
   }
 }
diff --git a/packages/ui/src/locales/zh-CN.json b/packages/ui/src/locales/zh-CN.json
index f241078b9..31cae0138 100644
--- a/packages/ui/src/locales/zh-CN.json
+++ b/packages/ui/src/locales/zh-CN.json
@@ -4,6 +4,7 @@
     "sign_in.loading": "登录中...",
     "sign_in.error": "用户名或密码错误。",
     "sign_in.username": "用户名",
-    "sign_in.password": "密码"
+    "sign_in.password": "密码",
+    "register.create_account": "新用户注册"
   }
 }
diff --git a/packages/ui/src/pages/SignIn/index.module.scss b/packages/ui/src/pages/SignIn/index.module.scss
index 3d33b4184..0d598fb02 100644
--- a/packages/ui/src/pages/SignIn/index.module.scss
+++ b/packages/ui/src/pages/SignIn/index.module.scss
@@ -1,6 +1,7 @@
 @use '/src/scss/underscore' as _;
 
 .wrapper {
+  position: relative;
   padding: _.unit(8);
   display: flex;
   flex-direction: column;
@@ -18,8 +19,8 @@
     margin-bottom: _.unit(-6);
   }
 
-  > input:not([type='button']),
-  .box {
+  .box,
+  > input:not([type='button']) {
     margin-top: _.unit(3);
     width: 100%;
     max-width: 320px;
@@ -28,4 +29,9 @@
   > input[type='button'] {
     margin-top: _.unit(12);
   }
+
+  .createAccount {
+    position: absolute;
+    bottom: _.unit(10);
+  }
 }
diff --git a/packages/ui/src/pages/SignIn/index.tsx b/packages/ui/src/pages/SignIn/index.tsx
index 398776955..139f15a6e 100644
--- a/packages/ui/src/pages/SignIn/index.tsx
+++ b/packages/ui/src/pages/SignIn/index.tsx
@@ -2,6 +2,7 @@ import { signInBasic } from '@/apis/sign-in';
 import Button from '@/components/Button';
 import Input from '@/components/Input';
 import MessageBox from '@/components/MessageBox';
+import TextLink from '@/components/TextLink';
 import React, { FormEventHandler, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './index.module.scss';
@@ -52,6 +53,9 @@ const Home = () => {
         value={isLoading ? t('sign_in.loading') : t('sign_in')}
         onClick={signIn}
       />
+      <TextLink className={styles.createAccount} href="/register">
+        {t('register.create_account')}
+      </TextLink>
     </form>
   );
 };