aleabodo/mywebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

basic setup

Browse Source
This commit is contained in:
Alexander Bell
2018-09-12 08:08:42 +02:00
parent 5e2c8ffb31
commit 59beca4846
17 changed files with 15285 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.js
View File

@@ -1,4 +1,5 @@
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
/*
* Functions import
@@ -7,8 +8,24 @@ import React, { Component } from 'react';
/*
* Components import
*/
import Loading from './components/Loading';
import Loading from './pages/Loading';
import Main from './pages/Main';
import Login from './pages/Login';
/*
###############################
Components -- START
###############################
*/
/*
###############################
Components -- END
###############################
*/
const App = inject("rootStore") ( observer(
class App extends Component {
@@ -31,6 +48,7 @@ const App = inject("rootStore") ( observer(
}
render() {
console.log(this.stores.authStore.userData.uid)
if(this.stores.rootStore.isLoaded.app === true) {
if(this.stores.authStore.userData.uid !== null) {
return(<Main />);
@@ -40,7 +58,7 @@ const App = inject("rootStore") ( observer(
} else {
return(<Loading />);
}
);
}
}
));

106
src/components/Menu/Menu.js Normal file
View File

@@ -0,0 +1,106 @@
import React, {Component} from 'react';
import jss from 'jss';
import preset from 'jss-preset-default';
import { Menu, Button } from 'semantic-ui-react'
/*
* Functions import
*/
/*
* Component imports
*/
jss.setup(preset());
/*
###############################
Components -- START
###############################
*/
/*
###############################
Components -- END
###############################
*/
class Main extends Component {
constructor(props){
super(props);
//Initial loading screen
/*
* Expected props
* - /
*/
this.handleItemClick = this.handleItemClick.bind(this);
this.state = {
activeItem: 'Home'
}
//Styles
this.styles = this.getStyles();
this.sheet = jss.createStyleSheet(this.styles);
const {classes} = this.sheet.attach();
this.classes = classes;
//Styles
}
componentWillUnmount() {
this.sheet.detach()
}
handleItemClick(e, { name }) {
this.setState({
activeItem: name
});
}
render() {
const activeItem = this.state.activeItem
return(
<Menu stackable fixed="top">
<Menu.Item header>
<img alt="" src={require('../../files/images/logo.svg')} style={{display: 'block', width: '60px', height: '45px'}} />
</Menu.Item>
<Menu.Item
name='Home'
active={activeItem === 'Home'}
onClick={this.handleItemClick}
>
Home
</Menu.Item>
<Menu.Item name='A' active={activeItem === 'A'} onClick={this.handleItemClick}>
Password manager
</Menu.Item>
<Menu.Menu position='right'>
<Menu.Item>
<Button primary>Sign out</Button>
</Menu.Item>
</Menu.Menu>
</Menu>
);
}
getStyles() {
return {
}
}
}
export default Main;

77
src/components/loadingPage.js Normal file
View File

@@ -0,0 +1,77 @@
import React, { Component } from 'react';
import logo from "../files/images/logo.svg";
class PageLoading extends Component {
constructor(props) {
super(props);
/*
* Expected props:
* /
*/
this.state = {
display: true
}
}
componentWillUnmount() {
}
componentDidMount() {
//Color background
this.interval1 = setInterval(function () {
document.getElementById("PageLoading").style.backgroundColor = "transparent";
},1100);
//remove Logo
this.interval2 = setInterval(function () {
document.getElementById("PageLoading_Logo").classList.add("PageLoading_Logo-fadeOut");
},2500);
//Unmount
this.interval3 = setInterval(() => {
clearInterval(this.interval1);
clearInterval(this.interval2);
clearInterval(this.interval3);
this.setState({
display: false
});
},5500);
}
render() {
//<div className="pageLoadingLogo"></div>
const url = logo + '?' + Math.random();
if(this.state.display) {
return(
<div className="PageLoading" id="PageLoading">
<img className="PageLoading_Logo" id="PageLoading_Logo" alt="" src={url} />
<div className="PageLoading_left PageLoading_1 PageLoading_Element"></div>
<div className="PageLoading_right PageLoading_1 PageLoading_Element"></div>
<div className="PageLoading_left PageLoading_2 PageLoading_Element"></div>
<div className="PageLoading_right PageLoading_2 PageLoading_Element"></div>
<div className="PageLoading_left PageLoading_3 PageLoading_Element"></div>
<div className="PageLoading_right PageLoading_3 PageLoading_Element"></div>
<div className="PageLoading_left PageLoading_4 PageLoading_Element"></div>
<div className="PageLoading_right PageLoading_4 PageLoading_Element"></div>
<div className="PageLoading_left PageLoading_5 PageLoading_Element"></div>
<div className="PageLoading_right PageLoading_5 PageLoading_Element"></div>
</div>
);
} else {
return(null);
}
}
}
export default PageLoading;

85
src/files/images/logo.svg Normal file
View File

@@ -0,0 +1,85 @@
<svg width="640" height="479.99999999999994" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<style type="text/css">
<![CDATA[
.circle {
fill: #DA3821;
stroke-width: 7;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: circleDraw 2s;
}
.a {
opacity: 1;
font-size: 24px;
animation: fontFadeA 3s;
}
.b {
opacity: 1;
font-size: 24px;
animation: fontFadeB 3s;
}
@keyframes fontFadeA {
0% {
font-size: 20px;
opacity: 0;
}
40% {
opacity: 0;
font-size: 20px;
}
100% {
opacity: 1;
font-size: 24px;
}
}
@keyframes fontFadeB {
0% {
opacity: 0;
font-size: 20px;
}
50% {
opacity: 0;
font-size: 20px;
}
100% {
opacity: 1;
font-size: 24px;
}
}
@keyframes circleDraw {
0% {
stroke-dashoffset: 1000;
fill: transparent;
}
30% {
fill: transparent;
}
100% {
fill: #DA3821;
stroke-dashoffset: 0;
}
}
]]>
</style>
</defs>
<title>MyLogo</title>
<g>
<title>background</title>
<rect x="-1" y="-1" width="642" height="482" id="canvas_background" fill="none"/>
</g>
<g>
<title>Layer 1</title>
<path class="circle" id="svg_2" d="m175.64902,246.04444c0,-81.71632 66.19021,-147.90653 147.90652,-147.90653c81.71632,0 147.90653,66.19021 147.90653,147.90653c0,81.71631 -66.19021,147.90652 -147.90653,147.90652c-81.71631,0 -147.90652,-66.19021 -147.90652,-147.90652z" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke="#e45f4d" fill-opacity="null"/>
<text class="a" font-family="Monospace" font-weight="normal" stroke="#ffffff" transform="matrix(16.070920656049648,0,0,14.324953552691046,-1383.3705537140042,-1389.329317933106) " xml:space="preserve" text-anchor="middle" font-size="24" id="svg_4" y="117.786939" x="101.824642" stroke-linecap="null" stroke-linejoin="null" fill="#ffffff">A</text>
<text class="b" font-family="Monospace" id="svg_5" font-weight="normal" stroke="#ffffff" transform="rotate(-19 389.5501403808595,276.68469238281244) matrix(15.254961764346335,0,0,14.324953552691046,-1315.1918495589248,-1390.0460388359616) " xml:space="preserve" text-anchor="middle" font-size="24" y="124.386839" x="111.764076" stroke-linecap="null" stroke-linejoin="null" fill="#ffffff">B</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

27
src/index.js
View File

@@ -2,6 +2,31 @@ import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import RootStore from './stores/rootStore';
ReactDOM.render(<App />, document.getElementById('root'));
/*
* Import css
*/
import './styles/keyframes.css';
import './styles/loadingPage/loadingPage.css';
/*
* Import funtions
*/
import history from './stores/functions/history';
/*
* Components import
*/
import { Router } from 'react-router-dom';
import { Provider } from 'mobx-react';
ReactDOM.render(
<Provider rootStore={new RootStore()}>
<Router history={history}>
<App />
</Router>
</Provider>
, document.getElementById('root'));
registerServiceWorker();

117
src/pages/Loading.js Normal file
View File

@@ -0,0 +1,117 @@
import React, {Component} from 'react';
import jss from 'jss';
import preset from 'jss-preset-default';
/*
* Functions import
*/
/*
* Component imports
*/
jss.setup(preset());
/*
###############################
Components -- START
###############################
*/
/*
###############################
Components -- END
###############################
*/
class Loading extends Component {
constructor(props){
super(props);
//Initial loading screen
/*
* Expected props
* - /
*/
//Styles
this.styles = this.getStyles();
this.sheet = jss.createStyleSheet(this.styles);
const {classes} = this.sheet.attach();
this.classes = classes;
//Styles
}
componentWillUnmount() {
this.sheet.detach()
}
render() {
return(
<div className={this.classes.loadingContainer}>
<div className={this.classes.loadingContent}>
{this.props.children}
</div>
<div className={this.classes.loading}>
<div className={this.classes.loadingCircle}></div>
</div>
</div>
);
}
getStyles() {
return {
loadingContainer: {
display: 'block',
boxSizing: 'border-box',
position: 'relative',
width: '100vw',
height: '100vh',
backgroundColor: 'black'
},
loadingContent: {
display: 'block',
boxSizing: 'border-box',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%'
},
loading: {
extend: 'loadingContent',
zIndex: 1
},
loadingCircle: {
width: '40px',
height: '40px',
borderRight: 'solid 2px #DA3821',
borderLeft: 'solid 2px #DA3821',
borderTop: 'solid 2px transparent',
borderBottom: 'solid 2px transparent',
borderRadius: '100%',
transform: 'rotateZ(0deg)',
marginLeft: 'auto',
marginRight: 'auto',
position: 'relative',
top: 'calc(50vh - 40px)',
animationName: 'rotate',
animationDuration: '0.7s',
animationIterationCount: 'infinite',
animationTimingFunction: 'linear'
}
}
}
}
export default Loading;

96
src/pages/Login.js Normal file
View File

@@ -0,0 +1,96 @@
import React, {Component} from 'react';
import jss from 'jss';
import preset from 'jss-preset-default';
import { Container, Button, Form, Header, Segment, Input, Icon } from 'semantic-ui-react'
/*
* Functions import
*/
/*
* Component imports
*/
import LoadingPage from '../components/loadingPage';
jss.setup(preset());
/*
###############################
Components -- START
###############################
*/
/*
###############################
Components -- END
###############################
*/
class Login extends Component {
constructor(props){
super(props);
//Initial loading screen
/*
* Expected props
* - /
*/
//Styles
this.styles = this.getStyles();
this.sheet = jss.createStyleSheet(this.styles);
const {classes} = this.sheet.attach();
this.classes = classes;
//Styles
}
componentWillUnmount() {
this.sheet.detach()
}
render() {
return(
<Container className={this.classes.container}>
<Segment padded="very">
<Form>
<Header as="h1">
Sign in
</Header>
<Form.Field>
<label>Email adress:</label>
<Input iconPosition='left' placeholder='example@example.com'>
<Icon name='at' />
<input type="email" />
</Input>
</Form.Field>
<Form.Field>
<label>Password:</label>
<input type="password" placeholder='*******' />
</Form.Field>
<Button type='submit'>Next</Button>
</Form>
</Segment>
</Container>
);
}
getStyles() {
return {
container: {
padding: '20%',
paddingTop: '10%'
}
}
}
}
export default Login;

73
src/pages/Main.js Normal file
View File

@@ -0,0 +1,73 @@
import React, {Component} from 'react';
import jss from 'jss';
import preset from 'jss-preset-default';
/*
* Functions import
*/
/*
* Component imports
*/
import LoadingPage from '../components/loadingPage';
import Menu from '../components/Menu/Menu';
jss.setup(preset());
/*
###############################
Components -- START
###############################
*/
/*
###############################
Components -- END
###############################
*/
class Main extends Component {
constructor(props){
super(props);
//Initial loading screen
/*
* Expected props
* - /
*/
//Styles
this.styles = this.getStyles();
this.sheet = jss.createStyleSheet(this.styles);
const {classes} = this.sheet.attach();
this.classes = classes;
//Styles
}
componentWillUnmount() {
this.sheet.detach()
}
render() {
return(
<div>
{/*<LoadingPage />*/}
<Menu />
</div>
);
}
getStyles() {
return {
}
}
}
export default Main;

47
src/stores/authStore.js
View File

@@ -26,16 +26,12 @@ class AuthStore {
## Functions
##
## load
## getUserInfo
## verifyPhone
## signIn
## signOut
/*#######################################################*/
load() {
//Load all auth related things
console.info("Loading authStore");
this.stores.rootStore.isLoaded.app = false;
firebase.auth().onAuthStateChanged((user) => {
if (user) {
//Logged in
@@ -63,47 +59,6 @@ class AuthStore {
}
getUserInfo(userId) {
//Returns all user info from firestore.
//Param: userId
//Returns a promise
return new Promise(function (resolve, reject) {
var docRef = db.collection("users").doc(userId);
return docRef.get().then((doc) => {
if (doc.exists) {
resolve(doc.data());
} else {
// doc.data() will be undefined in this case
alertify.delay(0).error("Base Web doesn't support signing up yet. Please install the mobile app to sign up! Refresh Base Web after!");
console.error("User with id " + userId + " not found in user db!");
reject()
}
}).catch(function(error) {
console.error("Error getting document:", error);
reject()
});
});
}
createSignInRecaptcha(phoneNumber) {
firebase.auth().useDeviceLanguage();
window.recaptchaVerifier = new firebase_orig.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': (response) => {
// reCAPTCHA solved, allow signInWithPhoneNumber.
this.signIn();
}
});
window.recaptchaVerifier.render().then(function(widgetId) {
window.recaptchaWidgetId = widgetId;
});
}
signIn(){
//Verify phone number and then sign in

4
src/stores/rootStore.js
View File

@@ -35,10 +35,10 @@ class RootStore {
## Functions
##
## loadApp
## promiseAll
/*#######################################################*/
loadApp() {
console.log("Your browser: " + browser());
const result = browser();
console.log("Your browser: " , result);
if(navigator.cookiesEnabled) {
alertify.delay(0).error("Please activate cookies in your browser! Refresh after");

9
src/styles/keyframes.css Normal file
View File

@@ -0,0 +1,9 @@
/*For loading*/
@keyframes rotate {
from {
transform: rotateZ(0deg)
}
to {
transform: rotateZ(360deg)
}
}

136
src/styles/loadingPage/loadingPage.css Normal file
View File

@@ -0,0 +1,136 @@
.PageLoading {
position: fixed;
display: block;
width: 100%;
height: 100vh;
background-color: black;
top: 0;
z-index: 2000;
}
.PageLoading_Element {
height: 100vh;
top: 0;
position: fixed;
width: 50%;
display: block;
animation-delay: 1s;
}
/*
* logo
*/
.PageLoading_Logo {
z-index: 1001;
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
top: 40vh;
width: 150px;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.PageLoading_Logo-fadeOut {
opacity: 0;
transform: scale(1.5);
animation: pageLoadingLogo-fadeOut 2s ease-in-out;
}
@keyframes pageLoadingLogo-fadeOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(1.5);
}
}
.PageLoading_1 {
background-color: black;
z-index: 1000;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
}
.PageLoading_2 {
background-color: rgb(5, 5, 5);
z-index: 999;
animation-duration: 2s;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
}
.PageLoading_3 {
background-color: rgb(10, 10, 10);
z-index: 998;
animation-duration: 2.5s;
-webkit-animation-duration: 2.5s;
-moz-animation-duration: 2.5s;
}
.PageLoading_4 {
background-color: rgb(15, 15, 15);
z-index: 997;
animation-duration: 3s;
-webkit-animation-duration: 3s;
-moz-animation-duration: 3s;
}
.PageLoading_5 {
background-color: rgb(20, 20, 20);
z-index: 996;
animation-duration: 3.5s;
-webkit-animation-duration: 3.5s;
-moz-animation-duration: 3.5s;
}
.PageLoading_left {
transform: translateX(-100%);
animation-name: pageLoading-left;
-webkit-animation-name: pageLoading-left;
-moz-animation-name: pageLoading-left;
}
.PageLoading_right {
left: 50%;
transform: translateX(100%);
animation-name: pageLoading-right;
-webkit-animation-name: pageLoading-right;
-moz-animation-name: pageLoading-right;
}
/*
* Animations
*/
@keyframes pageLoading-left {
0% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes pageLoading-right {
0% {
transform: translateX(0);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
/*
* Responsive
*/
@media (min-width: 700px) {
}