Skip to content

Commit

Permalink
Merge pull request #35 from uglyprincess/main
Browse files Browse the repository at this point in the history 
Incorporated axios + set up proxy
  • Loading branch information
@uglyprincess
uglyprincess authored Dec 22, 2020
2 parents a196dac + bf6fc88 commit 677d48a
Show file tree
Hide file tree
Showing 13 changed files with 384 additions and 241 deletions.
220 changes: 151 additions & 69 deletions package-lock.json
View file

Large diffs are not rendered by default.

8 changes: 6 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,19 @@
"name": "seroton-inn",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000/",
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/core": "^4.11.2",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"axios": "^0.21.0",
"draft-js": "^0.11.7",
"draft-js-image-plugin": "^2.0.7",
"draft-js-plugins-editor": "^3.0.0",
"http-proxy-middleware": "^1.0.6",
"querystring": "^0.2.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
Expand Down
1 change: 0 additions & 1 deletion public/_redirects
View file

This file was deleted.

Binary file removed public/favicon.ico
View file
Binary file not shown.
Binary file removed public/logo192.png
View file
Binary file not shown.
Binary file removed public/logo512.png
View file
Binary file not shown.
3 changes: 0 additions & 3 deletions public/robots.txt
View file

This file was deleted.

93 changes: 86 additions & 7 deletions src/components/auth-components/signin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import Container from '@material-ui/core/Container';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import InputAdornment from '@material-ui/core/InputAdornment';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import IconButton from '@material-ui/core/IconButton';

import logo from "../../assests/image/logo.png";
import backgroundImage from "../../assests/image/auth-image.png";
Expand All @@ -15,9 +19,16 @@ import gButton from "../../assests/vector/gButton.png";

import "./auth.css"

// This will send the data to the back-end:

import axios from "axios";
import querystring from "querystring";

const font = "'Secular One', sans-serif";
const font2 = "'Roboto'";

axios.defaults.withCredentials = true;

