0

現在、material-uiでログインフォーム画面を作成し、データベース(PostgreSQL)を構築しました。PostgreSQLはGUI(pgAdmin)でテーブルを作成済です。

下記のテストを実施したいと思います。

  1. ログインフォームから、IDとパスワードを入力して、ログインボタンをクリックする。
  2. テーブルに登録されているID,パスワードと一致することを確認する。
  3. 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,鈴木一郎          ★ 〃
1

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。