diff --git a/public/index.html b/public/index.html index a146b6f..9e1c1d9 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,21 @@ - - - - - - - - - - - React App - - - -
- - - + + + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 62dffc1..ab85a0d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,57 +8,56 @@ import './App.css'; // Redux connection // Components -// import SignUp from './components/Signup/index' import Login from './components/Login/index' +import Signup from './components/Signup/index' import Dashboard from './components/landingPage/index' //This is for authenicated route import AuthenicatedRoute from './highOrderComponents/AuthenicatedRoute'; import reducers from './reducers'; -import Signup from './components/Signup'; const store = createStore(reducers) -{/* TODO: Add after login form is moved out of landing page: */} +{/* TODO: Add after login form is moved out of landing page: */ } //add logout to authenitacted routes -interface Props{ +interface Props { } -interface appState{ +interface appState { mover: Boolean } export default class App extends React.Component { - constructor(props: Props){ + constructor(props: Props) { super(props) - this.state ={ + this.state = { mover: false } } - render(){ + render() { console.log("hello", this.state.mover) - console.log("inside else condition location", this.state.mover) + console.log("inside else condition location", this.state.mover) return ( -
- - - - {/* TODO: user={"Add variable from redux store"} */} - - {/* */} - - {/*

Hello Test

} /> */} - -
+
+ + + + {/* TODO: user={"Add variable from redux store"} */} + + {/* */} + + {/*

Hello Test

} /> */} + +
); - } + } } diff --git a/src/assets/Banners/Calcumon-Banner1.png b/src/assets/Banners/Calcumon-Banner1.png deleted file mode 100644 index 1849bf1..0000000 Binary files a/src/assets/Banners/Calcumon-Banner1.png and /dev/null differ diff --git a/src/assets/Banners/limbs.svg b/src/assets/Banners/limbs.svg new file mode 100644 index 0000000..b2de77e --- /dev/null +++ b/src/assets/Banners/limbs.svg @@ -0,0 +1 @@ +limbs \ No newline at end of file diff --git a/src/assets/Banners/login_banner.svg b/src/assets/Banners/login_banner.svg new file mode 100644 index 0000000..4c1682b --- /dev/null +++ b/src/assets/Banners/login_banner.svg @@ -0,0 +1 @@ +calcumon-bannerCALCUMON \ No newline at end of file diff --git a/src/assets/Banners/register_banner.svg b/src/assets/Banners/register_banner.svg new file mode 100644 index 0000000..f5f9a04 --- /dev/null +++ b/src/assets/Banners/register_banner.svg @@ -0,0 +1 @@ +register_bannerWelCOME TO calcumon \ No newline at end of file diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx index 64c606f..1b713e6 100644 --- a/src/components/Login/index.tsx +++ b/src/components/Login/index.tsx @@ -1,29 +1,25 @@ import React from 'react'; -import Banner1 from '../../assets/Banners/Calcumon-Banner1.png' +import login_banner from '../../assets/Banners/login_banner.svg' +import limbs from '../../assets/Banners/limbs.svg' -import { withRouter, Redirect } from 'react-router-dom' +import { Link, withRouter, Redirect } from 'react-router-dom' import { connect } from 'react-redux' import { ReducersMapObject, Reducer, compose } from 'redux' -import { logIn, LOGIN_STATE } from '../../actions/authentication' - -import { Link } from 'react-router-dom'; +import { logIn, LOGIN_STATE } from '../../actions/authentication' import './styles/login.css'; import { LOG_IN } from '../../constants/authConstants' -// TODO: What will be in our LoginInterface? -//State TYPES - //TYPES FOR props -interface Props{ +interface Props { user?: String | null; pending: boolean; - loggedIn: ()=>void; + loggedIn: () => void; mover: boolean; } @@ -33,7 +29,6 @@ interface StateProps { } //DispatchProps - interface data { status?: string, message?: string, @@ -72,96 +67,112 @@ class Login extends React.Component { redirectPage: false } } - + handleSignIn = async () => { // this.props.logIn({username: this.state.username, password: this.state.password}) - const body = {username: this.state.username, password: this.state.password} + const body = { username: this.state.username, password: this.state.password } return fetch(`https://calcumon-user-api.herokuapp.com/auth/login`, { - method: 'POST', - headers: { - 'accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: JSON.stringify(body) - }).then(response=>{ + method: 'POST', + headers: { + 'accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify(body) + }).then(response => { return response.json() - }).then((data)=>{ + }).then((data) => { this.props.logIn(data) console.log(data) this.setState({ redirectPage: true }) }) - .catch(err=>{ - console.log(err) - }) + .catch(err => { + console.log(err) + }) } render() { - if (this.state.redirectPage){ - return - } else{ - return ( - <> - - -
- { - this.setState({ username: e.target.value}) - }} - required - autoFocus - /> - - { - this.setState({ password: e.target.value}) - }} - required - /> - - -

