feat(ui): add create account link

.vscode/settings.json

@@ -11,7 +11,7 @@
   ],
   "eslint.workingDirectories": [
     {
-      "pattern": "./packages/*/"
+      "pattern": "./packages/*"
     }
   ]
 }

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

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;

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

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": "新用户注册"
   }
 }

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

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