add login

package.json

@@ -4,9 +4,9 @@
   "private": true,
   "homepage": "/preview",
   "dependencies": {
-    "@emotion/react": "^11.7.1",
+    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.6.0",
+    "@emotion/styled": "^11.10.4",
-    "@mui/material": "^5.2.5",
+    "@mui/material": "^5.10.3",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -18,6 +18,7 @@
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.2",
+    "react-modal-login": "^2.0.7",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.2"
   },

src/App.css

@@ -38,3 +38,7 @@
     transform: rotate(360deg);
   }
 }
+
+.MuiFormControlLabel-label {
+  font-size: 13px !important;
+}

src/App.js

@@ -1,143 +1,265 @@
-import './App.css';
+import "./App.css";
-import * as ProjectApi from './apis/projectApi'
+import * as ProjectApi from "./apis/projectApi";
-import Pane from './Components/pane';
+import * as LoginApi from "./apis/loginApi";
-import DeviceFrame from './Components/deviceFrame';
+import Pane from "./Components/pane";
-import waterMarkPng from './images/water-mark.png'
+import DeviceFrame from "./Components/deviceFrame";
-import React from 'react';
+import waterMarkPng from "./images/water-mark.png";
-import SettingFrame from './Components/settingsFrame';
+import React from "react";
-import QrCode from 'qrcode'
+import SettingFrame from "./Components/settingsFrame";
-import { getProjectSettingValue, setProjectSetting } from './storage';
+import QrCode from "qrcode";
-
+import {
+  getLoginInfo,
+  getProjectSettingValue,
+  setLoginInfo,
+  setProjectSetting,
+} from "./storage";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
 class App extends React.Component {
   constructor() {
     super();
     this.state = {
-      mode: 'normal',
+      mode: "normal",
       projects: [],
       selectedProject: {},
-      selectedProjectName: '',
+      selectedProjectName: "",
-      device: 'android-h',
+      device: "android-h",
-      htmlUrl: '',
+      htmlUrl: "",
-      dataUrl: '',
+      dataUrl: "",
-      loading: false
+      loading: false,
-    }
+      loginOpen: false,
+      showLoginError: false,
+      loginForm: {
+        account: "",
+        password: "",
+        keepLogin: false,
+      },
+    };
   }
   componentDidMount() {
+    const loginInfo = getLoginInfo();
+    if (loginInfo) {
       this.fetchData();
-    this.refreshQrCode()
+      this.refreshQrCode();
+    } else {
+      this.setState({ loginOpen: true });
     }
+  }
+
+  login = async () => {
+    var { account, password, keepLogin } = this.state.loginForm;
+    var user = await LoginApi.UserLogin({ account, password });
+    if (user) {
+      this.setState({
+        loginOpen: false,
+      });
+      if (keepLogin) {
+        setLoginInfo(user);
+      }
+      this.fetchData();
+      this.refreshQrCode();
+    } else {
+      this.setState({
+        showLoginError: true,
+      });
+    }
+  };
 
   refreshQrCode() {
-    var {selectedProject} = this.state;
+    var { selectedProject } = this.state;
-    selectedProject.HtmlUrl && QrCode.toDataURL([{ data: this.selectedProjectUrl, mode: 'byte'}], { width: 120 })
+    selectedProject.HtmlUrl &&
-    .then((dataUrl) => {
+      QrCode.toDataURL([{ data: this.selectedProjectUrl, mode: "byte" }], {
+        width: 120,
+      }).then((dataUrl) => {
         this.setState({
-        dataUrl: dataUrl
+          dataUrl: dataUrl,
-      })
+        });
-    })
+      });
   }
 