New Here?

- - - -
- - ) + if (this.state.redirectPage) { + return + } else { + return ( + +
+ {/* Login Banner */} + + + {/* Login Input Fields */} +
+ {/* Username */} + { + this.setState({ username: e.target.value }) + }} + required + autoFocus + /> + + {/* Password */} + { + this.setState({ password: e.target.value }) + }} + required + /> + + {/* Login Button */} + + + {/* Link to Register Page */} +

Not Registered Yet?

+ + Register + +
+ + + + +
+ ) } } } -const mapStateToProps = (state: ReducersMapObject) : StateProps => ({ +const mapStateToProps = (state: ReducersMapObject): StateProps => ({ authentication: state.authentication }) -const mapDispatchToProps = () : DispatchProps => { +const mapDispatchToProps = (): DispatchProps => { return { logIn } } -export default connect(mapStateToProps, mapDispatchToProps())(Login) \ No newline at end of file +export default connect(mapStateToProps, mapDispatchToProps())(Login) diff --git a/src/components/Login/styles/Login.css.map b/src/components/Login/styles/Login.css.map new file mode 100644 index 0000000..5d98bc2 --- /dev/null +++ b/src/components/Login/styles/Login.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAiBA,AAAA,IAAI,CAAC;EACH,gBAAgB,EAjBC,OAAO;CAkBzB;;AAED,AAAA,iBAAiB,EAAE,oBAAoB,CAAC;EATtC,OAAO,EAAE,IAAI;EACb,WAAW,EAAC,MAAM;EAClB,eAAe,EAAE,MAAM;EASvB,cAAc,EAAE,MAAM;CACvB;;AAED,AAAA,uBAAuB,EAAE,0BAA0B,CAAC;EAdlD,OAAO,EAAE,IAAI;EACb,WAAW,EAAC,MAAM;EAClB,eAAe,EAAE,MAAM;EAcvB,cAAc,EAAE,MAAM;CACvB;;AAGD,AAAA,YAAY,CAAC;EACX,MAAM,EAAC,IAAI;EACX,KAAK,EAAC,KAAK;EACX,MAAM,EAAC,IAAI;EACX,MAAM,EAAC,IAAI;EACX,aAAa,EAAE,IAAI;EACnB,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,IAAI;EACf,UAAU,EAAC,MAAM;EACjB,WAAW,EAAE,qBAAqB;EAClC,KAAK,EAtCK,OAAO;EAuCjB,gBAAgB,EAtCV,OAAO;CAuCd;;AAED,AAAA,aAAa,AAAA,MAAM,CAAC;EAClB,gBAAgB,EAxCZ,OAAO;CAyCZ;;AAED,AAAA,gBAAgB,AAAA,MAAM,CAAC;EACrB,gBAAgB,EA5CZ,OAAO;CA6CZ;;AAGD,AAAA,OAAO,CAAC;EACN,MAAM,EAAC,IAAI;EACX,KAAK,EAAC,KAAK;EACX,MAAM,EAAC,GAAG;EACV,MAAM,EAAC,IAAI;EACX,aAAa,EAAC,IAAI;EAClB,WAAW,EAAE,qBAAqB;EAClC,SAAS,EAAC,IAAI;EACd,WAAW,EAAE,GAAG;EAChB,KAAK,EA5DK,OAAO;EA6DjB,cAAc,EAAE,SAAS;EACzB,gBAAgB,EA/DV,OAAO;CAgEd;;AAED,AAAA,cAAc,AAAA,MAAM,CAAC;EACnB,gBAAgB,EA9Db,OAAO;EA+DV,SAAS,EAAE,UAAS;CACrB;;AAED,AAAA,iBAAiB,AAAA,MAAM,CAAC;EACtB,gBAAgB,EArEX,OAAO;EAsEZ,SAAS,EAAE,UAAS;CACrB;;AAGD,AAAA,SAAS,EAAE,YAAY,CAAC;EACtB,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,qBAAqB;EAClC,SAAS,EAAC,IAAI;EACd,UAAU,EAAC,IAAI;EACf,aAAa,EAAE,CAAC;CACjB;;AAED,AAAA,YAAY,EAAE,eAAe,CAAC;EAC5B,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAC,GAAG;EACf,SAAS,EAAC,IAAI;EACd,eAAe,EAAE,IAAI;CACtB;;AAGD,AAAA,YAAY,AAAA,MAAM,EAAE,eAAe,AAAA,MAAM,CAAC;EACxC,SAAS,EAAE,UAAU;CACtB;;AAGD,AAAA,cAAc,CAAC;EACb,MAAM,EAAC,IAAI;EACX,KAAK,EAAC,IAAI;EACV,UAAU,EAAE,GAAG;CAChB;;AAED,AAAA,iBAAiB,CAAC;EAChB,MAAM,EAAC,IAAI;EACX,KAAK,EAAC,IAAI;EACV,UAAU,EAAC,GAAG;CACf;;AAED,AAAA,MAAM,CAAA;EACL,QAAQ,EAAE,KAAK;EACf,MAAM,EAAC,KAAK;EACZ,KAAK,EAAC,IAAI;CACV;;AAED,AAAA,oBAAoB,CAAC;EACnB,QAAQ,EAAE,KAAK;EACf,MAAM,EAAC,KAAK;EACZ,KAAK,EAAC,IAAI;CACX", + "sources": [ + "Login.scss" + ], + "names": [], + "file": "Login.css" +} \ No newline at end of file diff --git a/src/components/Login/styles/Login.scss b/src/components/Login/styles/Login.scss new file mode 100644 index 0000000..10663a0 --- /dev/null +++ b/src/components/Login/styles/Login.scss @@ -0,0 +1,128 @@ +// COLORS +$login_background: #eaffab; +$register_background:#E0FEFA; +$button:#C7C0F4; +$font_color:#3b3b3b; +$purple:#C7C0F4; +$green:#F1FFCC; +$blue:#a9fcf4; +$red:#ffafad; + +// MIXINS +@mixin centerFlex { + display: flex; + align-items:center; + justify-content: center; +} + +body { + background-color: $login_background; +} + +.login__container, .register__container { + @include centerFlex(); + flex-direction: column; +} + +.login__input_container, .register__input_container { + @include centerFlex(); + flex-direction: column; +} + +// INPUT STYLES +.input_field { + height:50px; + width:270px; + border:none; + margin:10px; + border-radius: 10px; + font-weight: 700; + font-size: 16px; + text-align:center; + font-family: 'Poppins', sans-serif; + color:$font-color; + background-color:$purple; +} + +.login__input:hover { + background-color:$blue; +} + +.register__input:hover { + background-color:$blue; +} + +// BUTTON STYLES +.button { + height:45px; + width:120px; + margin:5px; + bordeR:none; + border-radius:10px; + font-family: 'Poppins', sans-serif; + font-size:17px; + font-weight: 700; + color:$font_color; + text-transform: uppercase; + background-color:$button; +} + +.login__button:hover { + background-color:$red; + transform: scale(.9); +} + +.register__button:hover { + background-color:$green; + transform: scale(.9); +} + +// Link Styles +.login__p, .register__p { + text-transform: uppercase; + font-family: 'Poppins', sans-serif; + font-size:15px; + margin-top:10px; + margin-bottom: 0; +} + +.login__link, .register__link { + text-transform: uppercase; + font-family: 'Poppins', sans-serif; + font-weight:500; + font-size:18px; + text-decoration: none; +} + + +.login__link:hover, .register__link:hover { + transform: scale(1.1) +} + +// BANNER STYLES +.login__banner { + height:25vh; + width:70vw; + margin-top: 8vh; +} + +.register__banner { + height:30vh; + width:75vw; + margin-top:5vh; +} + +.limbs{ + position: fixed; + bottom:-30px; + width:90vw; +} + +.registration__limbs { + position: fixed; + bottom:-70px; + width:90vw; +} + + + diff --git a/src/components/Login/styles/login.css b/src/components/Login/styles/login.css index 432126d..28d63d4 100644 --- a/src/components/Login/styles/login.css +++ b/src/components/Login/styles/login.css @@ -1,71 +1,129 @@ body { - background-color: #F1FFCC; + background-color: #eaffab; } -.inputContainer{ - position: absolute; - width: 300px; - height: 500px; - z-index: 15; - top: 50%; - left: 50%; - margin: -100px 0 0 -150px; +.login__container, .register__container { + display: -webkit-box; + display: -ms-flexbox; display: flex; - flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } -/* Waiting for SVG */ -.splash-logo { - display: block; - margin: 15vh auto 0 auto; - width: 300px; - min-width: 65vw; +.login__input_container, .register__input_container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } -#inputUsername{ +.input_field { + height: 50px; + width: 270px; border: none; - border-radius: 7px; - background-color: #C7C0F4; margin: 10px; + border-radius: 10px; + font-weight: 700; + font-size: 16px; text-align: center; - box-shadow: none; - font-size: 20px; - color: #383838; - + font-family: 'Poppins', sans-serif; + color: #3b3b3b; + background-color: #C7C0F4; } -input { - height: 100px; - width: 250px; +.login__input:hover { + background-color: #a9fcf4; } -/* The auto fill changes the collor to white. So I changed the autofill color to the input field color */ -#inputPassword:-webkit-autofill { - box-shadow: 0 0 0 1000px #C7C0F4 inset !important; - -webkit-box-shadow: 0 0 0 1000px #C7C0F4 inset !important; - color: #383838; - -webkit-text-fill-color: #383838; + +.register__input:hover { + background-color: #a9fcf4; } -#inputPassword{ - border: none; - border-radius: 7px; - margin: 10px; - text-align: center; - box-shadow: none; +.button { + height: 45px; + width: 120px; + margin: 5px; + bordeR: none; + border-radius: 10px; + font-family: 'Poppins', sans-serif; + font-size: 17px; + font-weight: 700; + color: #3b3b3b; + text-transform: uppercase; background-color: #C7C0F4; - font-size: 20px; - color: #383838; } -#submitButton { - margin-top: 25px; - margin-left: 49px; - padding-left: -20px; - padding-right: -20px; - width: 200px; - background-color: #D6F091; - border: none; - border-radius: 7px; - font-size: 20px; - color: #383838 +.login__button:hover { + background-color: #ffafad; + -webkit-transform: scale(0.9); + transform: scale(0.9); +} + +.register__button:hover { + background-color: #F1FFCC; + -webkit-transform: scale(0.9); + transform: scale(0.9); +} + +.login__p, .register__p { + text-transform: uppercase; + font-family: 'Poppins', sans-serif; + font-size: 15px; + margin-top: 10px; + margin-bottom: 0; +} + +.login__link, .register__link { + text-transform: uppercase; + font-family: 'Poppins', sans-serif; + font-weight: 500; + font-size: 18px; + text-decoration: none; +} + +.login__link:hover, .register__link:hover { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +.login__banner { + height: 25vh; + width: 70vw; + margin-top: 8vh; +} + +.register__banner { + height: 30vh; + width: 75vw; + margin-top: 5vh; +} + +.limbs { + position: fixed; + bottom: -30px; + width: 90vw; +} + +.registration__limbs { + position: fixed; + bottom: -70px; + width: 90vw; } +/*# sourceMappingURL=Login.css.map */ \ No newline at end of file diff --git a/src/components/Signup/index.tsx b/src/components/Signup/index.tsx index c4ae161..b1494a4 100644 --- a/src/components/Signup/index.tsx +++ b/src/components/Signup/index.tsx @@ -1,103 +1,129 @@ import React from 'react'; import { bool } from 'prop-types'; import { booleanLiteral } from '@babel/types'; -import {Link, Redirect} from 'react-router-dom' +import { Link, Redirect } from 'react-router-dom' +import register_banner from '../../assets/Banners/register_banner.svg' +import limbs from '../../assets/Banners/limbs.svg' + + import './styles/Signup.css' export interface Props { - signUpAuthenication: Function; - loggedIn: ()=>void + signUpAuthenication: Function; + loggedIn: () => void } export interface State { - username: string; - email?: string; - password: string; - verifiedPassword: string; - error: boolean; - redirector: boolean; + username: string; + email?: string; + password: string; + verifiedPassword: string; + error: boolean; + redirector: boolean; } class Signup extends React.Component { - constructor(props: Props) { - super(props); - this.state = { - username: '', - email: "", - password: '', - verifiedPassword: '', - error: false, - redirector: false - }; - } + constructor(props: Props) { + super(props); + this.state = { + username: '', + email: "", + password: '', + verifiedPassword: '', + error: false, + redirector: false + }; + } + + handleSignUp = () => { + //#TODO update url to meet api standard + + fetch(`https://calcumon-user-api.herokuapp.com/user/`, { + method: 'post', + headers: { + 'accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ email: this.state.email, username: this.state.username, password: this.state.password }) + }) + .then((response) => { + console.log(response) + this.setState({ redirector: true }) + this.props.loggedIn() + }) + .catch((err) => { + console.log(err) + }) + } + + render() { + if (!this.state.redirector) { + return ( - handleSignUp = () =>{ - //#TODO update url to meet api standard +
+ {/* Register Banner */} + - fetch(`https://calcumon-user-api.herokuapp.com/user/`,{ - method: 'post', - headers: { - 'accept': 'application/json', - 'Content-Type': 'application/json' - }, - body: JSON.stringify({email: this.state.email, username: this.state.username, password: this.state.password}) - }) - .then((response)=>{ - console.log(response) - this.setState({redirector: true}) - this.props.loggedIn() - }) - .catch((err)=>{ - console.log(err) - }) - } + {/* Register Input Fields */} +
+ {/* Email */} + this.setState({ email: e.target.value })} + required /> + + {/* Username */} + this.setState({ username: e.target.value })} + required autoFocus /> - render() { - if(!this.state.redirector){ - return ( -
-
+ {/* Password */} this.setState({ email : e.target.value})} - required /> - this.setState({ username : e.target.value})} - required autoFocus /> - this.setState({ password : e.target.value})} - required /> - {/* this.setState({ verifiedPassword : e.target.value})} - required /> */} - -
-

Already Registered?

- -
+ }}>Register + + {/* Link to Login Page */} +

+ Already Registered?

+ Login + +
-
- ); - }else{ - return - } + +
+ ); + } else { + return } + } } export default Signup;