const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
Expand Down Expand Up @@ -118,6 +129,49 @@ const useStyles = makeStyles((theme) => ({
export default function CenteredGrid() {
const classes = useStyles();

// Using useState to store and update login info.

const [info, updateInfo] = React.useState({
username: '',
password: ''
});

// This function will be called upon clicking the button and will send the login info to the back end.

function sendInfo(){
axios.post(`/login`, querystring.stringify({username: info.username, password: info.password}), {
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
credentials: 'include',
withCredentials: true
}).then(function(response){
if (response.status === 200) {
localStorage.setItem('username', response.data.username)
localStorage.setItem('newUser',"false");
window.location = `/profile/${response.data.username}`
}
console.log(response);
});
}

// Function to update the info.

const handleChange = (prop) => (event) => {
updateInfo({...info, [prop]: event.target.value});
// console.log(info);
};

//These two functions help operate the Visibility Icon.

const handleClickShowPassword = () => {
updateInfo({ ...info, showPassword: !info.showPassword });
};

const handleMouseDownPassword = (event) => {
event.preventDefault();
};

return (
<div className={classes.root}>
<div className={classes.root2}>
Expand All @@ -127,21 +181,46 @@ export default function CenteredGrid() {
<img src={logo} className={classes.logo} alt="logo"></img>
<Typography className={classes.heading2} variant="h4">New Here!?</Typography>
<Typography className={classes.subheading2} variant="h5">Start your journey with us! <br></br>Sign up now</Typography>
<a href="#" className={classes.signInLink}>
<a href="/signup" className={classes.signInLink}>
Sign Up
</a>
</Grid>
<Grid item className={classes.gridLeft} md={8} xs={12}>
<Typography className={classes.heading} variant="h3">Sign In <br></br>to Seretonin Inn</Typography>
<a href="#">
<Typography className={classes.heading} variant="h3">Sign In <br></br>to Seroton-Inn</Typography>
<a href="/auth/google">
<img src={gButton} className={classes.logo} alt="google button"></img>
</a>
<Typography className={classes.subheading}>or use your email account</Typography>
<Typography className={classes.subheading}>or Sign in the old-fashioned way</Typography>
<Container maxWidth="sm">
<form noValidate autoComplete="off">
<TextField id="outlined-basic" className={classes.inputText} label="Email" variant="outlined" />
<TextField id="outlined-basic" className={classes.inputText} label="Password" variant="outlined" />
<Button className={classes.formButton} variant="contained">Sign In</Button>
<TextField id="outlined-basic"
className={classes.inputText}
label="Username"
value={info.username}
onChange={handleChange('username')}
variant="outlined" />
<TextField id="outlined-basic"
className={classes.inputText}
type={info.showPassword ? 'text' : 'password'}
label="Password"
value={info.password}
onChange={handleChange('password')}
variant="outlined"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{info.showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
),
}}
/>
<Button onClick={sendInfo} className={classes.formButton} variant="contained">Sign In</Button>
</form>
</Container>
</Grid>
Expand Down
137 changes: 129 additions & 8 deletions src/components/auth-components/signup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,27 @@ import Container from '@material-ui/core/Container';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import InputAdornment from '@material-ui/core/InputAdornment';
import Visibility from '@material-ui/icons/Visibility';
import VisibilityOff from '@material-ui/icons/VisibilityOff';
import IconButton from '@material-ui/core/IconButton';

import logo from "../../assests/image/logo.png";
import backgroundImage from "../../assests/image/auth-image.png";
import e1 from "../../assests/vector/Ellipse.png";
import e2 from "../../assests/vector/Ellipse1.png";
import gButton from "../../assests/vector/gButton.png";

import "./auth.css"
// For sending info to the back end:
import axios from "axios";
import querystring from "querystring";

import "./auth.css";

axios.defaults.withCredentials = true;




const font = "'Secular One', sans-serif";
const font2 = "'Roboto'";
Expand Down Expand Up @@ -107,35 +120,143 @@ const useStyles = makeStyles((theme) => ({
},
}));



export default function CenteredGrid() {
const classes = useStyles();

// Using useState to store and update sign up info.

const [info, updateInfo] = React.useState({
username: '',
email: '',
password: '',
cpassword: '',
showPassword: false
});

// Note: This function will send the username, email and password to the back end, which will be stored in the local database.

function sendInfo() {

// This condition ensures that the passwords match.

if(info.password!==info.cpassword) {
alert("The password in both fields should match! Please try again.");
} else {

axios.post(`/register`, querystring.stringify({username: info.username, password: info.password, email: info.email}), {
headers: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
credentials: 'include',
withCredentials: true
}).then(function(response){
if (response.status === 200) {
localStorage.setItem('username', response.data.username)
localStorage.setItem('newUser',"true");
window.location = `/profile/${response.data.username}`
}
console.log(response);
});
}


}

//This function helps update the info.

const handleChange = (prop) => (event) => {
updateInfo({ ...info, [prop]: event.target.value });
};

//Both of these functions below help operate the Visiblity Icon.

const handleClickShowPassword = () => {
updateInfo({ ...info, showPassword: !info.showPassword });
};

const handleMouseDownPassword = (event) => {
event.preventDefault();
};


return (
<div className={classes.root}>
<div className={classes.root2}>
<Container className={classes.padd70} maxWidth="lg">
<Grid container className={classes.gridContainer}>
<Grid item className={classes.gridLeft} md={8} xs={12}>
<Typography className={classes.heading} variant="h3">Create Account</Typography>
<a href="#">
<a href="/auth/google">
<img src={gButton} className={classes.logo} alt="google button"></img>
</a>
<Typography className={classes.subheading}>or use your email for registration</Typography>
<Container maxWidth="sm">
<form noValidate autoComplete="off">
<TextField id="outlined-basic" className={classes.inputText} label="Name" variant="outlined" />
<TextField id="outlined-basic" className={classes.inputText} label="Email" variant="outlined" />
<TextField id="outlined-basic" className={classes.inputText} label="Password" variant="outlined" />
<TextField id="outlined-basic" className={classes.inputText} label="Confirm Password" variant="outlined" />
<Button className={classes.formButton} variant="contained">Sign Up</Button>
<TextField id="outlined-basic"
className={classes.inputText}
value={info.username}
label="Username"
onChange={handleChange('username')}
variant="outlined" />
<TextField id="outlined-basic"
className={classes.inputText}
value={info.email}
label="Email"
onChange={handleChange('email')}
variant="outlined" />
<TextField id="outlined-basic"
className={classes.inputText}
type={info.showPassword ? 'text' : 'password'}
value={info.password}
label="Password"
onChange={handleChange('password')}
variant="outlined"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{info.showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
),
}}
/>
<TextField id="outlined-basic"
className={classes.inputText}
type={info.showPassword ? 'text' : 'password'}
value={info.cpassword}
label="Confirm Password"
onChange={handleChange('cpassword')}
variant="outlined"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
>
{info.showPassword ? <Visibility /> : <VisibilityOff />}
</IconButton>
</InputAdornment>
),
}}
/>
<Button onClick={sendInfo} className={classes.formButton} variant="contained">Sign Up</Button>
</form>
</Container>
</Grid>
<Grid item className={classes.gridRight} md={4} xs={12}>
<img src={logo} className={classes.logo} alt="logo"></img>
<Typography className={classes.heading2} variant="h4">Already Joined!</Typography>
<Typography className={classes.subheading2} variant="h5">To keep connected with us login <br></br> with your personal info</Typography>
<a href="#" className={classes.signInLink}>
<a href="/login" className={classes.signInLink}>
Sign In
</a>
</Grid>
Expand Down
6 changes: 1 addition & 5 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';

import './index.scss';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
<React.StrictMode>
Expand All @@ -12,7 +11,4 @@ ReactDOM.render(
document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Loading

0 comments on commit 677d48a

Please sign in to comment.