-  get selectedProjectUrl () {
+  get selectedProjectUrl() {
-    var {selectedProject} = this.state;
+    var { selectedProject } = this.state;
-    var settingValue = getProjectSettingValue(selectedProject?.Name) || [1, 1, 1]
+    var settingValue = getProjectSettingValue(selectedProject?.Name) || [
-    var rawUrl = selectedProject?.HtmlUrl ? encodeURI(selectedProject?.HtmlUrl) : ""
+      1, 1, 1,
+    ];
+    var rawUrl = selectedProject?.HtmlUrl
+      ? encodeURI(selectedProject?.HtmlUrl)
+      : "";
     if (rawUrl) {
-      rawUrl += `?datanumber=${settingValue[0]}&datanumber1=${settingValue[1]}&datanumber2=${settingValue[2]}&lunaOrHtml=false`
+      rawUrl += `?datanumber=${settingValue[0]}&datanumber1=${settingValue[1]}&datanumber2=${settingValue[2]}&lunaOrHtml=false`;
     }
 
-    return rawUrl
+    return rawUrl;
   }
 
   async setSelectedProject(selectedProjectName) {
     this.setState({
       selectedProjectName: selectedProjectName,
     });
-    console.log('selected:', selectedProjectName)
+    console.log("selected:", selectedProjectName);
-    await this.updateSelectedProject(selectedProjectName)
+    await this.updateSelectedProject(selectedProjectName);
   }
 
-  async updateSelectedProject (projectName) {
+  async updateSelectedProject(projectName) {
-    var projectSetting = await ProjectApi.getProjectSetting(projectName)
+    var projectSetting = await ProjectApi.getProjectSetting(projectName);
     this.setState({
-      selectedProject: projectSetting
+      selectedProject: projectSetting,
     });
   }
 
   setDevice(selected) {
     this.setState({
-      device: selected
+      device: selected,
     });
   }
 
   setMode(mode) {
     this.setState({
-      mode: mode
+      mode: mode,
+    });
+  }
+
+  setLoginForm(form) {
+    this.setState({
+      loginForm: {
+        ...this.state.loginForm,
+        ...form,
+      },
     });
   }
 
   async fetchData() {
     this.setState({
-      loading: true
+      loading: true,
-    })
+    });
 
-    var projectNames = await this.fetchProjects() || ['无项目'];
+    var projectNames = (await this.fetchProjects()) || ["无项目"];
     this.setState({
       projects: projectNames,
       selectedProjectName: projectNames[0],
-      loading: false
+      loading: false,
     });
-    await this.updateSelectedProject(projectNames[0])
+    await this.updateSelectedProject(projectNames[0]);
-    this.refreshQrCode()
+    this.refreshQrCode();
   }
 
   async fetchProjects() {
     return await ProjectApi.getProjects();
   }
 
