-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add validation and replace s3 client (#19)
* add study id validation * replace s3 client with object url * add trail limit to recall test and remove printing stmt * update new env vir to workflow
- Loading branch information
1 parent
6245a85
commit 3cc3357
Showing
7 changed files
with
100 additions
and
78 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,51 +1,98 @@ | ||
| import { Button, Card, CardContent, CardHeader, TextField } from "@mui/material"; | ||
| import { Alert, Button, Card, CardContent, CardHeader, TextField, Typography } from "@mui/material"; | ||
| import { ChangeEvent, FC, useEffect, useState } from "react"; | ||
| import { useNavigate, useParams } from "react-router-dom"; | ||
| import { styled } from "@mui/system"; | ||
|
|
||
| const AnimatedAlert = styled(Alert)(() => ({ | ||
| "&.fadeOut": { | ||
| animation: "fadeOut 0.3s forwards", | ||
| }, | ||
| "@keyframes fadeOut": { | ||
| from: { opacity: 1 }, | ||
| to: { opacity: 0 }, | ||
| }, | ||
| })); | ||
|
|
||
| export const AuthPage: FC = () => { | ||
| const { studyId } = useParams<{ studyId: string }>(); | ||
| const [input, setInput] = useState<string>(""); | ||
| const [animationClass, setAnimationClass] = useState<string>(""); | ||
| const [showAlert, setShowAlert] = useState<boolean>(false); | ||
| const navigate = useNavigate(); | ||
|
|
||
| useEffect(() => { | ||
| if (validateStudyId(studyId)) { | ||
| sessionStorage.setItem("studyId", studyId!); | ||
| console.log(`Study ID ${studyId} is validated`); | ||
| navigate(`/assessments/${studyId}`); | ||
| } | ||
| validateStudyId(studyId).then((result) => { | ||
| if (result) { | ||
| sessionStorage.setItem("studyId", studyId!); | ||
| console.log(`Study ID ${studyId} is validated`); | ||
| navigate(`/assessments/${studyId}`); | ||
| } | ||
| }); | ||
| }, []); | ||
|
|
||
| const inputChangeHandler = (event: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => { | ||
| setInput(event.target.value); | ||
| }; | ||
|
|
||
| const submitHandler = () => { | ||
| if (!validateStudyId(input)) { | ||
| const submitHandler = async () => { | ||
| if (!(await validateStudyId(input))) { | ||
| setInput(""); | ||
| setShowAlert(true); | ||
| setAnimationClass(""); | ||
| setTimeout(() => { | ||
| setAnimationClass("fadeOut"); | ||
| }, 5000); | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| sessionStorage.setItem("studyId", input); | ||
| navigate(`/assessments/${input}`); | ||
| }; | ||
|
|
||
| const validateStudyId = (id: string | undefined) => { | ||
| const validateStudyId = async (id: string | undefined) => { | ||
| if (!id || id === "undefined") { | ||
| return false; | ||
| } | ||
| // TODO: validate study ID | ||
|
|
||
| const response = await fetch(`${import.meta.env.VITE_VALIDATE_ENDPOINT}/${id}`, { | ||
| method: "GET", | ||
| }); | ||
|
|
||
| if (response.status !== 200) { | ||
| return false; | ||
| } | ||
|
|
||
| return true; | ||
| }; | ||
|
|
||
| return ( | ||
| <Card> | ||
| <CardHeader title="Enter Study ID" sx={{ paddingBottom: 0 }} /> | ||
| <CardContent sx={{ paddingTop: 0 }}> | ||
| <TextField label="Study ID" variant="outlined" fullWidth margin="normal" onChange={inputChangeHandler} /> | ||
| <Button variant="contained" color="primary" onClick={submitHandler}> | ||
| Submit | ||
| </Button> | ||
| </CardContent> | ||
| </Card> | ||
| <> | ||
| {showAlert && ( | ||
| <AnimatedAlert | ||
| variant="filled" | ||
| severity="error" | ||
| className={animationClass} | ||
| sx={{ | ||
| position: "fixed", | ||
| width: "calc(100% - 4rem)", | ||
| margin: "1rem", | ||
| top: 0, | ||
| left: 0, | ||
| }} | ||
| > | ||
| <Typography>Invalid Study ID</Typography> | ||
| </AnimatedAlert> | ||
| )} | ||
| <Card> | ||
| <CardHeader title="Enter Study ID" sx={{ paddingBottom: 0 }} /> | ||
| <CardContent sx={{ paddingTop: 0 }}> | ||
| <TextField label="Study ID" variant="outlined" fullWidth margin="normal" onChange={inputChangeHandler} /> | ||
| <Button variant="contained" color="primary" onClick={submitHandler}> | ||
| Submit | ||
| </Button> | ||
| </CardContent> | ||
| </Card> | ||
| </> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.