refactor: scss support

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

package.json

@@ -15,7 +15,8 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^1.3.0",
+    "sass": "^1.53.0",
     "typescript": "^4.6.3",
     "vite": "^2.9.9"
   }
-}
+}

src/components/App.tsx

@@ -1,58 +1,61 @@
-import { useReducer, useState } from "react";
-import "../css/App.css";
+import { useEffect, useReducer, useState } from "react";
+import config from "../config/server";
+import style from "../styles/App.module.scss";
 
 function App() {
   let [emailAddress, setEmail] = useState("");
   let [password, setPassword] = useState("");
-  let [bDisabled, setDisabled] = useReducer(
+  let [disabled, setDisabled] = useReducer(
     (disabled: boolean) => !disabled,
     false
   );
 
-  function countTry() {
+  useEffect(() => {
+    document.title = "Login - EHWorld"
+  }, []);
+
+  const storeTryCount = () => {
     window.localStorage.tryCount == undefined
       ? window.localStorage.setItem("tryCount", "0")
       : undefined;
     window.localStorage.setItem(
       "tryCount",
       String(Number(window.localStorage.tryCount) + 1)
     );
-    window.localStorage.setItem("time", String(Date.now()));
-  }
+    window.localStorage.setItem("time", Date.now().toString());
+  };
 
-  const getCountTry = () =>
+  const getTryCount = () =>
     Number(window.localStorage.getItem("tryCount")) ?? 0;
 
-  async function login() {
+  const login = async () => {
     if (
-      getCountTry() >= 3 &&
+      getTryCount() >= 3 &&
       Date.now() - Number(window.localStorage.getItem("time")) <= 900000
     ) {
+      // TODO: use custom alert toaster instead
       alert("您已尝试超过三次，请不要继续尝试");
       return;
     }
     setDisabled();
-    let rpText = await fetch(
-      "https://ehworld20220702211431.azurewebsites.net/account/log",
-      {
-        method: "POST",
-        body: JSON.stringify({ email: emailAddress, pass: password }),
-        headers: {
-          'Content-Type': 'application/json'
-        },
-      }
-    );
-    let rText = await rpText.text();
-    await alert(rText);
+    const response = await fetch(`${config.server.baseUrl}/account/log`, {
+      method: "POST",
+      body: JSON.stringify({ email: emailAddress, pass: password }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    const rText = await response.text();
+    // TODO: use custom alert instead
+    alert(rText);
     setDisabled();
-    countTry();
-  }
+    storeTryCount();
+  };
 
   return (
-    <div className="App">
-      <title>Login | EHWorld</title>
-      <main>
-        <div>
+    <div className={style.loginContainer}>
+      <main className={style.login}>
+        <div className={style.loginForm}>
           <h1>Login</h1>
           <p>
             <input
@@ -64,6 +67,7 @@ function App() {
               name=""
               id=""
               placeholder="Email"
+              className={style.formInput}
             />
           </p>
           <p>
@@ -74,11 +78,12 @@ function App() {
               value={password}
               type="password"
               placeholder="Password"
+              className={style.formInput}
             />
           </p>
           <p>
-            <button disabled={bDisabled} onClick={login}>
-              登录
+            <button disabled={disabled} onClick={login} className={style.submitButton}>
+              Login
             </button>
           </p>
         </div>

src/config/server.ts

@@ -0,0 +1,7 @@
+const config = {
+  server: {
+    baseUrl: "https://ehworld20220702211431.azurewebsites.net",
+  },
+};
+
+export default config;

src/main.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './components/App'
-import './css/index.css'
+import './styles/index.scss'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

src/styles/App.module.scss

@@ -0,0 +1,62 @@
+@import "./variables.scss";
+
+.loginContainer {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  background-color: $background;
+}
+
+.login {
+  padding: 4rem 5.5rem;
+  transform: rotate(12deg);
+  border-radius: 12%;
+  background-color: $primary;
+  font-size: 1.5rem;
+
+  & .loginForm {
+    border-radius: 10%;
+    color: $white;
+    transform: rotate(-12deg);
+    background-color: $dark;
+    padding: 4rem 5.5rem;
+
+    & .formInput {
+      border: solid transparent;
+      border-radius: 12px;
+      padding: 10px;
+      outline: transparent;
+      transition: 0.3s;
+      transform: scale(1);
+      background-color: $white;
+    }
+
+    & .submitButton {
+      border: solid transparent;
+      border-radius: 12px;
+      padding: 10px;
+      outline: transparent;
+      transition: 0.3s;
+      transform: scale(1);
+      background-color: $white;
+
+      &:hover:not(:disabled) {
+        background-color: $primary;
+        transform: scale(1.2);
+        cursor: pointer;
+      }
+
+      &:active:not(:disabled) {
+        background-color: $secondary;
+      }
+
+      &:disabled:hover {
+        cursor: not-allowed;
+      }
+    }
+  }
+}

src/styles/variables.scss

@@ -0,0 +1,5 @@
+$background: rgb(71, 71, 71);
+$primary: aliceblue;
+$secondary: aquamarine;
+$dark: rgb(97, 97, 97);
+$white: #ffffff;