-  get projectSettingValue () {
+  get projectSettingValue() {
-    return getProjectSettingValue(this.state.selectedProjectName)
+    return getProjectSettingValue(this.state.selectedProjectName);
   }
 
   UpdateSetting(obj) {
-    setProjectSetting(this.state.selectedProject.Name, [+obj.topType, +obj.centreType, +obj.middleType])
+    setProjectSetting(this.state.selectedProject.Name, [
+      +obj.topType,
+      +obj.centreType,
+      +obj.middleType,
+    ]);
   }
 
   render() {
-    var { mode, device, projects, selectedProject, dataUrl, loading } = this.state;
+    var {
+      mode,
+      device,
+      projects,
+      selectedProject,
+      dataUrl,
+      loading,
+      loginOpen,
+      loginForm,
+    } = this.state;
 
     return (
       <div className="App">
+        <Dialog open={loginOpen}>
+          <DialogTitle>登录</DialogTitle>
+          <DialogContent>
+            <TextField
+              autoFocus
+              margin="dense"
+              id="name"
+              label="账号"
+              fullWidth
+              value={loginForm.account}
+              variant="standard"
+              onChange={(e) => this.setLoginForm({ account: e.target.value })}
+            />
+            <TextField
+              autoFocus
+              margin="dense"
+              id="name"
+              label="密码"
+              type={"password"}
+              fullWidth
+              value={loginForm.password}
+              variant="standard"
+              onChange={(e) => this.setLoginForm({ password: e.target.value })}
+            />
+          </DialogContent>
+          <DialogActions>
+            {this.state.showLoginError && (
+              <span style={{ color: "red", margin: "0 auto 0 10px" }}>
+                账号或密码错误
+              </span>
+            )}
+            <FormControlLabel
+              control={
+                <Checkbox
+                  checked={loginForm.keepLogin}
+                  onChange={(_, checked) =>
+                    this.setLoginForm({ keepLogin: checked })
+                  }
+                />
+              }
+              label="保持登录状态7天"
+            />
+            <Button onClick={() => this.login()}>提交</Button>
+          </DialogActions>
+        </Dialog>
         <Pane
           mode={mode}
-          onModeChange={(_mode) => this.setMode(_mode) }
+          onModeChange={(_mode) => this.setMode(_mode)}
           projects={projects}
           device={device}
           loading={loading}
           onProjectSelect={(project) => {
-            this.setSelectedProject(project)
+            this.setSelectedProject(project);
           }}
-          onDeviceChange={(_device) => this.setDevice(_device)}/>
+          onDeviceChange={(_device) => this.setDevice(_device)}
-        <div style={{
+        />
-          display: 'flex',
+        <div
+          style={{
+            display: "flex",
             flex: 1,
-          alignItems: 'center',
+            alignItems: "center",
             backgroundImage: `url('${waterMarkPng}')`,
-          backgroundPositionX: 'right',
+            backgroundPositionX: "right",
-          backgroundPositionY: 'bottom',
+            backgroundPositionY: "bottom",
-          backgroundRepeat: 'no-repeat'
+            backgroundRepeat: "no-repeat",
-        }}>
+          }}
-        {
+        >
-          mode === "normal"
+          {mode === "normal" ? (
-          ? <DeviceFrame
+            <DeviceFrame
               htmlUrl={this.selectedProjectUrl}
               device={device}
               qrDataUrl={dataUrl}
-              refreshQrCode={() => this.refreshQrCode()}/>
+              refreshQrCode={() => this.refreshQrCode()}
-          : <SettingFrame
+            />
+          ) : (
+            <SettingFrame
               setting={selectedProject?.TextObjStr}
               settingValue={this.projectSettingValue}
-              generate={(value) => this.UpdateSetting(value)}/>
+              generate={(value) => this.UpdateSetting(value)}
-        }
+            />
+          )}
         </div>
       </div>
     );

src/apis/loginApi.js

@@ -0,0 +1,20 @@
+var BaseUrl = "http://api.soyootech.com/";
+export async function UserLogin(loginForm) {
+  try {
+    var response = await fetch(BaseUrl + "SoyooUser/previewlogin", {
+      body: JSON.stringify({
+        account: loginForm.account,
+        password: loginForm.password,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+    var result = await response.json();
+    return result;
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+}

src/storage.js

@@ -1,14 +1,24 @@
-import ls from 'localstorage-slim'
+import ls from "localstorage-slim";
-import * as Utils from './utils'
+import * as Utils from "./utils";
 
-const settingPrefix = 'ps_'
+const settingPrefix = "ps_";
 
 export const setProjectSetting = (projectName, settingValueArr) => {
-    var tenant = Utils.getTenant()
+  var tenant = Utils.getTenant();
-    ls.set(settingPrefix + tenant + '_' + projectName, settingValueArr, { ttl: 3600 * 24 * 90 })
+  ls.set(settingPrefix + tenant + "_" + projectName, settingValueArr, {
-}
+    ttl: 3600 * 24 * 90,
+  });
+};
 
 export const getProjectSettingValue = (projectName) => {
-    var tenant = Utils.getTenant()
+  var tenant = Utils.getTenant();
-    return ls.get(settingPrefix + tenant + '_' + projectName) || [1, 1, 1]
+  return ls.get(settingPrefix + tenant + "_" + projectName) || [1, 1, 1];
-}
+};
+
+export const setLoginInfo = (loginInfo) => {
+  ls.set("loginInfo", loginInfo, { ttl: 3600 * 24 * 7 });
+};
+
+export const getLoginInfo = () => {
+  return ls.get("loginInfo");
+};