Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wip/desktop component/select meal plan #19

Open
wants to merge 20 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
49cb8b1
Changed pen icon color to match ux design
kmhom Oct 12, 2020
7c20bb6
Added plus icon to payment cards and redid header to match ux design
kmhom Oct 13, 2020
f1a238a
Added checkout button
kmhom Oct 14, 2020
8abc408
Added get request for fetching profile information
kmhom Oct 15, 2020
c1688e8
Added POST request for updating profile delivery address
kmhom Oct 18, 2020
f46b2cb
Merged master into feature/profile
kmhom Oct 19, 2020
68469ef
Added a simple React Responsive using hooks
kmhom Oct 19, 2020
daf58c2
Removed navigation bar and added paths to buttons in the burgermenu
kmhom Oct 21, 2020
715a076
Merge branch 'master' of https://github.com/infinite-options/MTYD-Web…
kmhom Oct 21, 2020
5959167
Merge branch 'master' of https://github.com/infinite-options/MTYD-Web…
kmhom Oct 23, 2020
5a52fbe
Separated Desktop and Mobile Components and added UX Desktop images a…
kmhom Oct 25, 2020
992b788
Added navigation to each web page
kmhom Oct 27, 2020
a5db24a
Updated sign up page to include billing address
kmhom Oct 29, 2020
8e49194
Added default routing to login page on Desktop Component
kmhom Oct 30, 2020
35f77bd
Updated submitPayment for select plan web
kmhom Oct 30, 2020
0c58733
Fixed customer_uid cookie issues in login and signup
kmhom Oct 31, 2020
34a99a2
Fixed build bug
kmhom Nov 1, 2020
9eaf72e
Changed CSS file names to change import statements
kmhom Nov 6, 2020
e601eb6
Changed signupweb module name
kmhom Nov 6, 2020
1df73ac
Add files via upload
kmhom Nov 7, 2020
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added .DS_Store
Binary file not shown.
1,202 changes: 741 additions & 461 deletions client/package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,11 @@
"react": "^16.13.1",
"react-apple-login": "^1.0.14",
"react-burger-menu": "^2.8.0",
"react-cookie": "^4.0.3",
"react-dom": "^16.13.1",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.1.21",
"react-modal": "^3.11.2",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
Expand Down
108 changes: 84 additions & 24 deletions client/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,58 @@ import { Provider } from "react-redux";
import store from "./reducers/store";
import {
BrowserRouter as Router,
// Route, Redirect,
Route, Redirect,
Switch,
} from "react-router-dom";
import AppliedRoute from "./components/AppliedRoute";
import { SideNavBar, BottomNavBar } from "./components/NavBar";
import Landing from "./components/Landing";
import SignUp from "./components/SignUp";
import SocialSignUp from "./components/SocialSignUp";
import ChoosePlan from "./components/ChoosePlan";
import PaymentDetails from "./components/PaymentDetails";
import Profile from "./components/Profile";
import SelectMeal from "./components/SelectMeal";
import NotFound from "./components/NotFound";
import Landing from "./components/Mobile_Components/Landing";
import SignUp from "./components/Mobile_Components/SignUp";
import SocialSignUp from "./components/Mobile_Components/SocialSignUp";
import ChoosePlan from "./components/Mobile_Components/ChoosePlan";
import PaymentDetails from "./components/Mobile_Components/PaymentDetails";
import Profile from "./components/Mobile_Components/Profile";
import SelectMeal from "./components/Mobile_Components/SelectMeal";
import NotFound from "./components/Mobile_Components/NotFound";
import "./App.css";
import AuthApi from "./components/AuthApi";
import Cookies from "js-cookie";
import SelectPlanWeb from "./components/Desktop_Components/SelectPlanWeb";
import SelectMealWeb from "./components/Desktop_Components/SelectMealWeb";
import LoginWeb from "./components/Desktop_Components/LoginWeb";
import SignUpWeb from "./components/Desktop_Components/SignUpWeb";

const viewportContext = React.createContext({});

