Skip to content

Commit

Permalink
Merge pull request #59 from eradharmarathne/main
Browse files Browse the repository at this point in the history 
add email service to yes page
  • Loading branch information
@eradharmarathne
eradharmarathne authored Jun 24, 2024
2 parents c62f977 + 09a019e commit 3948d60
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 130 deletions.
16 changes: 16 additions & 0 deletions Frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions Frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@types/react-router-dom": "^5.3.3",
"axios": "^1.5.1",
"dotenv": "^16.4.5",
"emailjs-com": "^3.2.0",
"express-session": "^1.17.3",
"framer-motion": "^10.16.4",
"jwt-decode": "^3.1.2",
Expand Down
163 changes: 33 additions & 130 deletions Frontend/src/Pages/Yes.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,60 @@
import React from "react";
import Header from "../components/Header";
import { Input, Button, FormControl, FormLabel } from "@chakra-ui/react";
import { Text, Grid, GridItem, Box } from "@chakra-ui/react";
import { Input, Button, FormControl, Text, Grid, GridItem, Box } from "@chakra-ui/react";
import FooterSection from "../components/FooterSection";
import axios from "axios";
import emailjs from 'emailjs-com';
import { useNavigate } from "react-router-dom";

const gridBackgrougndColor = "#F5F5F5";
// const inputFieldTextColor = "black";
const labelColor = "black";

