<file_sep>import React from 'react';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import fb from '../logo-FB.ico';
import insta from '../logo-IG.ico';
import yt from '../logo-YT.ico';
import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles((theme) => ({
    root: {
        minwidth: 200,
        backgroundColor: "black"
    }
    // bot:{
    //     position:"fixed",
    //     left:0,
    //     bottom:0,
    //     right:0,
    //     // marginBottom:"1px"
  
    //   }
}));

export default function Footer() {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

    return (
        <Box mt={10}>
            <BottomNavigation>
                value={value}
                onChange={(event, newValue) => {
                    setValue(newValue);
                }}
                showLabels
                className={classes.root}

                <BottomNavigationAction label="Facebook" icon={<img src={fb} style={{ height: 25, width: 25 }} />} />
                <BottomNavigationAction label="Instagram" icon={<img src={insta} style={{ height: 25, width: 25 }} />} />
                <BottomNavigationAction label="Youtube" icon={<img src={yt} style={{ height: 25, width: 25 }} />} />


            </BottomNavigation>
        </Box>

    )

}<file_sep>import React from 'react';
import { useHistory } from 'react-router-dom';
import { Grid, Paper, Typography, TextField, Button } from '@material-ui/core';
import logo from './logo.jpg';
import { Form, Formik, ErrorMessage, Field } from 'formik';
import * as Yup from 'yup';
import axios from 'axios';


