現在、material-uiでログインフォーム画面を作成し、データベース(PostgreSQL)を構築しました。PostgreSQLはGUI(pgAdmin)でテーブルを作成済です。
下記のテストを実施したいと思います。
- ログインフォームから、IDとパスワードを入力して、ログインボタンをクリックする。
- テーブルに登録されているID,パスワードと一致することを確認する。
- No2で一致している場合、ログインフォームの画面下に「OK」、一致していない場合は「NG」と表示させる。
上記につきまして、APIになると思いますが自分の調査では限界が来ていまして困っています。
サイトを探しましたが、自分が思っているものが見当たりません。
参考となるスクリプトが記載したサイト、もしくはスクリプトをご教授していただけますでしょうか。
補足として私が作成したJSとテーブルを記載します。
ログインフォームのApp.js
import * as React from 'react';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import Container from '@mui/material/Container';
import { createTheme, ThemeProvider } from '@mui/material/styles';
const theme = createTheme();
export default function SignIn() {
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
console.log({
email: data.get('email'),
password: data.get('password'),
});
};
return (
<ThemeProvider theme={theme}>
<Container component="main" maxWidth="xs">
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Typography component="h1" variant="h4">
PMツール
</Typography>
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 2 }}>
<TextField
margin="normal"
required
fullWidth
id="login_id"
label="番号(0詰めの8桁)"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
ログイン
</Button>
</Box>
★この場所に OK 又は NG を表示させるスクリプトを入れたいと思います。
</Box>
</Container>
</ThemeProvider>
);
}
PostgreSQLのテーブル
サンプルとして下記の値を設定しています。
login_id,login_password,login_name ★項目名:全て文字型
00123456,00123456,渡辺太郎 ★サンプルの値を手動で入力
00543213,00543213,鈴木一郎 ★ 〃