refactor: add disabled to input

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 {

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 {
+  &:disabled {
-    background: var(--color-button-background-hover);
-  }
-
-  &.disabled {
     background: var(--color-button-background-disabled);
     color: var(--color-button-text-disabled);
   }
+
+  &:not(:disabled):hover {
+    background: var(--color-button-background-hover);
+  }
 }

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) => {
+      onClick={onClick}
-        if (!isDisabled) {
-          onClick?.(event);
-        }
-      }}
     />
   );
 };

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

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}

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}