From b4b6df9318b24ed400f0f1106c634a44f16dfef8 Mon Sep 17 00:00:00 2001 From: wenxuan70 Date: Mon, 29 Aug 2022 13:24:43 +0800 Subject: [PATCH] feat: add login function --- src/Setting.ts | 34 ++++++ src/backend/Login.ts | 12 ++ src/backend/Response.ts | 6 + src/pages/Index/index.tsx | 17 ++- src/pages/Login/login.tsx | 248 ++++++++++++++++++++++++-------------- 5 files changed, 223 insertions(+), 94 deletions(-) create mode 100644 src/Setting.ts create mode 100644 src/backend/Login.ts create mode 100644 src/backend/Response.ts diff --git a/src/Setting.ts b/src/Setting.ts new file mode 100644 index 0000000..835372d --- /dev/null +++ b/src/Setting.ts @@ -0,0 +1,34 @@ +export let ServerUrl: string = ''; +export let IP: string = ''; +export let Port: string = ''; + +export function setServerUrl(ip: string, port: string): void { + IP = ip; + Port = port; + ServerUrl = `${window.location.protocol}//${ip}:${port}`; +} + +export function get(url: string): Promise { + const token = localStorage.getItem('token'); + return fetch(url, { + method: 'GET', + headers: token ? { + 'Authorization': token, + } : {}, + }); +} + +export function postWithJSON(url: string, data: Record): Promise { + const token = localStorage.getItem('token'); + return fetch(url, { + method: 'POST', + headers: token ? { + 'Authorization': token, + } : {}, + body: JSON.stringify(data) + }); +} + +export function isLoggedIn() { + return localStorage.getItem('token') != null; +} diff --git a/src/backend/Login.ts b/src/backend/Login.ts new file mode 100644 index 0000000..d111418 --- /dev/null +++ b/src/backend/Login.ts @@ -0,0 +1,12 @@ +import * as Setting from '../Setting'; +import type { Response } from './Response'; + +export interface LoginForm { + userName: string; + password: string; +} + +export function login(values: LoginForm): Promise { + return Setting.postWithJSON(`${Setting.ServerUrl}/login`, values) + .then(res => res.json()); +} diff --git a/src/backend/Response.ts b/src/backend/Response.ts new file mode 100644 index 0000000..0621be8 --- /dev/null +++ b/src/backend/Response.ts @@ -0,0 +1,6 @@ +export interface Response { + code: number; + header?: object; + error?: string; + data?: any; +} diff --git a/src/pages/Index/index.tsx b/src/pages/Index/index.tsx index 75edb1b..fb01e1d 100644 --- a/src/pages/Index/index.tsx +++ b/src/pages/Index/index.tsx @@ -6,6 +6,8 @@ import AppBar from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import Typography from '@mui/material/Typography'; import Divider from '@mui/material/Divider'; +import Alert from '@mui/material/Alert'; +import * as Setting from '../../Setting'; // @ts-ignore import VerticalTabs from '/src/Comp/Tab'; @@ -24,8 +26,15 @@ export default class Index extends React.Component { render() { + if (!Setting.isLoggedIn()) { + setTimeout(() => window.location.href = '/', 1500); + return window.location.href = '/'}> + you are not logged in + ; + } + return ( - + - 127.0.0.1:8080 + {`${Setting.IP}:${Setting.Port}`} Alias @@ -75,7 +84,7 @@ export default class Index extends React.Component { {/*添加主要界面*/} @@ -85,4 +94,4 @@ export default class Index extends React.Component { ); } -} \ No newline at end of file +} diff --git a/src/pages/Login/login.tsx b/src/pages/Login/login.tsx index 08ca64e..1d14360 100644 --- a/src/pages/Login/login.tsx +++ b/src/pages/Login/login.tsx @@ -6,106 +6,174 @@ import TextField from '@mui/material/TextField'; import FormControlLabel from '@mui/material/FormControlLabel'; import Checkbox from '@mui/material/Checkbox'; import Box from '@mui/material/Box'; -import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; import Typography from '@mui/material/Typography'; import Container from '@mui/material/Container'; import { createTheme, ThemeProvider } from '@mui/material/styles'; import StorageIcon from '@mui/icons-material/Storage'; +import Alert, { AlertColor } from '@mui/material/Alert'; +import * as LoginBackend from '../../backend/Login'; +import * as Setting from '../../Setting'; +import { useState } from 'react'; + const theme = createTheme(); -export default function Connect() -{ - // @ts-ignore - const handleSubmit = function(event){ +export default function Connect() { + const [ip, setIp] = useState(''); + const [port, setPort] = useState(''); + const [alias, setAlias] = useState(''); + const [account, setAccount] = useState(''); + const [password, setPassword] = useState(''); + const [message, setMessage] = useState(''); + const [alertSeverity, setAlertSeverity] = useState('info' as AlertColor); + const [handleAlertClose, setHandleAlertClose] = useState(() => { + }); + + const validate = function(value: any): boolean { + if (!value || typeof value !== 'string' || value.length === 0) { + return false; + } + return true; + }; + + const handleSubmit = function(event: any): void { event.preventDefault(); - const data = new FormData(event.currentTarget); - console.log({ - account: data.get('account'), - password: data.get('password'), + if (!validate(ip)) { + showMessage('error', 'ip cannot be empty'); + return; + } else if (!validate(port)) { + showMessage('error', 'port cannot be empty'); + return; + } else if (!validate(account)) { + showMessage('error', 'account cannot be empty'); + return; + } else if (!validate(password)) { + showMessage('error', 'password cannot be empty'); + return; + } + + Setting.setServerUrl(ip, port); + + LoginBackend.login({ + userName: account, + password: password, + }).then(res => { + if (res.code === 200) { + localStorage.setItem('token', res.data.token); + showMessage('success', 'login successful', () => window.location.href = '/index'); + } else { + showMessage('error', `login failed: ${res.error}`); + } }); - window.location.href="/index" }; - return ( - - - - - - - - - NutsDB - - + const showMessage = (severity: AlertColor, message: string, callback?: () => void) => { + if (callback) { + setHandleAlertClose(callback); + } + setAlertSeverity(severity); + setMessage(message); + }; - - - - - - } - label="Remember me" - /> - + const renderAlert = () => { + setTimeout(() => { + if (message && message.length > 0) { + setMessage(''); + } + }, 2000); + return message && message.length > 0 ?
+ handleAlertClose}> + {message} + +
: null; + }; + + return ( + <> + {renderAlert()} + + + + + + + + + NutsDB + + + setIp(e.target.value)} + /> + setPort(e.target.value)} + /> + setAlias(e.target.value)} + /> + setAccount(e.target.value)} + /> + setPassword(e.target.value)} + /> + } + label='Remember me' + /> + + - - - + + + ); -} \ No newline at end of file +}