diff --git a/src/.sass-cache/0dea24d856f58728e1d0231d8fed49d94c4de0ab/style.scssc b/src/.sass-cache/0dea24d856f58728e1d0231d8fed49d94c4de0ab/style.scssc new file mode 100644 index 0000000..e1624f6 Binary files /dev/null and b/src/.sass-cache/0dea24d856f58728e1d0231d8fed49d94c4de0ab/style.scssc differ diff --git a/src/components/app.js b/src/components/app.js index 688ddcc..2ac0f8a 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,6 +1,8 @@ import React from "react"; import HelloWorld from "./helloWorld/helloWorld"; +import Dashboard from "./dashboard"; +import LoginPage from "./loginComponents/loginPage"; class App extends React.Component { constructor(props) { @@ -8,7 +10,11 @@ class App extends React.Component { } render() { - return ; + return ( +
+ +
); + } } diff --git a/src/components/dashboard.js b/src/components/dashboard.js new file mode 100644 index 0000000..56c776f --- /dev/null +++ b/src/components/dashboard.js @@ -0,0 +1,12 @@ +import React from "react"; + +class Dashboard extends React.Component { + constructor(props) { + super(props); + } +} + + + + +export default Dashboard; \ No newline at end of file diff --git a/src/components/loginComponents/login.js b/src/components/loginComponents/login.js new file mode 100644 index 0000000..bdad2b1 --- /dev/null +++ b/src/components/loginComponents/login.js @@ -0,0 +1,73 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +class Login extends React.Component { + constructor(props) { + super(props); + this.state = this.initialState(); + this.changeState = this.changeState.bind(this); + } + initialState() { + return { + email: "", + password: "" + }; + } + + changeState(event) { + this.setState({ + [event.target.name]: event.target.value + }); + console.log(event.target.value); + } + render() { + console.log(this.state); + + return ( +
+
+
+

WELCOME TO BITBOOK

+
+
+

+ Random text Random text. Random text Random text. Random text Random text + Random text Random text. Random text Random text. Random text Random text + Random text Random text. Random text Random text. Random text Random text + Random text Random text. Random text Random text. Random text Random text + +

+
+
+
+
+
+
    +
  • Login
    • +
  • Register
    • +
+
+
+
+
+ + +
+
+ + +
+ +
+
+
+
+
+ ); + } +} + + + + +export default Login; \ No newline at end of file diff --git a/src/components/loginComponents/loginPage.js b/src/components/loginComponents/loginPage.js new file mode 100644 index 0000000..dc67193 --- /dev/null +++ b/src/components/loginComponents/loginPage.js @@ -0,0 +1,25 @@ +import React from "react"; +import Login from "./login"; +import Register from "./register"; + +import { Switch, Route } from "react-router-dom"; + +class LoginPage extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( +
+ + + + + +
+ ); + } +} + +export default LoginPage; \ No newline at end of file diff --git a/src/components/loginComponents/register.js b/src/components/loginComponents/register.js new file mode 100644 index 0000000..92eaa60 --- /dev/null +++ b/src/components/loginComponents/register.js @@ -0,0 +1,82 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +class Register extends React.Component { + constructor(props) { + super(props); + this.state = this.initialState(); + this.handleChange = this.handleChange.bind(this); + } + initialState() { + return { + name: "", + email: "", + password: "" + + }; + } + handleChange(event) { + + this.setState({ + [event.target.name]: event.target.value + }); + + } + render() { + console.log(this.state); + const { name, email, password } = this.state; + + return ( +
+
+
+

WELCOME TO BITBOOK

+
+
+

+ Random text Random text. Random text Random text. Random text Random text + Random text Random text. Random text Random text. Random text Random text + Random text Random text. Random text Random text. Random text Random text + Random text Random text. Random text Random text. Random text Random text + +

+
+
+
+
+
+
    +
  • Login
    • +
  • Register
    • +
+
+
+
+
+ + +
+
+ + + +
+
+ + +
+ +
+
+
+
+
+ + ); + } +} + + + + +export default Register; \ No newline at end of file diff --git a/src/components/loginComponents/style.css b/src/components/loginComponents/style.css new file mode 100644 index 0000000..9240b4d --- /dev/null +++ b/src/components/loginComponents/style.css @@ -0,0 +1,11 @@ +body { + background-color: red; +} + +.navigation { + background-color: gray; +} + +.nav-links li { + display: inline; +} \ No newline at end of file diff --git a/src/components/loginComponents/welcome.js b/src/components/loginComponents/welcome.js new file mode 100644 index 0000000..e69de29 diff --git a/src/constants.js b/src/constants.js index ca54aec..7a6931e 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1 +1,3 @@ -// export const SOME_GLOBAL_CONFIG = "value"; \ No newline at end of file +// export const SOME_GLOBAL_CONFIG = "value"; +export const FETCH_ADDRESS = "https://bitbookapi.azurewebsites.net/"; +export const API_KEY = "Y3dvKZsv"; \ No newline at end of file diff --git a/src/index.html b/src/index.html index ac437dd..7a24106 100644 --- a/src/index.html +++ b/src/index.html @@ -1,15 +1,31 @@ - - - - - - My React App - - -
- - - - + + + + + + + My React App + + + + + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 80d7d1b..d39f7f4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,13 +1,14 @@ import React from "react"; import ReactDOM from "react-dom"; -import { BrowserRouter } from "react-router-dom"; +import { HashRouter } from "react-router-dom"; import "babel-polyfill"; import App from "./components/app"; + ReactDOM.render( - + - , + , document.querySelector(".container") ); diff --git a/src/services/communicationService.js b/src/services/communicationService.js new file mode 100644 index 0000000..b2c9e49 --- /dev/null +++ b/src/services/communicationService.js @@ -0,0 +1,60 @@ +import { FETCH_ADDRESS } from "../constants"; +import { API_KEY } from "../constants"; +import axios from "axios"; + +class ApiCommunication { + constructor() { + + } + get(address, callbackSuccess, callbackFail) { + + axios.get(FETCH_ADDRESS + address, this.createRequest()) + .then((response) => { + response.json() + .then((response) => { + callbackSuccess(response); + }).catch((reason) => { + callbackFail(reason); + }); + }); + } + post(address, dataObj, callbackSuccess, callbackFail) { + axios.post(FETCH_ADDRESS + address, this.createRequest(dataObj)) + .then((response) => response.json()) + .then((response) => { + callbackSuccess(response); + + }).catch((reason) => { + callbackFail(reason); + }); + + } + getSessionID() { + return sessionStorage.getItem("sessionID"); + + } + createRequest(dataObj = null) { + const sesID = this.getSessionID(); + if (sesID) { + return { + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + "key": API_KEY, + "sessionID": sesID + }, + data: dataObj + }; + }else{ + return { + headers: { + "Accept": "application/json", + "Content-Type": "application/json", + "key": API_KEY + }, + data: dataObj + }; + } + } +} +export default ApiCommunication; \ No newline at end of file diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..091c294 --- /dev/null +++ b/src/style.css @@ -0,0 +1,211 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; } + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; } + +body { + line-height: 1; } + +ol, ul { + list-style: none; } + +blockquote, q { + quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; } + +table { + border-collapse: collapse; + border-spacing: 0; } + +*, *:before, *:after { + box-sizing: border-box; } + +html { + overflow-y: scroll; } + +body { + background: #c1bdba; + font-family: 'Lato', sans-serif; } + +a { + text-decoration: none; + color: #1ab188; + transition: .5s ease; } + a:hover { + color: #179b77; } + +.form { + background: rgba(19, 35, 47, 0.9); + padding: 40px; + max-width: 600px; + margin: 40px auto; + border-radius: 4px; + box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); } + +.tab-group { + list-style: none; + padding: 0; + margin: 0 0 40px 0; } + .tab-group:after { + content: ""; + display: table; + clear: both; } + .tab-group li a { + display: block; + text-decoration: none; + padding: 15px; + background: rgba(160, 179, 176, 0.25); + color: #a0b3b0; + font-size: 20px; + float: left; + width: 50%; + text-align: center; + cursor: pointer; + transition: .5s ease; } + .tab-group li a:hover { + background: #179b77; + color: #ffffff; } + .tab-group .active a { + background: #1ab188; + color: #ffffff; } + +.tab-content > div:last-child { + display: none; } + +h1 { + text-align: center; + color: #ffffff; + font-weight: 300; + margin: 0 0 40px; } + +label { + position: absolute; + transform: translateY(6px); + left: 13px; + color: rgba(255, 255, 255, 0.5); + transition: all 0.25s ease; + -webkit-backface-visibility: hidden; + pointer-events: none; + font-size: 22px; } + label .req { + margin: 2px; + color: #1ab188; } + +label.active { + transform: translateY(50px); + left: 2px; + font-size: 14px; } + label.active .req { + opacity: 0; } + +label.highlight { + color: #ffffff; } + +input, textarea { + font-size: 22px; + display: block; + width: 100%; + height: 100%; + padding: 5px 10px; + background: none; + background-image: none; + border: 1px solid #a0b3b0; + color: #ffffff; + border-radius: 0; + transition: border-color .25s ease, box-shadow .25s ease; } + input:focus, textarea:focus { + outline: 0; + border-color: #1ab188; } + +textarea { + border: 2px solid #a0b3b0; + resize: vertical; } + +.field-wrap { + position: relative; + margin-bottom: 40px; } + +.top-row:after { + content: ""; + display: table; + clear: both; } +.top-row > div { + float: left; + width: 100%; } + .top-row > div:last-child { + margin: 0; } + +.button { + border: 0; + outline: none; + border-radius: 0; + padding: 15px 0; + font-size: 2rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: .1em; + background: #1ab188; + color: #ffffff; + transition: all 0.5s ease; + -webkit-appearance: none; } + .button:hover, .button:focus { + background: #179b77; } + +.button-block { + display: block; + width: 100%; } + +.forgot { + margin-top: -20px; + text-align: right; } + +.outer__wrapper { + padding-top: 22%; + margin: 0 auto; } + +.inner__wrapper--left { + float: left; + max-width: 50%; } + +.inner__wrapper--right { + float: right; + max-width: 50%; } + +.h1__main-page { + font-size: 2rem; + padding-top: 50px; } + +.h1__main-page h1 { + color: #15a079; + font-weight: bold; } + +.p__main-page { + font-size: 1.3rem; + line-height: 1.4; + padding-top: 20px; } + +/*# sourceMappingURL=style.css.map */ diff --git a/src/style.css.map b/src/style.css.map new file mode 100644 index 0000000..008ffaa --- /dev/null +++ b/src/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["style.scss"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/src/style.scss b/src/style.scss new file mode 100644 index 0000000..af2a795 --- /dev/null +++ b/src/style.scss @@ -0,0 +1,269 @@ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} + + +$body-bg: #c1bdba; +$form-bg: #13232f; +$white: #ffffff; + +$main: #1ab188; +$main2: #15a079; +$main-light: lighten($main,5%); +$main-dark: darken($main,5%); + +$gray-light: #a0b3b0; +$gray: #ddd; + +$thin: 300; +$normal: 400; +$bold: 600; +$br: 4px; + +*, *:before, *:after { + box-sizing: border-box; +} + +html { + overflow-y: scroll; +} + +body { + background:$body-bg; + font-family: 'Lato', sans-serif; +} + +a { + text-decoration:none; + color:$main; + transition:.5s ease; + &:hover { + color:$main-dark; + } +} + +.form { + background:rgba($form-bg,.9); + padding: 40px; + max-width:600px; + margin:40px auto; + border-radius:$br; + box-shadow:0 4px 10px 4px rgba($form-bg,.3); +} + +.tab-group { + list-style:none; + padding:0; + margin:0 0 40px 0; + &:after { + content: ""; + display: table; + clear: both; + } + li a { + display:block; + text-decoration:none; + padding:15px; + background:rgba($gray-light,.25); + color:$gray-light; + font-size:20px; + float:left; + width:50%; + text-align:center; + cursor:pointer; + transition:.5s ease; + &:hover { + background:$main-dark; + color:$white; + } + } + .active a { + background:$main; + color:$white; + } +} + +.tab-content > div:last-child { + display:none; +} + + +h1 { + text-align:center; + color:$white; + font-weight:$thin; + margin:0 0 40px; +} + +label { + position:absolute; + transform:translateY(6px); + left:13px; + color:rgba($white,.5); + transition:all 0.25s ease; + -webkit-backface-visibility: hidden; + pointer-events: none; + font-size:22px; + .req { + margin:2px; + color:$main; + } +} + +label.active { + transform:translateY(50px); + left:2px; + font-size:14px; + .req { + opacity:0; + } +} + +label.highlight { + color:$white; +} + +input, textarea { + font-size:22px; + display:block; + width:100%; + height:100%; + padding:5px 10px; + background:none; + background-image:none; + border:1px solid $gray-light; + color:$white; + border-radius:0; + transition:border-color .25s ease, box-shadow .25s ease; + &:focus { + outline:0; + border-color:$main; + } +} + +textarea { + border:2px solid $gray-light; + resize: vertical; +} + +.field-wrap { + position:relative; + margin-bottom:40px; +} + +.top-row { + &:after { + content: ""; + display: table; + clear: both; + } + + > div { + float:left; + width:100%; + + &:last-child { + margin:0; + } + } +} + +.button { + border:0; + outline:none; + border-radius:0; + padding:15px 0; + font-size:2rem; + font-weight:$bold; + text-transform:uppercase; + letter-spacing:.1em; + background:$main; + color:$white; + transition:all.5s ease; + -webkit-appearance: none; + &:hover, &:focus { + background:$main-dark; + } +} + +.button-block { + display:block; + width:100%; +} + +.forgot { + margin-top:-20px; + text-align:right; +} + +// Custom CSS ////////////////////////////////////////////////////////////// + +.outer__wrapper { + padding-top: 22%; + margin: 0 auto; +} + +.inner__wrapper--left { + float: left; + max-width: 50%; +} + +.inner__wrapper--right { + float: right; + max-width: 50%; +} + +.h1__main-page { + font-size: 2rem; + padding-top: 50px; +} +.h1__main-page h1 { + color: #15a079; + font-weight: bold; +} +.p__main-page { + font-size: 1.3rem; + line-height: 1.4; + padding-top: 20px; +} \ No newline at end of file