From 97b99189c9204995426481a06cd48e0c8e1c6abe Mon Sep 17 00:00:00 2001
From: Gao Sun <gaosun.dev@gmail.com>
Date: Sun, 18 Jul 2021 18:22:44 +0800
Subject: [PATCH] refactor: add disabled to input

---
 .../ui/src/components/AppContent/index.module.scss   |  4 ++++
 packages/ui/src/components/Button/index.module.scss  | 12 ++++++------
 packages/ui/src/components/Button/index.tsx          | 11 ++++-------
 packages/ui/src/components/Input/index.module.scss   |  6 ++++++
 packages/ui/src/components/Input/index.tsx           | 12 +++++++++++-
 packages/ui/src/pages/Home/index.tsx                 |  3 ++-
 6 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/packages/ui/src/components/AppContent/index.module.scss b/packages/ui/src/components/AppContent/index.module.scss
index d398ea509..8493a58dd 100644
--- a/packages/ui/src/components/AppContent/index.module.scss
+++ b/packages/ui/src/components/AppContent/index.module.scss
@@ -20,6 +20,10 @@
 
   /* Shadow */
   --shadow-button: 2px 2px 8px rgb(60 76 227 / 25%);
+
+  /* Transition */
+  --transition-default-function: 0.2s ease-in-out;
+  --transition-default-control: background var(--transition-default-function), color var(--transition-default-function);
 }
 
 .dark {
diff --git a/packages/ui/src/components/Button/index.module.scss b/packages/ui/src/components/Button/index.module.scss
index 57eaf3ed6..3b9839db2 100644
--- a/packages/ui/src/components/Button/index.module.scss
+++ b/packages/ui/src/components/Button/index.module.scss
@@ -11,15 +11,15 @@
   color: var(--color-button-text);
   font: var(--font-heading-3);
   box-shadow: var(--shadow-button);
-  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
+  transition: var(--transition-default-control);
   cursor: pointer;
 
-  &:not(.disabled):hover {
-    background: var(--color-button-background-hover);
-  }
-
-  &.disabled {
+  &:disabled {
     background: var(--color-button-background-disabled);
     color: var(--color-button-text-disabled);
   }
+
+  &:not(:disabled):hover {
+    background: var(--color-button-background-hover);
+  }
 }
diff --git a/packages/ui/src/components/Button/index.tsx b/packages/ui/src/components/Button/index.tsx
index 6bd2b9c98..3ee226b6f 100644
--- a/packages/ui/src/components/Button/index.tsx
+++ b/packages/ui/src/components/Button/index.tsx
@@ -9,17 +9,14 @@ export type Props = {
   onClick?: React.MouseEventHandler;
 };
 
-const Button = ({ isDisabled = false, className, value, onClick }: Props) => {
+const Button = ({ isDisabled, className, value, onClick }: Props) => {
   return (
     <input
-      className={classNames(styles.button, isDisabled && styles.disabled, className)}
+      disabled={isDisabled}
+      className={classNames(styles.button, className)}
       type="button"
       value={value}
-      onClick={(event) => {
-        if (!isDisabled) {
-          onClick?.(event);
-        }
-      }}
+      onClick={onClick}
     />
   );
 };
diff --git a/packages/ui/src/components/Input/index.module.scss b/packages/ui/src/components/Input/index.module.scss
index 81cfe9f61..a6107483b 100644
--- a/packages/ui/src/components/Input/index.module.scss
+++ b/packages/ui/src/components/Input/index.module.scss
@@ -10,8 +10,14 @@
   background: var(--color-control-background);
   color: var(--color-heading);
   font: var(--font-heading-3);
+  transition: var(--transition-default-control);
 
   &::placeholder {
     color: var(--color-placeholder);
   }
+
+  &:disabled {
+    background: var(--color-control-background-disabled);
+    color: var(--color-secondary);
+  }
 }
diff --git a/packages/ui/src/components/Input/index.tsx b/packages/ui/src/components/Input/index.tsx
index c024494c4..2533fb6e9 100644
--- a/packages/ui/src/components/Input/index.tsx
+++ b/packages/ui/src/components/Input/index.tsx
@@ -4,6 +4,7 @@ import styles from './index.module.scss';
 
 export type Props = {
   autoComplete?: AutoCompleteType;
+  isDisabled?: boolean;
   className?: string;
   placeholder?: string;
   type?: InputType;
@@ -11,9 +12,18 @@ export type Props = {
   onChange: (value: string) => void;
 };
 
-const Input = ({ autoComplete, className, placeholder, type = 'text', value, onChange }: Props) => {
+const Input = ({
+  autoComplete,
+  isDisabled,
+  className,
+  placeholder,
+  type = 'text',
+  value,
+  onChange,
+}: Props) => {
   return (
     <input
+      disabled={isDisabled}
       className={classNames(styles.input, className)}
       placeholder={placeholder}
       type={type}
diff --git a/packages/ui/src/pages/Home/index.tsx b/packages/ui/src/pages/Home/index.tsx
index a2e80e64f..35ba9fc93 100644
--- a/packages/ui/src/pages/Home/index.tsx
+++ b/packages/ui/src/pages/Home/index.tsx
@@ -13,15 +13,16 @@ const Home = () => {
   return (
     <form className={styles.wrapper}>
       <div className={styles.title}>登录 Logto</div>
-
       <Input
         autoComplete="username"
+        isDisabled={isLoading}
         placeholder={t('sign-in.username')}
         value={username}
         onChange={setUsername}
       />
       <Input
         autoComplete="current-password"
+        isDisabled={isLoading}
         placeholder={t('sign-in.password')}
         type="password"
         value={password}