const Register = () => {
    const paperStyle = { padding: '30px 20px', width: 300, margin: '20px auto', border: "solid black" }
    const headStyle = { margin: 0, fontFamily: 'san-serif', color: 'blue' }
    const marginTop = { margin: 15 }
    const formStyle = { textAlign: 'center' }
    const initialValues = {
        firstname: '',
        lastname: '',
        email: '',
        password: '',
        confirmpassword: ''
    }


    let history = useHistory();
    const onSubmit = (values, props) => {
        const user = {
            firstname: values.firstname,
            lastname: values.lastname,
            email: values.email,
            password: <PASSWORD>
        }
        
        console.log(user)
        axios.post("http://localhost:8081/account/register", user)
            .then((response) => {
                var res = response.status;
                console.log(response.data)
                console.log(response.status)
                if (res === 200) {
                    alert("Successfully registered")
                    history.push('/login');
                }

            })
            .catch((error) => {
                if (error.response.status === 400) {
                    console.log(error.response.data.message);
                    alert("Email already exist")

                    props.resetForm()
                }
                else
                    alert("Something went wrong")
                console.log(error)
            });



    }
    const validationSchema = Yup.object().shape({
        firstname: Yup.string()
            //.min(2, "Its too short")
            .required("Required"),
        lastname: Yup.string().required("Required"),
        email: Yup.string().email("Enter valid email").required("Required"),
        password: Yup.string()
            .matches(/^.*(?=.{8,})((?=.*[!@#$%^&*()\-_=+{};:,<.>]){1})(?=.*\d)((?=.*[a-z]){1})((?=.*[A-Z]){1}).*$/,
                "Password must contain at least 8 characters, one uppercase, one number and one special case character")
            .required("Required"),
        confirmpassword: Yup.string().required("Please confirm your password")
            .when("password", {
                is: password => (password && password.length > 0 ? true : false),
                then: Yup.string().oneOf([Yup.ref("password")], "Password doesn't match")
            })
    }
    )
    return (

        <Grid >
            <Paper elevation={20} style={paperStyle}>
                <Grid align='center'>

                    <Grid>
                        <img src={logo} alt="logo" width='180' height='100' />
                    </Grid>
                    <h2 style={headStyle} >
                        Register
                    </h2>
                    <Typography variant='caption'>
                        Please fill this form to create an account!
                    </Typography>
                </Grid>
                <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit}>
                    {(props) => (
                        <Form style={formStyle}>

                            <Field as={TextField} fullWidth label='First Name' name='firstname' value={props.values.firstname}
                                required error={props.errors.firstname && props.touched.firstname}
                                onChange={props.handleChange} helperText={<ErrorMessage name='firstname' />} />
                            <Field as={TextField} fullWidth label='Last Name' name='lastname' required error={props.errors.lastname && props.touched.lastname}
                                value={props.values.lastname} onChange={props.handleChange} helperText={<ErrorMessage name='lastname' />} />
                            <Field as={TextField} fullWidth label='Email' type='email' required error={props.errors.email && props.touched.email}
                                name='email' value={props.values.email} onChange={props.handleChange} helperText={<ErrorMessage name='email' />} />
                            <Field as={TextField} fullWidth label='Password' type='password' required error={props.errors.password && props.touched.password}
                                value={props.values.password} onChange={props.handleChange} name='password' helperText={<ErrorMessage name='password' />} />
                            <Field as={TextField} fullWidth label='Confirm Password' required error={props.errors.confirmpassword && props.touched.confirmpassword}
                                value={props.values.confirmpassword} onChange={props.handleChange} name='confirmpassword' helperText={<ErrorMessage name='confirmpassword' />} />
                            <Button type='submit' variant='contained' color='primary' style={marginTop} align='center'>Register</Button>
                        </Form>
                    )}
                </Formik>
            </Paper>
        </Grid>

    );

}

export default Register;
<file_sep>/*import React from "react";
const home=()=>
{
    return(
        <div align='center'> 
        Home<br/><br></br>
        <input type="button"
        value="Go"
        />
        </div>
    )
}
export default home;*/

import React, { useEffect } from 'react';
import { Grid, Typography,Button } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import { makeStyles } from '@material-ui/core/styles';
import CardActionArea from '@material-ui/core/CardActionArea';
//import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
//import CardMedia from '@material-ui/core/CardMedia';
import Box from '@material-ui/core/Box';
import logo from './logo.jpeg';
import explore from './explore.jpeg';
import {Component} from 'react';
import opp from './opp.jpeg';
import AppBar from '@material-ui/core/AppBar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import HomeIcon from '@material-ui/icons/Home';
import Toolbar from '@material-ui/core/Toolbar';
import { positions } from '@material-ui/system';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import InstagramIcon from '@material-ui/icons/Instagram';
import YouTubeIcon from '@material-ui/icons/YouTube';
import FacebookIcon from '@material-ui/icons/Facebook';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import axios from 'axios';
import {useState} from 'react';
import {Route, useHistory } from 'react-router-dom';
import { SettingsCellOutlined } from '@material-ui/icons';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import {Formik, Form} from 'formik';
import moment from 'moment';
import { blue } from '@material-ui/core/colors';
import DashboardIcon from '@material-ui/icons/Dashboard';

const imgstyle = {
  margin: '10px 60px'
}
const useStyles = makeStyles((theme) => ({
  root: {
    minwidth:200,
    
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  homeButton: {
    marginLeft: theme.spacing(143),
  },
  media: {
    height: 140,
    /*minwidth:200,
    alignItems:'center'*/
    
  }
}));



	export default function ButtonAppBar() {

    /*const dataInfo=JSON.parse(localStorage.getItem("myInfo"))
      const id=dataInfo.userId*/


      const [event, setEvent] = useState([]);
      let id=11
      
     useEffect(()=>{
     
      {
       
      axios.get(`http://localhost:8081/account/events/getEventParticipated/${id}`)
     .then((response) => {
     
      setEvent(response.data.events)
      
      })
    };
  }, [])
 
      
      

   
    
      
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
 

  const handleClose = () => {
    setAnchorEl(null);};

 /*   
    let history = useHistory();
  const home = () => {
   
    history.push('/home');

  };
  let history = useHistory();
  const login = () => {
    setAnchorEl(null);
    history.push('/login');

  };
*/

/*const history = useHistory();*/


  return (

    
    <Box  mr={1}> 

      
       

<AppBar position="static">
  <Toolbar>
    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
      <DashboardIcon />
    </IconButton>
	
    <Typography variant="h6" className={classes.title}>
      Dashboard
    </Typography>

	<IconButton edge="end" padding="20px"  className={classes.homeButton} color="inherit" aria-label="menu"   >
      <HomeIcon />
    </IconButton>

	<div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} variant="contained" color="primary">
        Hello user,
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
    
  </Toolbar>
</AppBar>

      
	<br/>

	<center> <h2 color="primary">Oppurtunities Participated</h2> </center>
<center>

<Grid item xs={12} sm={6} md={3}>
<Card className={useStyles.root}>
<CardActionArea>
<CardContent style={{backgroundColor:"yellow"}}>
<Typography gutterBottom variant="h6" component="h1" color="inherit">
  <Formik align='center'>
                            {(props) => (
                                event.map(post=>(
                                    <Form key={post.event_id}>
                                {post.name} <br/>
                                Event id : {post.event_id}<br/>
                        
                                 Type : {post.event_type} <br/>
                                Venue : {post.venue} <br/>
                               
                                </Form>
                                ))
                                
                            )}
                        </Formik>
              
               
                        </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
            </Grid>
                </center>	    
     
      
    </Box>

  )
}

/*Date : {moment(post.start_time).format('MMMM Do YYYY')}<br></br>
Time : {moment(post.start_time).format('h:mm a')}<br></br>*/<file_sep>package com.targetplatform.model;

import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.Email;


public class User {
	
	@NotEmpty(message="first name is mandatory")
	private String firstName;
	
	@NotEmpty
	private String lastName;
	
	@NotEmpty(message="email is mandatory")
	@Email
	private String email;
	
	@NotEmpty(message="new password is mandatory")
	@ValidPassword
	private String password;

	//default constructor
	public User()
	{
		
	}
	
	//constructor with fields
	public User(String firstName,String lastName,String email) {
		super();
		this.firstName=firstName;
		this.lastName=lastName;
		this.email=email;
	}
	
	//Getters and Setters
	public String getFirstname() {
		return firstName;
	}
	public void setFirstname(String firstName) {
		this.firstName = firstName;
	}
	
	public String getLastname() {
		return lastName;
	}
	public void setLastname(String lastName) {
		this.lastName = lastName;
	}
	
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	


}
<file_sep>import React from "react";
consthome=(props)=>{
    const handleLogout=()=>{
        props.history.push('/login)')
    }
    return(
        <div> 
        Welcome
        <input type="button"
        value="Logout"
        onClick={handleLogout}
        />
        </div>
    )
}
export default home;<file_sep>package com.target.VolunteeringPlatform.RequestResponse;


public class LoginResponse {
    private int id;
    private String email;
    private String roles;

    public LoginResponse(int id,String email, String roles) {
        super();
        this.id = id;
        this.email = email;
        this.roles = roles;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getRoles() {
        return roles;
    }

    public void setRoles(String roles) {
        this.roles = roles;
    }
}

<file_sep>package com.target.Volunteeringplatform;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class VolunteeringPlatformProfileApplication {

	public static void main(String[] args) {
		SpringApplication.run(VolunteeringPlatformProfileApplication.class, args);
	}

}
<file_sep>plugins {
	id 'org.springframework.boot' version '2.5.2'
	id 'io.spring.dependency-management' version '1.0.11.RELEASE'
	id 'java'
}

group = 'com.target.igniteplus'
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '1.8'

repositories {
	mavenCentral()
}

dependencies {
	implementation 'org.springframework.boot:spring-boot-starter-web'
	implementation group: 'org.springframework', name: 'spring-webmvc'



	runtimeOnly 'com.h2database:h2'

	implementation group: 'org.apache.tomcat.embed', name: 'tomcat-embed-jasper'

	implementation group: 'org.springframework.data', name: 'spring-data-jpa'
	implementation group: 'javax.persistence', name: 'javax.persistence-api'
	implementation group: 'org.springframework', name: 'spring-jdbc'


	testImplementation group: 'com.h2database', name: 'h2'
	testImplementation 'org.springframework.boot:spring-boot-starter-test'


}

test {
	useJUnitPlatform()
}
<file_sep>import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import './App.css';
import PastEvents from './Components/PastEvents';
import EditEvents from './Components/EditEvents';
import LeaderRR from './Components/LeaderRR';
//import home from './Components/home';

function App() {
	return (
		<Router>
			<Switch>
				<Route exact path = '/pastevents' component = {PastEvents} />
		        	<Route exact path = '/editevents' component = {EditEvents} />
        			<Route exact path = '/leaderrr' component = {LeaderRR} />
		    </Switch>
		</Router>
	);
}

export default App;
<file_sep>rootProject.name = 'VolunteeringPlatform'
<file_sep>CREATE TABLE IF NOT EXISTS user (
  user_id bigint(20) NOT NULL,
  email varchar(255) DEFAULT NULL,
  first_name varchar(255) DEFAULT NULL,
  last_name varchar(255) DEFAULT NULL,
  password varchar(255) DEFAULT NULL,
  active int(10) DEFAULT NULL,
  role varchar(255) DEFAULT NULL,
  PRIMARY KEY (user_id),
  UNIQUE KEY (email)
);<file_sep>import React, {useEffect, useState} from 'react';
import {Grid, Box, Card, CardContent, Button, Typography, Tooltip, makeStyles} from '@material-ui/core';
import logo from './HH-logo.jpg';
import wkndevnt1 from './img1.jpg';
//import wkndevnt2 from './img2.jpg';
import moment from 'moment';
import axios from 'axios';

const useStyles = makeStyles({
    card:{
        backgroundColor:"#D6EAF8",
        '&:hover':{
            backgroundColor:"#EBF5FB",
        }
    },
    button:{
        color:"primary",
        '&:hover':{
            backgroundColor:"#2471A3",
        },
        marginTop:"8px"
    }
    });

const PastEvents = (props) => {
    const gridStyle={margin:'3px auto', padding:'5px auto'}
    const headStyle = {margin:'0', fontFamily:'serif', color:'blue'}
    const btnStyle = {margin:'8px 0'}
    const logoStyle = {height:98, width:128}
    //const imgStyle = {height:'100px', width:'180px'}
    //const stepperStyle = {}


    /*const handleChange = () => {
        props.history.push('/home)')
    }*/

    const [pevent, setPevent] = useState([])
    const event = "Past event"
    useEffect(() => {
        axios.get('http://localhost:8081/account/events/getEventsList/false/Weekend event')
        //('http://localhost:8081/account/events/getEvents/'.concat('/isFutureEvent').concat('past'))
        //(`http://localhost:8081/account/events/getEventsList/isFutureEvent${past}/eventTypes${event}`)
        .then(response => {
            console.log(response)
            console.log(response.data[0].event_id)
            setPevent(response.data)
        })
        .catch(error => {
            if(error.response.status===400 || error.response.status===401) {
                console.log(error.response.data.message)
            }
            else {
                console.log("Oop! Something went wrong")
            }
        })
    },[event])

    const classes = useStyles();
    return(
        <Box>
            <Box mt={1} mb={3} align="center">
                <img src={logo} style={logoStyle} alt="Logo" />
            </Box>

            <Box align="center">
                <Typography variant='h4' style={headStyle}>
                    <b> Past Events</b>
                </Typography>
            </Box>

            <Box m={5}>
                <Grid container spacing={6}>
                    {pevent.map((post)=>(
                        <Grid item xs={12} sm={6} md={6}>
                            <Card style={{minwidth:200}} className={classes.card}>
                                <CardContent>
                                    <Grid container spacing={5}>
                                        <Grid item xs={6} style={gridStyle}>
                                            <Tooltip title={post.name}>
                                                <img src={wkndevnt1} height='100%' width='100%' alt="Old Age Home" />
                                            </Tooltip>
                                        </Grid>
                                        <Grid item xs={6} style={gridStyle}>
                                            <p align="left">
                                                <br></br>
                                                <b>{post.name}</b>
                                                <br></br>
                                                Venue: {post.venue}
                                                <br></br>
                                                Date: {moment(post.start_time).format('MMMM Do YYYY')}
                                                <br></br>
                                                Start-Time: {moment(post.start_time).format('h:mm a')}
                                                <br></br>
                                                End-Time: {moment(post.end_time).format('h:mm a')}
                                                <br></br>
                                                About: {post.description}
                                                <br></br>
                                            </p>
                                            
                                        </Grid>
                                    </Grid>
                                </CardContent>
                            </Card>
                        </Grid>
                    ))}
                </Grid>
                <br></br>
                <br></br>
                <Grid align="right">
                    <Button style={btnStyle} color='primary' variant='contained'>Go To Home Page</Button>
                </Grid>
            </Box>
        </Box>
    )
}

export default PastEvents;
<file_sep>package com.targetplatform.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.targetplatform.model.User;

@Controller
@RequestMapping("/registration")
public class UserController {

	@ModelAttribute("user")
	public User userRegistration()
	{
		return new User();
	}

	@GetMapping
	public String showRegistrationForm(Model model)
	{
		return "registration";
	}
	
	@PostMapping
	public String registerUser(@Valid @ModelAttribute("user") User userRegistration 
			, BindingResult bindingResult ) 
	/*BindingResult - interface which dictates how the object that stores the result 
	  of validation should store and retrieve the results of the validation */
	{
		if(bindingResult.hasErrors()) {
			return "registration";
		}
		return "success";
	}

}


<file_sep>
import './App.css';
import React, { useState } from 'react';
import Navbar from './components/Navbar';
import { makeStyles } from '@material-ui/core/styles';
import { Carousel } from 'react-bootstrap';
import { blueGrey } from '@material-ui/core/colors';
import Card from '@material-ui/core/Card';
import Grid from '@material-ui/core/Grid';

import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button';
import Footer from './components/Footer';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';


const useStyles = makeStyles({

  card: {
    paddingTop: '5px',
    height: '300px',
    width: '1200px',
    margin: 'auto',
    // marginLeft : '70px',
    backgroundColor: "#E5E7E9",

    '&:hover': {
      backgroundColor: "#AEB6BF",
    }
  },
});

function App() {
  

  const classes = useStyles();

  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

  return (
    <div className="App">
      <Navbar />

      <br />
      <Carousel fade activeIndex={index} onSelect={handleSelect} >
        <Carousel.Item interval={2000}>
          <img
            className="d-block w-100"
            src="images/cs1.jpg"
            alt="Waste Collection"
          />
          <Carousel.Caption>
            <h3>Waste Collection Program</h3>

          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item interval={2000}>
          <img
            className="d-block w-100"
            src="images/cs3.jpg"
            alt="Food Distribution Event"
          />
          <Carousel.Caption>
            <h3>Food Distribution Event</h3>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item interval={2000}>
          <img
            className="d-block w-100"
            src="images/cs2.jpg"
            alt="Clean Environment"
          />
          <Carousel.Caption>
            <h3>Clean Environment Program</h3>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>

      <br />
      <br />

      <Card style={{ marginTop: '30px' }} className={classes.card}>
        <Grid container spacing={2}
          direction="column"
          alignItems="center"
          justify="center"
        >
          <CardContent>

            <Typography coponent="div">
              <Box fontFamily="Display" fontSize="h4.fontSize" style={{color:"#11052C"}}>
             About Volunteering
              </Box>

              <Box fontFamily="cursive" style={{color:"orange"}}>
              <i>Making differences in lives...</i>
              </Box>
              
              <br />
              <p>
                Offering a variety of volunteer opportunities is one way to ensure that employees or community members find
                at least one thing in which they’d feel comfortable participating.
                People choose to volunteer for a variety of reasons. For some it offers the chance to give something back to the c
                ommunity or make a difference to the people around them. For others it provides an opportunity to develop new skills
                or
                build on existing experience and knowledge.

                <br />

                Volunteering allows you to connect to your community and make it a better place. ... And volunteering is a
                two-way street: It can benefit you and your family as much as the cause you choose to help. Dedicating your
                time as a volunteer helps you make new friends, expand your network, and boost your social skills.
              </p>


            </Typography>

          </CardContent>

        </Grid>

      </Card>
      <br />
      <Footer />
      <Button>Learn More</Button>
    </div>

  );
}

export default App;
<file_sep>import React, {useState, useEffect} from 'react';
import {Grid, Paper, Box, Button, Card, CardContent, Select, NativeSelect, MenuItem, InputLabel, FormControl, FormHelperText, Tooltip, Typography, TextField, AppBar, IconButton, Toolbar , makeStyles} from '@material-ui/core';
import {ArrowBack, Home, Menu } from '@material-ui/icons';
import {Formik, Form, Field, ErrorMesage} from 'formik';
//import logo from './HH-logo.jpg';
import icon from './HH-icon.ico';
import 'date-fns';
import DateFnsUtils from '@date-io/date-fns';
import { MuiPickersUtilsProvider, KeyboardTimePicker, KeyboardDatePicker, } from '@material-ui/pickers';

//import Dropdown from 'react-dropdown';

import es from 'date-fns/locale/es';
import moment from 'moment';
import axios from 'axios';


const EditEvents = (props) => {
    const paperStyle = {padding:'10px 25px', height:'auto', width:'auto', margin:'20px 25px', border:' black'}
    const gridStyle = {margin:'auto auto', padding:'auto auto'}
    const headStyle = {margin:'0', fontFamily:'sans-serif', color:'#8A2BE2'}
    const btnStyle = {margin:'15px 15px'}
    const logoStyle = {height:98, width:128}
    const iconStyle = {height:45, width:45}
    const formStyle = {width:'100%'}

    const [wevent, setWevent] = useState([])
    const event = "Weekend event"
    //const future=true
    useEffect(() => {
        axios.get('http://localhost:8081/account/events/getEventsList/true/Weekend event')
        //('http://localhost:8081/account/events/getEvents/'.concat('/isFutureEvent').concat('event'))
        //(`http://localhost:8081/account/events/getEventsList/isFutureEvent${future}/eventTypes${event}`)
        .then(response => {
            console.log(response)
            console.log(response.data[0].event_id)
            setWevent(response.data)
        })
        .catch(error => {
            if(error.response.status===400 || error.response.status===401) {
                console.log(error.response.data.message)
            }
            else {
                console.log("Oop! Something went wrong")
            }
        })
    },[event])

    const [selectedDate, setSelectedDate] = React.useState(new Date());

    const handleDateChange = (date) => {
        setSelectedDate(date);
    };

    const onSubmit = (values, props) => {
        const event = Object.create(values)
        axios.post("localhost:8081/")
    }

    const options = [
        { value: 'weekendevents', label: 'Weekend Events' },
        { value: 'webinarforNGOs', label: 'Webinar for NGOs' },
        { value: 'foodforthought', label: 'Food for Thought' },
        { value: 'artsandcraft', label: 'Arts & Craft' },
      ];

    const useStyles = makeStyles((theme) => ({
        root: {
            display: 'flex',
            '& > *': {
              margin: theme.spacing(1),
            },
        },
        homeButton: {
            marginRight: theme.spacing(2),
        },
        backButton: {
            marginLeft: theme.spacing(1),
        },
        button:{
            color:"primary",
            '&:hover':{
                backgroundColor:"#2471A3",
            },
            marginTop:"8px"
        }
    }));

    const classes = useStyles();

    return (
        <Box >
            <AppBar position="sticky">
                <Toolbar>
                    <IconButton align='center' edge="start" className={classes.homeButton} color="inherit" aria-label="Home">
                        <img src={icon} style={iconStyle} alt='HH' />
                    </IconButton>
                    <Typography>
                        <b>Helping Hands</b>
                    </Typography>
                </Toolbar>
            </AppBar>

            <MuiPickersUtilsProvider utils={DateFnsUtils}>
                <Grid style={gridStyle} >
                    <Paper style={paperStyle} elevation={2}>
                        <Grid item xs={12} align='center'>
                            <br />
                            <Typography variant='h4' style={headStyle}>
                                <b>Edit Events</b>
                            </Typography>
                            <br /><br />
                        </Grid>

                        <FormControl style={formStyle} variant="outlined" align="center">
                            <InputLabel>Event Type</InputLabel>
                            <NativeSelect label="Event Type" >
                                <option align-items='center' value="" />
                                <option value="weekendevent">Weekend Event</option>
                                <option disabled value="webinarforngo">Webinars for NGO</option>
                                <option disabled value="artsandcraft">Arts &amp; Craft</option>
                                <option disabled value="foodforthought">Food for Thought</option>
                            </NativeSelect>
                            <FormHelperText>Find event by type</FormHelperText>
                            <br />
                        </FormControl>

                        <Grid container spacing={4}>
                            {wevent.map((post)=>(
                                <Grid item xs={12} >
                                    <Card style={{minwidth:200}} className={classes.card}>
                                        <CardContent>
                                            <Grid container spacing={2}>
                                                <Grid style={gridStyle}>
                                                    <Formik>
                                                        {(props) => (
                                                            <Form >
                                                                <p align="left">
                                                                    <Field as={TextField} fullWidth label="Event Name" name="eventname" value={post.name} required />
                                                                    <br /><br />
                                                                    <Field as={TextField} fullWidth label="Venue" name="venue" value={post.venue} required />
                                                                    <br /><br />
                                                                    <TextField
                                                                        id="standard-multiline-static"
                                                                        label="Description"
                                                                        name="description"
                                                                        multiline
                                                                        fullWidth
                                                                        maxRows={4}
                                                                        defaultValue={post.description}
                                                                        required
                                                                    />
                                                                </p>
                                                            </Form>
                                                        )}
                                                    </Formik>
                                                </Grid>
                                                 
                                                <Grid style={gridStyle}>
                                                    <Formik>
                                                        {(props) => (
                                                            <Form >
                                                                <p align="left">
                                                                    <TextField
                                                                        id="standard-read-only-input"
                                                                        label="Event ID"
                                                                        defaultValue={post.event_id} 
                                                                        inputProps={{readOnly: true,}}
                                                                    />
                                                                    <br />                                                  
                                                                    <KeyboardDatePicker
                                                                        disableToolbar
                                                                        disablePast
                                                                        variant="inline"
                                                                        format="MMM dd yyyy"
                                                                        margin="normal"
                                                                        id="date-picker-inline"
                                                                        label="Date"
                                                                        defaultValue={moment(post.start_time)}
                                                                        required
                                                                        onChange={handleDateChange}
                                                                        KeyboardButtonProps = {{
                                                                            'aria-label': 'change date',
                                                                        }}
                                                                    />
                                                                    <br /><br />
                                                                    <Field as={TextField} fullWidth label="Start Time" name="starttime" value={moment(post.start_time).format('h:mm a')} required />
                                                                    <br /><br />
                                                                    <Field as={TextField} fullWidth label="End Time" name="endtime" value={moment(post.end_time).format('h:mm a')} required />
                                                                    <br />
                                                                </p>
                                                            </Form>
                                                        )}
                                                    </Formik>
                                                </Grid>
                                            </Grid>
                                        </CardContent>

                                        <Button type='submit' style={btnStyle} color='primary' align='right' variant='contained' >
                                            Save Changes
                                        </Button>
                                    </Card>
                                </Grid>
                            ))}
                        </Grid>
                    </Paper>
                </Grid>
            </MuiPickersUtilsProvider>
        </Box>
    )
}

export default EditEvents;
<file_sep>package com.target.VolunteeringPlatform.Controller;

import com.target.VolunteeringPlatform.DAO.UserRepository;
import com.target.VolunteeringPlatform.RequestResponse.LoginRequest;
import com.target.VolunteeringPlatform.RequestResponse.LoginResponse;
import com.target.VolunteeringPlatform.RequestResponse.MessageResponse;
import com.target.VolunteeringPlatform.RequestResponse.SignupRequest;
import com.target.VolunteeringPlatform.Service.UserDetailsImpl;
import com.target.VolunteeringPlatform.Service.UserDetailsServiceImpl;
import com.target.VolunteeringPlatform.model.User;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.stream.Collectors;


@RestController
@RequestMapping("/account")
public class UserController {

    @Autowired
    UserDetailsServiceImpl userService;

    @Autowired
    UserRepository userRepository;

    @Autowired
    AuthenticationManager authenticationManager;

    @Autowired
    PasswordEncoder encoder;

    @CrossOrigin("http://localhost:3000")
    @RequestMapping(value = "/register", method = RequestMethod.POST)
    public ResponseEntity<?> createUser(@RequestBody SignupRequest newUser) {

        if (userRepository.findByEmail(newUser.getEmail()) != null) {
            return ResponseEntity
                    .badRequest()
                    .body(new MessageResponse("Error: Email is already taken!"));
        }
        User user = new User(newUser.getEmail(),newUser.getFirstname(),newUser.getLastname(), encoder.encode(newUser.getPassword()));
        userService.saveUser(user);
        return ResponseEntity.ok(new MessageResponse("User registered successfully!"));
    }

    @CrossOrigin("http://localhost:3000")
    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public ResponseEntity<?> validateUser(@RequestBody LoginRequest loginRequest) {
       Authentication authentication = authenticationManager.authenticate(
                new UsernamePasswordAuthenticationToken(loginRequest.getEmail(), loginRequest.getPassword()));

        SecurityContextHolder.getContext().setAuthentication(authentication);

        UserDetailsImpl userDetails = (UserDetailsImpl) authentication.getPrincipal();

        List<String> roles = userDetails.getAuthorities().stream()
                .map(GrantedAuthority::getAuthority)
                .collect(Collectors.toList());

        return ResponseEntity.ok(new LoginResponse(userDetails.getId(),
                userDetails.getEmail(), roles.get(0)));
    }
}
<file_sep>import React, { useEffect } from 'react';
import { Grid, Typography,Button } from '@material-ui/core';
import Card from '@material-ui/core/Card';
import { makeStyles } from '@material-ui/core/styles';
import CardActionArea from '@material-ui/core/CardActionArea';
//import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
//import CardMedia from '@material-ui/core/CardMedia';
import Box from '@material-ui/core/Box';
import logo from './logo.jpeg';
import explore from './explore.jpeg';
import opp from './opp.jpeg';
import AppBar from '@material-ui/core/AppBar';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import HomeIcon from '@material-ui/icons/Home';
import Toolbar from '@material-ui/core/Toolbar';
import { positions } from '@material-ui/system';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import InstagramIcon from '@material-ui/icons/Instagram';
import YouTubeIcon from '@material-ui/icons/YouTube';
import FacebookIcon from '@material-ui/icons/Facebook';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import axios from 'axios';
import {useState} from 'react';
import {Route, useHistory } from 'react-router-dom';
import DashboardIcon from '@material-ui/icons/Dashboard';




const imgstyle = {
  margin: '10px 60px'
}
const useStyles = makeStyles((theme) => ({
  root: {
    minwidth:200,

  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  homeButton: {
    marginLeft: theme.spacing(143),
  },
  media: {
    height: 140,
    /*minwidth:200,
    alignItems:'center'*/
    
  }
}));



	export default function ButtonAppBar() {

    /*const dataInfo=JSON.parse(localStorage.getItem("myInfo"))
      const id=dataInfo.userId*/

      const id=11

      const [count,setCount]=useState(0);
     useEffect(()=>{
     
      {
       
       
      axios.get(`http://localhost:8081/account/events/getEventParticipated/${id}`)
     .then((response) => {
       console.log(response.data.events);
        var ct = response.data.eventsCount;
        setCount(ct);  
      })
    };
  })
 
      
      

   
    
      
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
 

  const handleClose = () => {
    setAnchorEl(null);};

 /*   
    let history = useHistory();
  const home = () => {
   
    history.push('/home');

  };
  let history = useHistory();
  const login = () => {
    setAnchorEl(null);
    history.push('/login');

  };
*/

const history = useHistory();



  return (

    
	  

      <Box  mr={1}> 
       

<AppBar position="static">
  <Toolbar>
    <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
      <DashboardIcon/>
    </IconButton>
	
    <Typography variant="h6" className={classes.title}>
      Dashboard
    </Typography>

	<IconButton edge="end" padding="20px"  className={classes.homeButton} color="inherit" aria-label="menu" onClick={()=>{history.push("/done");}}  >
      <HomeIcon />
    </IconButton>

	<div>
      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} variant="contained" color="primary">
        Hello user,
      </Button>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={()=>{history.push("/login");}}>Logout</MenuItem>
      </Menu>
    </div>
    
  </Toolbar>
</AppBar>

      <Box mt={3} align="center">
        <img src={logo} alt="logo" width='200' height='150' />
      </Box>

	<br/>

	<center><h2>Welcome user,</h2></center>
	
	
	  <center>
      <Box m={3}>
		 <center>
        <Grid container spacing={10} direction="row"
  justifyContent="center"
  alignItems="center">
		
          <Grid item xs={12} sm={6} md={3}>
		   
            <Card className={useStyles.root}>
              <CardActionArea onClick={()=>{history.push("/home");}} >
              
                <img src={opp} alt="oppurtunities participated" width='40%' height='120' style={imgstyle} />
                
                <CardContent>
                <Button variant="contained" color="secondary"> 
                
                {count}
  
                </Button>
                  <Typography gutterBottom variant="h6" component="h1" color="primary"  >
                    Oppurtunities Participated
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          </Grid>
          <Grid item xs={12} sm={6} md={3}>
            <Card className={useStyles.root}>
              <CardActionArea>
               <img src={explore} alt="explore" width='40%' height='120' style={imgstyle} />
                <CardContent>
                  <Typography gutterBottom variant="h6" component="h1" color="primary">
                    <br/>
                  Explore Oppurtunities
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          </Grid>
          
          
        </Grid>
		</center>
       </Box>
       <br/>
       <br/>
       <br/>
       <BottomNavigation
      value={value}
      onChange={(event, newValue) => {
        setValue(newValue);
      }}
      showLabels
      className={classes.root}
    >
      <BottomNavigationAction label="Facebook" icon={<FacebookIcon />} />
      <BottomNavigationAction label="Instagram" icon={<InstagramIcon />} />
      <BottomNavigationAction label="YouTube" icon={<YouTubeIcon />} />
    </BottomNavigation>

	   </center>
      
      
       </Box>

  )
}<file_sep>server.port=8081
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true
spring.datasource.url=jdbc:h2:mem:targetuserdb;DB_CLOSE_DELAY=-1
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.h2.console.enabled=true
spring.h2.console.path=/account/h2
<file_sep>package com.target.igniteplus.mvcdemo.controller;

public @interface CrossOrigin {
}
<file_sep>rootProject.name = 'VolunteeringPlatformProfile'
<file_sep>import React, {useEffect, useState} from 'react';
import {Grid, Box, AppBar, Toolbar, Typography, IconButton, Paper, Card, CardContent, Avatar, Checkbox, Button, makeStyles, FormGroup, FormControlLabel} from '@material-ui/core';
import {ArrowBack, Home, Menu } from '@material-ui/icons';
import {Formik, Form, Field } from 'formik';
import logo from './HH-logo.jpg';
import icon from './HH-icon.ico';
import axios from 'axios';

const LeaderRR = () => {
    const paperStyle = {padding:'10px 25px', height:'auto', width:'auto', margin:'15px 20px', border:' black'}
    const gridStyle = {margin:'3px auto', padding:'5px auto'}
    const headStyle = {margin:'0', fontFamily:'sans-serif', color:'#8A2BE2'}
    const btnStyle = {margin:'8px 0'}
    const logoStyle = {height:98, width:128}
    const iconStyle = {height:45, width:45}
    const formStyle = {textAlign:'center'}

    const [eventRR, setEventRR] = useState([])
    const event = "Past event RR"
    useEffect(() => {
        axios.get('http://localhost:8081/account/events/getEventsList/false/Weekend event')
        //('http://localhost:8081/account/events/getEvents/'.concat('/isFutureEvent').concat('future'))
        //(`http://localhost:8081/account/events/getEventsList/isFutureEvent${future}/eventTypes${event}`)
        .then(response => {
            console.log(response)
            console.log(response.data[0].event_id)
            setEventRR(response.data)
        })
        .catch(error => {
            if(error.response.status===400 || error.response.status===401) {
                console.log(error.response.data.message)
            }
            else {
                console.log("Oop! Something went wrong")
            }
        })
    },[event])

    

    const useStyles = makeStyles((theme) => ({
        root: {
          display: 'flex',
          '& > *': {
            margin: theme.spacing(1),
          },
        },
        large: {
            width: theme.spacing(10),
            height: theme.spacing(10),
        },
        homeButton: {
            marginRight: theme.spacing(5),
        },
        button:{
            color:"primary",
            '&:hover':{
                backgroundColor:"#2471A3",
            },
            marginTop:"8px"
        }
    }));

    const classes = useStyles();

    return (
        <Box>
            <AppBar position="sticky">
                <Toolbar>
                    <IconButton align='center' edge="end" className={classes.homeButton} color="inherit" aria-label="Home">
                        <img src={icon} style={iconStyle} alt='HH' />
                    </IconButton>
                    <Typography>
                        <b>Helping Hands</b>
                    </Typography>
                </Toolbar>
            </AppBar>

        <Grid style={gridStyle}>
            
            
                <Grid align='center'>
                    <br />
                    <Typography variant='h4' style={headStyle}>
                        <b>Rewards &amp; Recognition</b>
                    </Typography>
                </Grid>
                
                {eventRR.map((postOne)=>(
                
                <Formik >
                    {(props) => (
                        
                        <Form style={formStyle}>
                            
                            <Paper style={paperStyle} elevation={15}>
                                
                                        <p align="left">
                                            <Typography style={{textTransform: "uppercase"}} variant='h6' align="center">
                                                <b>{postOne.name}</b>
                                            </Typography>
                                            <br />
                                            <b> Participant(s): </b>
                                            
                                            <div className={classes.root}>
                                                <Card >
                                                    <CardContent>
                                                        <Avatar src="/broken-image.jpg" className={classes.large} />
                                                        <Typography>
                                                            Participant1
                                                        </Typography>
                                                    </CardContent>
                                                    <Checkbox color='primary' inputProps = {{'aria-label': 'uncontrolled-checkbox'}} />
                                                </Card>

                                                <Card>
                                                    <CardContent>
                                                        <Avatar src="/broken-image.jpg" className={classes.large} />
                                                        
                                                        <Typography>
                                                            Participant2
                                                        </Typography>
                                                    </CardContent>
                                                    <Checkbox color='primary' inputProps = {{'aria-label': 'uncontrolled-checkbox'}} />
                                                </Card>
                                                
                                                <Card>
                                                    <CardContent>
                                                        <Avatar src="/broken-image.jpg" className={classes.large} />
                                                        <Typography>
                                                            Participant3
                                                        </Typography>
                                                    </CardContent>
                                                    <Checkbox color='primary' inputProps = {{'aria-label': 'uncontrolled-checkbox'}} />
                                                </Card>
                                            </div>                    
                                        </p>
                                        <Button style={btnStyle} align='right' type='submit' color='primary' variant="contained">Nominate</Button>
                                    
                                
                            </Paper>

                        </Form>
                    )}
                </Formik>
            ))}
        
    </Grid>

    </Box>

    )
}

export default LeaderRR;
<file_sep>import React, {useEffect, useState} from 'react';
import {Grid, Box, AppBar, Toolbar, IconButton, Card, CardContent, Button, Typography, Tooltip, makeStyles} from '@material-ui/core';
import logo from './HH-logo.jpg';
import icon from './HH-icon.ico';
import wkndevnt1 from './img1.jpg';
//import wkndevnt2 from './img2.jpg';
import moment from 'moment';
import axios from 'axios';

const useStyles = makeStyles({
    card:{
        backgroundColor:"#D6EAF8",
        '&:hover':{
            backgroundColor:"#EBF5FB",
        }
    },
    button:{
        color:"primary",
        '&:hover':{
            backgroundColor:"#2471A3",
        },
        marginTop:"8px"
    }
    });

const PastEvents = (props) => {
    const gridStyle={margin:'3px auto', padding:'5px auto'}
    const headStyle = {margin:'0', fontFamily:'sans-serif', color:'#8A2BE2'}
    const btnStyle = {margin:'8px 0'}
    const logoStyle = {height:98, width:128}
    const iconStyle = {height:45, width:45}
    //const imgStyle = {height:'100px', width:'180px'}
    //const stepperStyle = {}


    /*const handleChange = () => {
        props.history.push('/home)')
    }*/

    const [pevent, setPevent] = useState([])
    const event = "Past event"
    useEffect(() => {
        axios.get('http://localhost:8081/account/events/getEventsList/false/Weekend event')
        //('http://localhost:8081/account/events/getEvents/'.concat('/isFutureEvent').concat('past'))
        //(`http://localhost:8081/account/events/getEventsList/isFutureEvent${past}/eventTypes${event}`)
        .then(response => {
            console.log(response)
            console.log(response.data[0].event_id)
            setPevent(response.data)
        })
        .catch(error => {
            if(error.response.status===400 || error.response.status===401) {
                console.log(error.response.data.message)
            }
            else {
                console.log("Oop! Something went wrong")
            }
        })
    },[event])

    const classes = useStyles();
    
    return(
        <Box>
            <AppBar position="sticky">
                <Toolbar>
                    <IconButton align='center' edge="end" className={classes.homeButton} color="inherit" aria-label="Home">
                        <img src={icon} style={iconStyle} alt='HH' />
                    </IconButton>
                    <Typography>
                        <b>Helping Hands</b>
                    </Typography>
                </Toolbar>
            </AppBar>

            <Box align="center">
                <br />
                <Typography variant='h4' style={headStyle}>
                    <b>Past Events</b>
                </Typography>
            </Box>

            <Box m={5}>
                <Grid container spacing={6}>
                    {pevent.map((post)=>(
                        <Grid item xs={12} sm={6} md={6}>
                            <Card style={{minwidth:200}} className={classes.card}>
                                <CardContent>
                                    <Grid container spacing={5}>
                                        <Grid item xs={6} style={gridStyle}>
                                            <Tooltip title={post.name}>
                                                <img src={wkndevnt1} height='100%' width='100%' alt="Old Age Home" />
                                            </Tooltip>
                                        </Grid>
                                        <Grid item xs={6} style={gridStyle}>
                                            <Typography style={{textTransform: "uppercase"}} align="center">
                                                <b>{post.name}</b>
                                            </Typography>

                                            <p align="left">
                                                
                                                <b>Venue:</b> {post.venue}
                                                <br />
                                                <b>Date:</b> {moment(post.start_time).format('MMMM Do YYYY')}
                                                <br />
                                                <b>Start Time:</b> {moment(post.start_time).format('h:mm a')}
                                                <br />
                                                <b>End Time:</b> {moment(post.end_time).format('h:mm a')}
                                                <br />
                                                <b>Description:</b> {post.description}
                                                <br />
                                            </p>
                                        </Grid>
                                    </Grid>
                                </CardContent>
                            </Card>
                        </Grid>
                    ))}
                </Grid>
                <br></br>
                <br></br>
                <Grid align="right">
                    <Button style={btnStyle} color='primary' variant='contained'>Go To Home Page</Button>
                </Grid>
            </Box>
        </Box>
    )
}

export default PastEvents;