const Yes = () => {
//2013.11.26 start
const [billSettle, setBillSettle] = React.useState("");
const [reportSubmit, setReportSubmit] = React.useState("");
const [isLoading, setIsLoading] = React.useState(false);

const navigate = useNavigate();

const sendEmail = (templateParams) => {
emailjs.send('service_t7usi6m', 'template_ojlf31n', templateParams, 'oju11hQbtondf0x7i')
.then((response) => {
console.log('SUCCESS!', response.status, response.text);
alert('Email sent successfully!');
}, (error) => {
console.error('FAILED...', error);
alert('Failed to send email.');
});
};

const onSubmitClick = () => {
if (reportSubmit == "" || billSettle == "") {
alert("Select all required fields !");
if (reportSubmit === "" || billSettle === "") {
alert("Select all required fields!");
} else {
setIsLoading(true);
const obj = {
id: "652ffd472fd82b9a09fd96e9",
billSettle: billSettle,
reportSubmit: reportSubmit,
const templateParams = {
to_name: "Student Name", // Replace with dynamic student name
from_name: "Eranga", // Replace with your name or sender's name
message: `Your project "Secure Network Infrastructure Enhancement Project" has been approved. The bills are to be settled by ${billSettle} and the report is to be submitted by ${reportSubmit}.`
};
axios
.post("http://localhost:5000/approved", obj)
.then((res) => {
setIsLoading(false);
if (res.status == 200) {
navigate("/admin");
}
})
.catch((error) => {
setIsLoading(false);
alert(error);
});
sendEmail(templateParams);
setIsLoading(false);
navigate("/admin");
}
console.log("reportSubmit ", reportSubmit);
console.log("billSettle ", billSettle);
};
//2013.11.26 end

return (
<>
<Header></Header>
<Header />

{isLoading ? (
<Text
margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
fontWeight={"bold"}
color={"grey"}
>
Submiting please wait ......
Submitting, please wait...
</Text>
) : (
<>
Expand Down Expand Up @@ -97,13 +95,6 @@ const Yes = () => {
marginBottom={5}
>
<GridItem area={"input"}>
{/* <Input
margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
width={{ base: "80%", md: "85%", lg: "90%" }}
variant="outline"
borderColor="black"
placeholder="Yes / No"
/> */}
<Input
disabled
margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
Expand All @@ -112,89 +103,20 @@ const Yes = () => {
borderColor="black"
placeholder="Yes"
color="grey"
value="Yes" // Set the initial value to "Yes"
readOnly // Make the input read-only
value="Yes"
readOnly
/>
</GridItem>
</Grid>

{/* <GridItem area={"dates"}> */}
{/* <GridItem area={"title"} colSpan={1}>
<Text
fontWeight="bold"
marginTop={2}
whiteSpace={"nowrap"}
color={labelColor}
>
Fund offering date
</Text>
</GridItem>
<GridItem
area={"answer"}
bg={gridBackgrougndColor}
borderRadius={7}
colSpan={1}
paddingX={{ base: "20px", md: "5%" }}
paddingY={{ base: "10px", md: "2%", lg: "3%"}}
margin={{base: "10%", md: "2%"}}
>
<FormControl>
{/* <FormLabel>Project fund giving date</FormLabel> */}
{/* <Input
margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
width={{ base: "80%", md: "85%", lg: "90%" }}
variant="outline"
borderColor="black"
type="date" // Use the 'date' type for date input
placeholder="Select date"
/>
</FormControl>
</GridItem>
<GridItem area={"title"} colSpan={1}>
<Text
fontWeight="bold"
marginTop={2}
whiteSpace={"nowrap"}
color={labelColor}
>
Fund offering date
</Text>
</GridItem>
<GridItem
area={"answer"}
bg={gridBackgrougndColor}
borderRadius={7}
colSpan={1}
paddingX={{ base: "20px", md: "5%" }}
paddingY={{ base: "10px", md: "2%", lg: "3%"}}
margin={{base: "10%", md: "2%"}}
>
<FormControl>
{/* <FormLabel>Project fund giving date</FormLabel> */}
{/* <Input
margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
width={{ base: "80%", md: "85%", lg: "90%" }}
variant="outline"
borderColor="black"
type="date" // Use the 'date' type for date input
placeholder="Select date" */}
{/* /> */}
{/* </FormControl>
</GridItem> */}

{/* <GridItem area={"input2"}> */}

<Grid
paddingX={{ base: "20px", md: "10%" }}
paddingY={{ base: "20px", md: "2%" }}
bg={gridBackgrougndColor}
borderRadius={"20px"}
templateAreas={{
base: `"title"
"inputArea"`,

md: `"title"
"inputArea"`,
base: `"title" "inputArea"`,
md: `"title" "inputArea"`,
}}
gridTemplateColumns={{ md: "0.6fr 1.4fr" }}
gap={3}
Expand All @@ -212,13 +134,12 @@ const Yes = () => {
</GridItem>
<GridItem area={"inputArea"}>
<FormControl>
{/* <FormLabel>Project fund giving date</FormLabel> */}
<Input
margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
width={{ base: "80%", md: "85%", lg: "90%" }}
variant="outline"
borderColor="black"
type="date" // Use the 'date' type for date input
type="date"
placeholder="Select date"
value={billSettle}
onChange={(e) => {
Expand All @@ -235,11 +156,8 @@ const Yes = () => {
bg={gridBackgrougndColor}
borderRadius={"20px"}
templateAreas={{
base: `"title"
"inputArea"`,

md: `"title"
"inputArea"`,
base: `"title" "inputArea"`,
md: `"title" "inputArea"`,
}}
gridTemplateColumns={{ md: "0.6fr 1.4fr" }}
gap={3}
Expand All @@ -252,18 +170,17 @@ const Yes = () => {
color={labelColor}
fontWeight={"bold"}
>
The date on which the report to be submitted:
The date on which the report is to be submitted:
</Text>
</GridItem>
<GridItem area={"inputArea"}>
<FormControl>
{/* <FormLabel>Project fund giving date</FormLabel> */}
<Input
margin={{ base: "0% 0% 1%", md: "0% 0% 3%" }}
width={{ base: "80%", md: "85%", lg: "90%" }}
variant="outline"
borderColor="black"
type="date" // Use the 'date' type for date input
type="date"
placeholder="Select date"
value={reportSubmit}
onChange={(e) => {
Expand All @@ -274,18 +191,6 @@ const Yes = () => {
</GridItem>
</Grid>

{/* </GridItem> */}
{/* <Text
fontSize={"smaller"}
margin={{ base: "5% 0% 0%", md: "3% 0% 0%" }}
color={"#757070"}
>
Provide your decision by typing Yes / No
</Text> */}

{/* </GridItem> */}

{/* <GridItem area={"button1"}> */}
<Button
onClick={onSubmitClick}
marginTop={"2%"}
Expand All @@ -299,8 +204,6 @@ const Yes = () => {
>
SUBMIT
</Button>
{/* </GridItem> */}
{/* </Grid> */}
</Box>
</>
)}
Expand Down

0 comments on commit 3948d60

Please sign in to comment.