【前端】實戰 ASP.NET C# 移轉到 REACT 01

緣起

之前使用 ASP.NET C# WebForm 寫一套公司內部的報修系統，如下圖所示。
但維護上：

• 遇到 JavaScript Callback hell
• 在後端上想整合為一套語言，把 Server side 轉到 Client side (後台不需要考慮 SEO 問題)
• 前端以JavaScript為核心，CSS 就依賴 3rd party 輔助開發。 
• 這個專案非常小，很適合拿來練手。

登入畫面

主要功能是登入資料和 AD (Active Directory) 結合驗證，有人員異動時可以即時同步。

登入畫面

主畫面

登入成功會到這裡，會顯示登入使用者資訊，並可以代替其他使用者輸入報修資訊。 (因為使用者可能無法開機，必須由他人代為輸入)

輸入後會在主畫面下方顯示已經建立且未完工的報修單。

未完工的報修單還提供內容修改的選項。

主畫面

畫面移殖

這樣的畫面如果使用 jQuery UI 設計，也是分分鐘鐘可以完成的事情，但俗話說的好：

永遠要假設接手專案的人是知道你家地址的反社會人格份子。

於是我決定好好愛惜生命把一件事做好。

登入畫面

閉關許久，終於把登入畫面在 REACT 裡排出來。

登入頁面程式碼

import React, { useState } from "react";
import { Button, FormGroup, FormControl, FormLabel  } from "react-bootstrap";
import "./Login.css";

const Main = ()=><div>Hello</div>

function Login(props) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errorMessage, setErrorMessage] = useState("")
  const [errorPasswordMessage, setErrorPasswordMessage] = useState("")

  function validateForm() {
    return email.length > 0 && password.length > 0;
  }

  function handleSubmit(event) {
    if (email===password){
      props.history.push("/main");
    }
    else{
      setErrorMessage("帳號或密碼錯誤，請重新輸入！");
    }
    event.preventDefault();
  }

  return (
    <div className="Login">
      <form onSubmit={handleSubmit}>
        <h1>歡迎使用線上報修系統</h1>
        <h2 align="center">登入視窗</h2>
        <FormLabel style={{color:"red"}}>{errorMessage}</FormLabel>
        <FormGroup controlId="email" bsSize="large">
          <FormLabel >員工編號</FormLabel >
          <FormControl
            autoFocus
            type="text"
            value={email}
            onChange={e => {
                setEmail(e.target.value)
              }
            }
          />
        </FormGroup>
        <FormGroup controlId="password" bsSize="large">
          <FormLabel >登入密碼</FormLabel >
          <FormControl
            value={password}
            onChange={e => setPassword(e.target.value)}
            type="password"
          />
          <FormLabel style={{color:"red"}}>{errorPasswordMessage}</FormLabel>
        </FormGroup>
        <Button block bsSize="large" disabled={!validateForm()} type="submit">
          Login
        </Button>
      </form>
    </div>
  );
}
export {Login, Main}

說明

React Bootstrap 第四版和第三版在命名上有些許差異，在此例來說：
第三版：ControlLabel => 第四版：FormLabel，第四版有把名稱一致化。除此之外使用上沒有太大落差 (目前)。

主頁面還沒設計，為了看切換頁面效果先用一個小標籤代表。

驗證帳號以帳號密碼相同就視為驗證成功，如果有錯誤則會在表格最上方秀出錯誤訊息。


用到的知識：

• React HOOKS - useState
• React JSX
• React Bootstrap

接下來將會使用 Delphi 進行後端登入 API 開發。

See also

• Create a Login Page