function App() {
const [auth, setAuth] = React.useState(false);
const readCookie = () => {
const customer = Cookies.get("customer_uid");
// console.log(customer);
if (customer) {
setAuth(true);
}
const ViewportProvider = ({ children }) => {
const [width, setWidth] = React.useState(window.innerWidth);
const [height, setHeight] = React.useState(window.innerHeight);
const handleWindowResize = () => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
};

React.useEffect(() => {
readCookie();
window.addEventListener("resize", handleWindowResize);
return () => window.removeEventListener("resize", handleWindowResize);
}, []);

return (
<viewportContext.Provider value={{ width, height }}>
{children}
</viewportContext.Provider>
);
};

const useViewport = () => {
const { width, height } = React.useContext(viewportContext);
return { width, height };
};

const MobileComponent = () => {
return (
<Provider store={store}>
<div className='root'>
<Router>
<div className='sideNavBar'>
<SideNavBar />
</div>
<div className='mainApp'>
<Switch>
<AppliedRoute exact path='/' component={Landing} />
Expand All @@ -62,13 +75,60 @@ function App() {
<AppliedRoute path='*' component={NotFound} />
</Switch>
</div>
<div className='bottomNavBar'>
<BottomNavBar />
</Router>
</div>
</Provider>
);
};

const DesktopComponent = () => {
return(
<Provider store={store}>
<div className='root'>
<Router>
<div className='mainApp'>
<Route exact path="/">
<Redirect to="/login-web" />
</Route>
<Switch>
<AppliedRoute exact path='/login-web' component={LoginWeb} />
<AppliedRoute exact path='/sign-up-web' component={SignUpWeb} />
<AppliedRoute exact path='/select-plan-web' component={SelectPlanWeb} />
<AppliedRoute exact path='/select-meal-web' component={SelectMealWeb} />
<AppliedRoute path='*' component={NotFound} />
</Switch>
</div>
</Router>
</div>
</Provider>
);
};

const MyComponent = () => {
const { width } = useViewport();
const breakpoint = 375;
return width <= breakpoint ? <MobileComponent /> : <DesktopComponent />;
};

function App() {
const [auth, setAuth] = React.useState(false);
const readCookie = () => {
const customer = Cookies.get("customer_uid");
// console.log(customer);
if (customer) {
setAuth(true);
}
};

React.useEffect(() => {
readCookie();
}, []);

return (
<ViewportProvider>
<MyComponent />
</ViewportProvider>
);
}

export default App;
239 changes: 239 additions & 0 deletions client/src/components/Desktop_Components/LoginWeb/index.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import {
bypassLogin,
changeEmail,
changePassword,
loginAttempt,
socialLoginAttempt,
} from "../../../reducers/actions/loginActions";
import { withRouter } from "react-router";
import { Link } from "react-router-dom";
import GoogleLogin from "react-google-login";
import FacebookLogin from "react-facebook-login";
import styles from "./login.module.css";
import { useCookies } from "react-cookie";

class LoginWeb extends React.Component {
constructor() {
super();
this.state = {
mounted: false,
};
}

successLogin = (hasPurchases) => {
if(hasPurchases) {
this.props.history.push("/select-meal-web")
} else {
this.props.history.push("/select-plan-web");
}
};

viewPassword() {
var x = document.getElementById("password");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
}

socialSignUp = () => {
this.props.history.push("social-sign-up");
};

componentDidMount() {
if (
document.cookie
.split(";")
.some((item) => item.trim().startsWith("customer_uid=") )
) {
document.cookie = "customer_uid=NULL";
}
let queryString = this.props.location.search;
let urlParams = new URLSearchParams(queryString);
// Clear Query parameters
window.history.pushState({}, document.title, window.location.pathname);
if (urlParams.has("email") && urlParams.has("hashed")) {
// Automatic log in
this.props.bypassLogin(
urlParams.get("email"),
urlParams.get("hashed"),
this.successLogin
);
} else {
this.setState({
mounted: true,
});
window.AppleID.auth.init({
clientId : process.env.REACT_APP_APPLE_CLIENT_ID,
scope : 'email',
redirectURI : process.env.REACT_APP_APPLE_REDIRECT_URI
});
}
}

responseGoogle = (response) => {
console.log(response);
if (response.profileObj) {
// Google Login successful, try to login to MTYD
console.log("Google login successful");
let email = response.profileObj.email;
let accessToken = response.accessToken;
let refreshToken = response.googleId;
// console.log(email,accessToken,refreshToken)
this.props.socialLoginAttempt(
email,
accessToken,
refreshToken,
"GOOGLE",
this.successLogin,
this.socialSignUp
);
} else {
// Google Login unsuccessful
console.log("Google Login failed");
}
};

responseFacebook = (response) => {
console.log(response);
if (response.email) {
console.log("Facebook Login successful");
let email = response.email;
let accessToken = response.accessToken;
let refreshToken = response.id;
this.props.socialLoginAttempt(
email,
accessToken,
refreshToken,
"FACEBOOK",
this.successLogin,
this.socialSignUp
);
} else {
// Facebook Login unsuccessful
console.log("Facebook Login failed");
}
};

render() {
if (!this.state.mounted) {
return null;
}
return (
<div className={styles.root}>
<div style={{ backgroundColor: "#00000074"}}>
<div className={styles.mealHeader}>

</div>
<div style={{height:"700px"}}>
<div className={styles.loginSectionContainer}>
<div className={styles.loginSectionItem}>
<input
type='text'
placeholder='EMAIL'
className={styles.loginSectionInput}
value={this.props.email}
onChange={(e) => {
this.props.changeEmail(e.target.value);
}}
/>
</div>
<div className={styles.loginSectionItem}>
<input
style={{marginBottom:"0px"}}
type='password'
id="password"
placeholder='PASSWORD'
className={styles.loginSectionInput}
value={this.props.password}
onChange={(e) => {
this.props.changePassword(e.target.value);
}}
/>
<i className="far fa-eye" id="togglePassword" onClick={this.viewPassword}></i>
</div>
<p style={{marginLeft:"9rem",fontSize:"1rem",color:"white", float:"right"}}>Forgot Password?</p>
</div>
<div className={styles.buttonContainer}>

<button
className={styles.button}
onClick={() => {
this.props.loginAttempt(
this.props.email,
this.props.password,
this.successLogin
);
}}
>
LOGIN
</button>
<Link to='sign-up-web'>
<button className={styles.button}>SIGNUP</button>
</Link>
</div>
<hr style={{marginTop:"2rem",color:"#E392409D", width:"300px"}}></hr>
<p style={{color:"white", textAlign:"center", fontSize:"1rem", paddingTop:"1.2rem"}}>LOGIN OR SIGNUP WITH</p>
<div style={{marginTop:"3.7rem", display:"flex", flexDirection:"row", alignContent:"center", textAlign:"center", justifyContent:"space-between", padding:"0rem 8.5rem"}}>
<GoogleLogin
clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
render={renderProps => (
<button className={styles.googleBtn} onClick={renderProps.onClick} disabled={renderProps.disabled}></button>
)}
onSuccess={this.responseGoogle}
onFailure={this.responseGoogle}
isSignedIn={false}
disabled= {false}
cookiePolicy={"single_host_origin"}
/>
<FacebookLogin
appId={process.env.REACT_APP_FACEBOOK_APP_ID}
autoLoad={false}
fields={"name,email,picture"}
callback={this.responseFacebook}
cssClass={styles.fbLogin}
/>
<button
onClick={() => {
window.AppleID.auth.signIn();
}}
className={styles.appleLogin}
>
<i className="fa fa-apple" style={{fontSize:"28px", color:"white"}}></i>
</button>
</div>
</div>
</div>
</div>
);
}
}

LoginWeb.propTypes = {
bypassLogin: PropTypes.func.isRequired,
changeEmail: PropTypes.func.isRequired,
changePassword: PropTypes.func.isRequired,
loginAttempt: PropTypes.func.isRequired,
socialLoginAttempt: PropTypes.func.isRequired,
email: PropTypes.string.isRequired,
password: PropTypes.string.isRequired,
};

const mapStateToProps = (state) => ({
email: state.login.email,
password: state.login.password,
});

const functionList = {
bypassLogin,
changeEmail,
changePassword,
loginAttempt,
socialLoginAttempt,
};

export default connect(mapStateToProps, functionList)(withRouter(LoginWeb));
Loading