From 3ab6a018fe37ecd26d5c9fee2f22ff0f44155455 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Sun, 18 Jul 2021 19:21:16 +0800
Subject: [PATCH] feat(sign-in): add message box

---
 .../ui/src/components/AppContent/index.module.scss |  2 ++
 .../ui/src/components/MessageBox/index.module.scss | 13 +++++++++++++
 packages/ui/src/components/MessageBox/index.tsx    | 14 ++++++++++++++
 packages/ui/src/locales/en.json                    |  1 +
 packages/ui/src/locales/zh-CN.json                 |  1 +
 packages/ui/src/pages/Home/index.module.scss       |  7 ++++++-
 packages/ui/src/pages/Home/index.tsx               | 11 +++++++++--
 7 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 packages/ui/src/components/MessageBox/index.module.scss
 create mode 100644 packages/ui/src/components/MessageBox/index.tsx

diff --git a/packages/ui/src/components/AppContent/index.module.scss b/packages/ui/src/components/AppContent/index.module.scss
index 8493a58dd..ccb786ed9 100644
--- a/packages/ui/src/components/AppContent/index.module.scss
+++ b/packages/ui/src/components/AppContent/index.module.scss
@@ -17,6 +17,8 @@
   --color-button-text: #f5f5f5;
   --color-button-text-disabled: #eee;
   --color-error: #ff6b66;
+  --color-error-background: #{rgba(#ff6b66, 0.15)};
+  --color-error-border: #{rgba(#ff6b66, 0.35)};
 
   /* Shadow */
   --shadow-button: 2px 2px 8px rgb(60 76 227 / 25%);
diff --git a/packages/ui/src/components/MessageBox/index.module.scss b/packages/ui/src/components/MessageBox/index.module.scss
new file mode 100644
index 000000000..2c5ec082f
--- /dev/null
+++ b/packages/ui/src/components/MessageBox/index.module.scss
@@ -0,0 +1,13 @@
+@use '/src/scss/underscore' as _;
+
+.messageBox {
+  font: var(--font-body);
+  padding: _.unit(2) _.unit(5);
+  border-radius: _.unit();
+
+  &.error {
+    color: var(--color-error);
+    background: var(--color-error-background);
+    border: 1px solid var(--color-error-border);
+  }
+}
diff --git a/packages/ui/src/components/MessageBox/index.tsx b/packages/ui/src/components/MessageBox/index.tsx
new file mode 100644
index 000000000..cde2b63d1
--- /dev/null
+++ b/packages/ui/src/components/MessageBox/index.tsx
@@ -0,0 +1,14 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+import styles from './index.module.scss';
+
+export type Props = {
+  className?: string;
+  children: ReactNode;
+};
+
+const MessageBox = ({ className, children }: Props) => {
+  return <div className={classNames(styles.messageBox, styles.error, className)}>{children}</div>;
+};
+
+export default MessageBox;
diff --git a/packages/ui/src/locales/en.json b/packages/ui/src/locales/en.json
index c69b77336..800079b63 100644
--- a/packages/ui/src/locales/en.json
+++ b/packages/ui/src/locales/en.json
@@ -2,6 +2,7 @@
   "translation": {
     "sign-in": "Sign In",
     "sign-in.loading": "Signing in...",
+    "sign-in.error": "Username or password invalid.",
     "sign-in.username": "Username",
     "sign-in.password": "Password"
   }
diff --git a/packages/ui/src/locales/zh-CN.json b/packages/ui/src/locales/zh-CN.json
index 1a261a420..caa320b9e 100644
--- a/packages/ui/src/locales/zh-CN.json
+++ b/packages/ui/src/locales/zh-CN.json
@@ -2,6 +2,7 @@
   "translation": {
     "sign-in": "登录",
     "sign-in.loading": "登录中...",
+    "sign-in.error": "用户名或密码错误。",
     "sign-in.username": "用户名",
     "sign-in.password": "密码"
   }
diff --git a/packages/ui/src/pages/Home/index.module.scss b/packages/ui/src/pages/Home/index.module.scss
index 44d21e330..b3accd735 100644
--- a/packages/ui/src/pages/Home/index.module.scss
+++ b/packages/ui/src/pages/Home/index.module.scss
@@ -14,12 +14,17 @@
     margin-bottom: _.unit(9);
   }
 
+  .box {
+    margin-top: _.unit(3);
+    margin-bottom: _.unit(-6);
+  }
+
   > input:not([type='button']) {
     align-self: stretch;
     margin-top: _.unit(3);
   }
 
   > input[type='button'] {
-    margin-top: _.unit(6);
+    margin-top: _.unit(12);
   }
 }
diff --git a/packages/ui/src/pages/Home/index.tsx b/packages/ui/src/pages/Home/index.tsx
index 35ba9fc93..2af88ea1d 100644
--- a/packages/ui/src/pages/Home/index.tsx
+++ b/packages/ui/src/pages/Home/index.tsx
@@ -1,14 +1,18 @@
 import Button from '@/components/Button';
 import Input from '@/components/Input';
+import MessageBox from '@/components/MessageBox';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import styles from './index.module.scss';
 
+export type PageState = 'idle' | 'loading' | 'error';
+
 const Home = () => {
   const { t } = useTranslation();
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
+  const [pageState, setPageState] = useState<PageState>('idle');
+  const isLoading = pageState === 'loading';
 
   return (
     <form className={styles.wrapper}>
@@ -28,11 +32,14 @@ const Home = () => {
         value={password}
         onChange={setPassword}
       />
+      {pageState === 'error' && (
+        <MessageBox className={styles.box}>{t('sign-in.error')}</MessageBox>
+      )}
       <Button
         isDisabled={isLoading}
         value={isLoading ? t('sign-in.loading') : t('sign-in')}
         onClick={() => {
-          setIsLoading(true);
+          setPageState('loading');
         }}
       />
     </form>