Add reset password & UI change
This commit is contained in:
Qolzam
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,5 +1,5 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
public/bundle.js
|
public/bundle*.js
|
||||||
config/
|
config/
|
||||||
.vscode/
|
.vscode/
|
||||||
src/data/awsClient
|
src/data/awsClient
|
||||||
|
|||||||
208
package.json
208
package.json
@@ -1,104 +1,106 @@
|
|||||||
{
|
{
|
||||||
"name": "react-social",
|
"name": "react-social",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"description": "Simple react socail app",
|
"description": "Simple react socail app",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "NODE_ENV=test karma start",
|
"test": "NODE_ENV=test karma start",
|
||||||
"build": "webpack",
|
"build": "NODE_ENV=production webpack -p",
|
||||||
"start": "npm run build && node server.js"
|
"watch": "webpack -w",
|
||||||
},
|
"deploy:firebase": "npm run build && firebase deploy",
|
||||||
"author": "Amir Movahedi",
|
"start": "npm run build && node server.js"
|
||||||
"license": "MIT",
|
},
|
||||||
"dependencies": {
|
"author": "Amir Movahedi",
|
||||||
"amazon-cognito-identity-js": "^1.21.0",
|
"license": "MIT",
|
||||||
"aws-sdk": "^2.132.0",
|
"dependencies": {
|
||||||
"axios": "^0.16.1",
|
"amazon-cognito-identity-js": "^1.21.0",
|
||||||
"classnames": "^2.2.5",
|
"aws-sdk": "^2.132.0",
|
||||||
"crypto-js": "^3.1.9-1",
|
"axios": "^0.16.1",
|
||||||
"css-loader": "^0.28.0",
|
"classnames": "^2.2.5",
|
||||||
"deep-freeze-strict": "^1.1.1",
|
"crypto-js": "^3.1.9-1",
|
||||||
"expect": "^1.20.2",
|
"css-loader": "^0.28.0",
|
||||||
"express": "^4.15.2",
|
"deep-freeze-strict": "^1.1.1",
|
||||||
"faker": "^4.1.0",
|
"expect": "^1.20.2",
|
||||||
"file-loader": "^0.11.1",
|
"express": "^4.15.2",
|
||||||
"firebase": "^3.9.0",
|
"faker": "^4.1.0",
|
||||||
"inversify": "^4.3.0",
|
"file-loader": "^0.11.1",
|
||||||
"keycode": "^2.1.9",
|
"firebase": "^3.9.0",
|
||||||
"lodash": "^4.17.4",
|
"inversify": "^4.3.0",
|
||||||
"material-ui": "^0.19.4",
|
"keycode": "^2.1.9",
|
||||||
"moment": "^2.18.1",
|
"lodash": "^4.17.4",
|
||||||
"morgan": "^1.8.1",
|
"material-ui": "^0.19.4",
|
||||||
"node-env-file": "^0.1.8",
|
"moment": "^2.18.1",
|
||||||
"node-sass": "^4.5.2",
|
"morgan": "^1.8.1",
|
||||||
"prop-types": "^15.6.0",
|
"node-env-file": "^0.1.8",
|
||||||
"react": "^16.0.0",
|
"node-sass": "^4.5.2",
|
||||||
"react-addons-test-utils": "^15.6.2",
|
"prop-types": "^15.6.0",
|
||||||
"react-avatar-editor": "^10.3.0",
|
"react": "^16.0.0",
|
||||||
"react-dom": "^16.0.0",
|
"react-addons-test-utils": "^15.6.2",
|
||||||
"react-event-listener": "^0.5.1",
|
"react-avatar-editor": "^10.3.0",
|
||||||
"react-linkify": "^0.2.1",
|
"react-dom": "^16.0.0",
|
||||||
"react-parallax": "^1.4.4",
|
"react-event-listener": "^0.5.1",
|
||||||
"react-redux": "^5.0.6",
|
"react-linkify": "^0.2.1",
|
||||||
"react-router": "^4.1.1 ",
|
"react-parallax": "^1.4.4",
|
||||||
"react-router-dom": "^4.1.1",
|
"react-redux": "^5.0.6",
|
||||||
"react-router-redux": "^5.0.0-alpha.6",
|
"react-router": "^4.1.1 ",
|
||||||
"react-string-replace": "^0.4.0",
|
"react-router-dom": "^4.1.1",
|
||||||
"react-tap-event-plugin": "^3.0.2",
|
"react-router-redux": "^5.0.0-alpha.6",
|
||||||
"redux": "^3.7.2",
|
"react-string-replace": "^0.4.0",
|
||||||
"redux-actions": "^2.0.3",
|
"react-tap-event-plugin": "^3.0.2",
|
||||||
"redux-thunk": "^2.2.0",
|
"redux": "^3.7.2",
|
||||||
"reflect-metadata": "^0.1.10",
|
"redux-actions": "^2.0.3",
|
||||||
"sass-loader": "^6.0.3",
|
"redux-thunk": "^2.2.0",
|
||||||
"save": "^2.3.0",
|
"reflect-metadata": "^0.1.10",
|
||||||
"script-loader": "^0.7.0",
|
"sass-loader": "^6.0.3",
|
||||||
"style-loader": "^0.16.1",
|
"save": "^2.3.0",
|
||||||
"url-loader": "^0.5.8",
|
"script-loader": "^0.7.0",
|
||||||
"uuid": "^3.0.1"
|
"style-loader": "^0.16.1",
|
||||||
},
|
"url-loader": "^0.5.8",
|
||||||
"devDependencies": {
|
"uuid": "^3.0.1"
|
||||||
"@types/lodash": "^4.14.77",
|
},
|
||||||
"@types/material-ui": "^0.18.2",
|
"devDependencies": {
|
||||||
"@types/node": "^8.0.33",
|
"@types/lodash": "^4.14.77",
|
||||||
"@types/prop-types": "^15.5.2",
|
"@types/material-ui": "^0.18.2",
|
||||||
"@types/react": "^16.0.10",
|
"@types/node": "^8.0.33",
|
||||||
"@types/react-dom": "^16.0.1",
|
"@types/prop-types": "^15.5.2",
|
||||||
"@types/react-event-listener": "^0.4.4",
|
"@types/react": "^16.0.10",
|
||||||
"@types/react-redux": "^5.0.10",
|
"@types/react-dom": "^16.0.1",
|
||||||
"@types/react-router-dom": "^4.0.8",
|
"@types/react-event-listener": "^0.4.4",
|
||||||
"@types/react-router-redux": "^5.0.8",
|
"@types/react-redux": "^5.0.10",
|
||||||
"@types/react-tap-event-plugin": "0.0.30",
|
"@types/react-router-dom": "^4.0.8",
|
||||||
"@types/redux-logger": "^3.0.4",
|
"@types/react-router-redux": "^5.0.8",
|
||||||
"@types/uuid": "^3.4.3",
|
"@types/react-tap-event-plugin": "0.0.30",
|
||||||
"@types/webpack": "^3.0.13",
|
"@types/redux-logger": "^3.0.4",
|
||||||
"babel-core": "^6.24.1",
|
"@types/uuid": "^3.4.3",
|
||||||
"babel-loader": "^7.1.2",
|
"@types/webpack": "^3.0.13",
|
||||||
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
"babel-core": "^6.24.1",
|
||||||
"babel-polyfill": "^6.26.0",
|
"babel-loader": "^7.1.2",
|
||||||
"babel-preset-env": "^1.6.0",
|
"babel-plugin-transform-decorators-legacy": "^1.3.4",
|
||||||
"babel-preset-react": "^6.24.1",
|
"babel-polyfill": "^6.26.0",
|
||||||
"babel-preset-stage-0": "^6.24.1",
|
"babel-preset-env": "^1.6.0",
|
||||||
"css-loader": "^0.28.7",
|
"babel-preset-react": "^6.24.1",
|
||||||
"eslint": "^4.9.0",
|
"babel-preset-stage-0": "^6.24.1",
|
||||||
"karma": "^1.6.0",
|
"css-loader": "^0.28.7",
|
||||||
"karma-chrome-launcher": "^2.0.0",
|
"eslint": "^4.9.0",
|
||||||
"karma-mocha": "^1.3.0",
|
"karma": "^1.6.0",
|
||||||
"karma-mocha-reporter": "^2.2.3",
|
"karma-chrome-launcher": "^2.0.0",
|
||||||
"karma-sourcemap-loader": "^0.3.7",
|
"karma-mocha": "^1.3.0",
|
||||||
"karma-webpack": "^2.0.3",
|
"karma-mocha-reporter": "^2.2.3",
|
||||||
"mocha": "^3.2.0",
|
"karma-sourcemap-loader": "^0.3.7",
|
||||||
"redux-logger": "^3.0.1",
|
"karma-webpack": "^2.0.3",
|
||||||
"redux-mock-store": "^1.2.3",
|
"mocha": "^3.2.0",
|
||||||
"source-map-loader": "^0.2.2",
|
"redux-logger": "^3.0.1",
|
||||||
"ts-loader": "^2.3.7",
|
"redux-mock-store": "^1.2.3",
|
||||||
"ts-node": "^3.3.0",
|
"source-map-loader": "^0.2.2",
|
||||||
"tslint": "^5.7.0",
|
"ts-loader": "^2.3.7",
|
||||||
"tslint-config-standard": "^6.0.1",
|
"ts-node": "^3.3.0",
|
||||||
"typescript": "^2.5.3",
|
"tslint": "^5.7.0",
|
||||||
"webpack": "^3.6.0"
|
"tslint-config-standard": "^6.0.1",
|
||||||
},
|
"typescript": "^2.5.3",
|
||||||
"engines": {
|
"webpack": "^3.6.0"
|
||||||
"node": "7.3.0",
|
},
|
||||||
"npm": "3.10.10"
|
"engines": {
|
||||||
}
|
"node": "7.3.0",
|
||||||
}
|
"npm": "3.10.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -2,130 +2,127 @@
|
|||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
html {
|
html {
|
||||||
height: 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: #eeeeee;
|
background-color: #eeeeee;
|
||||||
height: 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
height: 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
.load-bundle {
|
.load-bundle {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
position: relative;
|
position: relative;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
-webkit-animation: sk-rotate 2.0s infinite linear;
|
||||||
-webkit-animation: sk-rotate 2.0s infinite linear;
|
animation: sk-rotate 2.0s infinite linear;
|
||||||
animation: sk-rotate 2.0s infinite linear;
|
}
|
||||||
}
|
|
||||||
|
.dot1,
|
||||||
.dot1,
|
.dot2 {
|
||||||
.dot2 {
|
width: 60%;
|
||||||
width: 60%;
|
height: 60%;
|
||||||
height: 60%;
|
display: inline-block;
|
||||||
display: inline-block;
|
position: absolute;
|
||||||
position: absolute;
|
top: 0;
|
||||||
top: 0;
|
background-color: #333;
|
||||||
background-color: #333;
|
border-radius: 100%;
|
||||||
border-radius: 100%;
|
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
|
||||||
|
animation: sk-bounce 2.0s infinite ease-in-out;
|
||||||
-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
|
}
|
||||||
animation: sk-bounce 2.0s infinite ease-in-out;
|
|
||||||
}
|
.dot2 {
|
||||||
|
top: auto;
|
||||||
.dot2 {
|
bottom: 0;
|
||||||
top: auto;
|
-webkit-animation-delay: -1.0s;
|
||||||
bottom: 0;
|
animation-delay: -1.0s;
|
||||||
-webkit-animation-delay: -1.0s;
|
}
|
||||||
animation-delay: -1.0s;
|
|
||||||
}
|
@-webkit-keyframes sk-rotate {
|
||||||
|
100% {
|
||||||
@-webkit-keyframes sk-rotate {
|
-webkit-transform: rotate(360deg)
|
||||||
100% {
|
}
|
||||||
-webkit-transform: rotate(360deg)
|
}
|
||||||
}
|
|
||||||
}
|
@keyframes sk-rotate {
|
||||||
|
100% {
|
||||||
@keyframes sk-rotate {
|
transform: rotate(360deg);
|
||||||
100% {
|
-webkit-transform: rotate(360deg)
|
||||||
transform: rotate(360deg);
|
}
|
||||||
-webkit-transform: rotate(360deg)
|
}
|
||||||
}
|
|
||||||
}
|
@-webkit-keyframes sk-bounce {
|
||||||
|
0%,
|
||||||
@-webkit-keyframes sk-bounce {
|
100% {
|
||||||
0%,
|
-webkit-transform: scale(0.0)
|
||||||
100% {
|
}
|
||||||
-webkit-transform: scale(0.0)
|
50% {
|
||||||
}
|
-webkit-transform: scale(1.0)
|
||||||
50% {
|
}
|
||||||
-webkit-transform: scale(1.0)
|
}
|
||||||
}
|
|
||||||
}
|
@keyframes sk-bounce {
|
||||||
|
0%,
|
||||||
@keyframes sk-bounce {
|
100% {
|
||||||
0%,
|
transform: scale(0.0);
|
||||||
100% {
|
-webkit-transform: scale(0.0);
|
||||||
transform: scale(0.0);
|
}
|
||||||
-webkit-transform: scale(0.0);
|
50% {
|
||||||
}
|
transform: scale(1.0);
|
||||||
50% {
|
-webkit-transform: scale(1.0);
|
||||||
transform: scale(1.0);
|
}
|
||||||
-webkit-transform: scale(1.0);
|
}
|
||||||
}
|
|
||||||
}
|
.load-box {
|
||||||
|
display: flex;
|
||||||
.load-box {
|
justify-content: center;
|
||||||
display: flex;
|
align-items: center;
|
||||||
justify-content: center;
|
flex-direction: column;
|
||||||
align-items: center;
|
height: 100%;
|
||||||
flex-direction: column;
|
}
|
||||||
height: 100%;
|
|
||||||
}
|
.load-text {
|
||||||
|
background-color: #666666;
|
||||||
.load-text {
|
-webkit-background-clip: text;
|
||||||
background-color: #666666;
|
-moz-background-clip: text;
|
||||||
-webkit-background-clip: text;
|
background-clip: text;
|
||||||
-moz-background-clip: text;
|
color: transparent;
|
||||||
background-clip: text;
|
font-weight: 100;
|
||||||
color: transparent;
|
}
|
||||||
|
|
||||||
font-weight: 100;
|
.load-progress {
|
||||||
}
|
background-color: #4CAF50;
|
||||||
|
padding: 0.01em 16px;
|
||||||
.load-progress {
|
}
|
||||||
background-color: #4CAF50;
|
</style>
|
||||||
padding: 0.01em 16px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="load-box">
|
<div class="load-box">
|
||||||
<div class="load-bundle">
|
<div class="load-bundle">
|
||||||
<div class="dot1"></div>
|
<div class="dot1"></div>
|
||||||
<div class="dot2"></div>
|
<div class="dot2"></div>
|
||||||
</div>
|
</div>
|
||||||
<h2 class="load-text">Green Open Social</h2>
|
<h2 class="load-text">Green Open Social</h2>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="/bundle.js"></script>
|
<script src="/bundle-v0.1.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@@ -107,6 +107,28 @@ export const dbUpdatePassword = (newPassword: string) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset user's password
|
||||||
|
* @param {string} newPassword
|
||||||
|
*/
|
||||||
|
export const dbResetPassword = (email: string) => {
|
||||||
|
return (dispatch: any, getState: any) => {
|
||||||
|
dispatch(globalActions.showNotificationRequest())
|
||||||
|
|
||||||
|
return authorizeService.resetPassword(email).then(() => {
|
||||||
|
|
||||||
|
// Reset password successful.
|
||||||
|
dispatch(globalActions.showNotificationSuccess())
|
||||||
|
dispatch(push('/login'))
|
||||||
|
})
|
||||||
|
.catch((error: SocialError) => {
|
||||||
|
// An error happened.
|
||||||
|
dispatch(globalActions.showErrorMessage(error.code))
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* _____________ CRUD State _____________ */
|
/* _____________ CRUD State _____________ */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ export const dbUpdateComment = (id: string, postId: string, text: string) => {
|
|||||||
userId: uid
|
userId: uid
|
||||||
}
|
}
|
||||||
|
|
||||||
return commentService.updateComment(uid,postId,updatedComment)
|
return commentService.updateComment(id,postId,updatedComment)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
dispatch(updateComment( id, postId, text))
|
dispatch(updateComment( id, postId, text))
|
||||||
dispatch(globalActions.hideTopLoading())
|
dispatch(globalActions.hideTopLoading())
|
||||||
|
|||||||
@@ -7,6 +7,9 @@ import Paper from 'material-ui/Paper'
|
|||||||
import TextField from 'material-ui/TextField'
|
import TextField from 'material-ui/TextField'
|
||||||
import RaisedButton from 'material-ui/RaisedButton'
|
import RaisedButton from 'material-ui/RaisedButton'
|
||||||
import FlatButton from 'material-ui/FlatButton'
|
import FlatButton from 'material-ui/FlatButton'
|
||||||
|
import FontIcon from 'material-ui/FontIcon'
|
||||||
|
import Divider from 'material-ui/Divider'
|
||||||
|
import ActionAndroid from 'material-ui/svg-icons/action/android'
|
||||||
|
|
||||||
// - Import actions
|
// - Import actions
|
||||||
import * as authorizeActions from 'actions/authorizeActions'
|
import * as authorizeActions from 'actions/authorizeActions'
|
||||||
@@ -16,6 +19,24 @@ import { ILoginComponentState } from './ILoginComponentState'
|
|||||||
// - Create Login component class
|
// - Create Login component class
|
||||||
export class LoginComponent extends Component<ILoginComponentProps,ILoginComponentState> {
|
export class LoginComponent extends Component<ILoginComponentProps,ILoginComponentState> {
|
||||||
|
|
||||||
|
styles = {
|
||||||
|
singinOptions: {
|
||||||
|
paddingBottom: 10
|
||||||
|
},
|
||||||
|
divider: {
|
||||||
|
marginBottom: 10,
|
||||||
|
marginTop: 15
|
||||||
|
},
|
||||||
|
restPassword: {
|
||||||
|
lineHeight: 6,
|
||||||
|
fontWeight: 100,
|
||||||
|
fontSize: 'small'
|
||||||
|
},
|
||||||
|
restPasswordLink: {
|
||||||
|
color: '#0095ff'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Component constructor
|
* Component constructor
|
||||||
* @param {object} props is an object properties of component
|
* @param {object} props is an object properties of component
|
||||||
@@ -30,6 +51,7 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
|
|||||||
passwordInputError: '',
|
passwordInputError: '',
|
||||||
confirmInputError: ''
|
confirmInputError: ''
|
||||||
}
|
}
|
||||||
|
|
||||||
// Binding function to `this`
|
// Binding function to `this`
|
||||||
this.handleForm = this.handleForm.bind(this)
|
this.handleForm = this.handleForm.bind(this)
|
||||||
|
|
||||||
@@ -136,9 +158,21 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
|
|||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
lineHeight: '32px',
|
lineHeight: '32px',
|
||||||
margin: 0
|
margin: 0
|
||||||
}}>Sign in</h2>
|
}} className='zoomOutLCorner animated'>Sign in</h2>
|
||||||
</div>
|
</div>
|
||||||
|
<div style={this.styles.singinOptions}>
|
||||||
|
<FlatButton
|
||||||
|
icon={<div className='icon-fb icon'></div>}
|
||||||
|
/>
|
||||||
|
<FlatButton
|
||||||
|
icon={<div className='icon-google icon'></div>}
|
||||||
|
/>
|
||||||
|
<FlatButton
|
||||||
|
icon={<div className='icon-github icon'></div>}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Divider style={this.styles.divider} />
|
||||||
<TextField
|
<TextField
|
||||||
onChange={this.handleInputChange}
|
onChange={this.handleInputChange}
|
||||||
errorText={this.state.emailInputError}
|
errorText={this.state.emailInputError}
|
||||||
@@ -167,7 +201,7 @@ export class LoginComponent extends Component<ILoginComponentProps,ILoginCompone
|
|||||||
<RaisedButton label='Login' primary={true} onClick={this.handleForm} tabIndex={3} />
|
<RaisedButton label='Login' primary={true} onClick={this.handleForm} tabIndex={3} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<span style={this.styles.restPassword as any}>Have you forgot your password? <NavLink to='/resetPassword' style={this.styles.restPasswordLink}>reset your password</NavLink></span>
|
||||||
</div>
|
</div>
|
||||||
</Paper>
|
</Paper>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import LinearProgress from 'material-ui/LinearProgress'
|
|||||||
import Home from 'components/home'
|
import Home from 'components/home'
|
||||||
import Signup from 'components/signup'
|
import Signup from 'components/signup'
|
||||||
import Login from 'components/login'
|
import Login from 'components/login'
|
||||||
|
import ResetPassword from 'components/resetPassword'
|
||||||
import Setting from 'components/setting'
|
import Setting from 'components/setting'
|
||||||
import MasterLoading from 'components/masterLoading'
|
import MasterLoading from 'components/masterLoading'
|
||||||
import { IMasterComponentProps } from './IMasterComponentProps'
|
import { IMasterComponentProps } from './IMasterComponentProps'
|
||||||
@@ -133,6 +134,7 @@ export class MasterComponent extends Component<IMasterComponentProps, IMasterCom
|
|||||||
? (<Switch>
|
? (<Switch>
|
||||||
<Route path='/signup' component={Signup} />
|
<Route path='/signup' component={Signup} />
|
||||||
<Route path='/settings' component={Setting} />
|
<Route path='/settings' component={Setting} />
|
||||||
|
<Route path='/resetPassword' component={ResetPassword} />
|
||||||
<Route path='/login' render={() => {
|
<Route path='/login' render={() => {
|
||||||
console.log('this.props.authed: ', this.props.authed, 'this.props: ', this.props)
|
console.log('this.props.authed: ', this.props.authed, 'this.props: ', this.props)
|
||||||
return (
|
return (
|
||||||
|
|||||||
16
src/components/resetPassword/IRestPasswordComponentProps.ts
Normal file
16
src/components/resetPassword/IRestPasswordComponentProps.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
export interface IRestPasswordComponentProps {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset password
|
||||||
|
*
|
||||||
|
* @memberof IRestPasswordComponentProps
|
||||||
|
*/
|
||||||
|
resetPassword: (email: string) => any
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Redirect to login page
|
||||||
|
*
|
||||||
|
* @memberof IRestPasswordComponentProps
|
||||||
|
*/
|
||||||
|
loginPage: () => void
|
||||||
|
}
|
||||||
20
src/components/resetPassword/IRestPasswordComponentState.ts
Normal file
20
src/components/resetPassword/IRestPasswordComponentState.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
|
||||||
|
export interface IRestPasswordComponentState {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Email input value
|
||||||
|
*
|
||||||
|
* @type {string}
|
||||||
|
* @memberof IRestPasswordComponentState
|
||||||
|
*/
|
||||||
|
emailInput: string
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Email input error text
|
||||||
|
*
|
||||||
|
* @type {string}
|
||||||
|
* @memberof IRestPasswordComponentState
|
||||||
|
*/
|
||||||
|
emailInputError: string
|
||||||
|
|
||||||
|
}
|
||||||
173
src/components/resetPassword/RestPasswordComponent.tsx
Normal file
173
src/components/resetPassword/RestPasswordComponent.tsx
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
// - Import external components
|
||||||
|
import React, { Component } from 'react'
|
||||||
|
import { connect } from 'react-redux'
|
||||||
|
import { NavLink, withRouter } from 'react-router-dom'
|
||||||
|
import { push } from 'react-router-redux'
|
||||||
|
import Paper from 'material-ui/Paper'
|
||||||
|
import TextField from 'material-ui/TextField'
|
||||||
|
import RaisedButton from 'material-ui/RaisedButton'
|
||||||
|
import FlatButton from 'material-ui/FlatButton'
|
||||||
|
import { firebaseRef, firebaseAuth } from 'data/firebaseClient'
|
||||||
|
|
||||||
|
// - Import actions
|
||||||
|
import * as authorizeActions from 'actions/authorizeActions'
|
||||||
|
import { IRestPasswordComponentProps } from './IRestPasswordComponentProps'
|
||||||
|
import { IRestPasswordComponentState } from './IRestPasswordComponentState'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create component class
|
||||||
|
*
|
||||||
|
* @export
|
||||||
|
* @class RestPasswordComponent
|
||||||
|
* @extends {Component}
|
||||||
|
*/
|
||||||
|
export class RestPasswordComponent extends Component<IRestPasswordComponentProps,IRestPasswordComponentState> {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Component constructor
|
||||||
|
* @param {object} props is an object properties of component
|
||||||
|
*/
|
||||||
|
constructor (props: IRestPasswordComponentProps) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
emailInput: '',
|
||||||
|
emailInputError: ''
|
||||||
|
|
||||||
|
}
|
||||||
|
// Binding function to `this`
|
||||||
|
this.handleForm = this.handleForm.bind(this)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle data on input change
|
||||||
|
* @param {event} evt is an event of inputs of element on change
|
||||||
|
*/
|
||||||
|
handleInputChange = (event: any) => {
|
||||||
|
const target = event.target
|
||||||
|
const value = target.type === 'checkbox' ? target.checked : target.value
|
||||||
|
const name = target.name
|
||||||
|
this.setState({
|
||||||
|
[name]: value
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle register form
|
||||||
|
*/
|
||||||
|
handleForm = () => {
|
||||||
|
|
||||||
|
let error = false
|
||||||
|
if (this.state.emailInput === '') {
|
||||||
|
this.setState({
|
||||||
|
emailInputError: 'This field is required'
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.props.resetPassword(this.state.emailInput)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reneder component DOM
|
||||||
|
* @return {react element} return the DOM which rendered by component
|
||||||
|
*/
|
||||||
|
render () {
|
||||||
|
|
||||||
|
const paperStyle = {
|
||||||
|
minHeight: 370,
|
||||||
|
width: 450,
|
||||||
|
textAlign: 'center',
|
||||||
|
display: 'block',
|
||||||
|
margin: 'auto'
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<h1 style={{
|
||||||
|
textAlign: 'center',
|
||||||
|
padding: '20px',
|
||||||
|
fontSize: '30px',
|
||||||
|
fontWeight: 500,
|
||||||
|
lineHeight: '32px',
|
||||||
|
margin: 'auto',
|
||||||
|
color: 'rgba(138, 148, 138, 0.2)'
|
||||||
|
}}>Green</h1>
|
||||||
|
|
||||||
|
<div className='animate-bottom'>
|
||||||
|
<Paper style={paperStyle} zDepth={1} rounded={false} >
|
||||||
|
<div style={{ padding: '48px 40px 36px' }}>
|
||||||
|
<div style={{
|
||||||
|
paddingLeft: '40px',
|
||||||
|
paddingRight: '40px'
|
||||||
|
}}>
|
||||||
|
|
||||||
|
<h2 style={{
|
||||||
|
textAlign: 'left',
|
||||||
|
paddingTop: '16px',
|
||||||
|
fontSize: '24px',
|
||||||
|
fontWeight: 400,
|
||||||
|
lineHeight: '32px',
|
||||||
|
margin: 0
|
||||||
|
}} className='zoomOutLCorner animated'>Reset Password</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<TextField
|
||||||
|
onChange={this.handleInputChange}
|
||||||
|
errorText={this.state.emailInputError}
|
||||||
|
name='emailInput'
|
||||||
|
floatingLabelStyle={{ fontSize: '15px' }}
|
||||||
|
floatingLabelText='Email'
|
||||||
|
type='email'
|
||||||
|
/><br />
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<div className='settings__button-box'>
|
||||||
|
<div>
|
||||||
|
<FlatButton label='Back' onClick={this.props.loginPage} />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<RaisedButton label='Reset password' primary={true} onClick={this.handleForm} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Paper>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Map dispatch to props
|
||||||
|
* @param {func} dispatch is the function to dispatch action to reducers
|
||||||
|
* @param {object} ownProps is the props belong to component
|
||||||
|
* @return {object} props of component
|
||||||
|
*/
|
||||||
|
const mapDispatchToProps = (dispatch: Function, ownProps: IRestPasswordComponentProps) => {
|
||||||
|
return {
|
||||||
|
loginPage: () => {
|
||||||
|
dispatch(push('/login'))
|
||||||
|
},
|
||||||
|
resetPassword: (emailAddress: string) => dispatch(authorizeActions.dbResetPassword(emailAddress))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Map state to props
|
||||||
|
* @param {object} state is the obeject from redux store
|
||||||
|
* @param {object} ownProps is the props belong to component
|
||||||
|
* @return {object} props of component
|
||||||
|
*/
|
||||||
|
const mapStateToProps = (state: any, ownProps: IRestPasswordComponentProps) => {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// - Connect component to redux store
|
||||||
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RestPasswordComponent as any))
|
||||||
2
src/components/resetPassword/index.ts
Normal file
2
src/components/resetPassword/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
import RestPasswordComponent from './RestPasswordComponent'
|
||||||
|
export default RestPasswordComponent
|
||||||
@@ -193,7 +193,7 @@ export class SignupComponent extends Component<ISignupComponentProps,ISignupComp
|
|||||||
fontSize: '24px',
|
fontSize: '24px',
|
||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
lineHeight: '32px',
|
lineHeight: '32px',
|
||||||
margin: 0}}>Sign up</h2>
|
margin: 0}} className='zoomOutLCorner animated'>Sign up</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<TextField
|
<TextField
|
||||||
|
|||||||
@@ -40,5 +40,12 @@ export interface IAuthorizeService {
|
|||||||
*
|
*
|
||||||
* @memberof IAuthorizeService
|
* @memberof IAuthorizeService
|
||||||
*/
|
*/
|
||||||
onAuthStateChanged: (callBack: (user: User) => void)
|
onAuthStateChanged: (callBack: (user: User) => void) => void
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset user password
|
||||||
|
*
|
||||||
|
* @memberof IAuthorizeService
|
||||||
|
*/
|
||||||
|
resetPassword: (email: string) => Promise<void>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ export interface ICommentService {
|
|||||||
|
|
||||||
addComment: (postId: string, comment: Comment) => Promise<string>
|
addComment: (postId: string, comment: Comment) => Promise<string>
|
||||||
getComments: (callback: (resultComments: { [postId: string]: { [commentId: string]: Comment } }) => void) => void
|
getComments: (callback: (resultComments: { [postId: string]: { [commentId: string]: Comment } }) => void) => void
|
||||||
updateComment: (userId: string, postId: string, comment: Comment) => Promise<void>
|
updateComment: (commentId: string, postId: string, comment: Comment) => Promise<void>
|
||||||
deleteComment: (commentId: string, postId: string) => Promise<void>
|
deleteComment: (commentId: string, postId: string) => Promise<void>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ try {
|
|||||||
messagingSenderId: process.env.MESSAGING_SENDER_ID
|
messagingSenderId: process.env.MESSAGING_SENDER_ID
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(firebase)
|
||||||
firebase.initializeApp(config)
|
firebase.initializeApp(config)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.log('=========Firebase initializer==============')
|
console.log('=========Firebase initializer==============')
|
||||||
|
|||||||
@@ -108,8 +108,25 @@ export class AuthorizeService implements IAuthorizeService {
|
|||||||
*
|
*
|
||||||
* @memberof IAuthorizeService
|
* @memberof IAuthorizeService
|
||||||
*/
|
*/
|
||||||
onAuthStateChanged: (callBack: (user: User) => void) => any = (callBack) => {
|
public onAuthStateChanged: (callBack: (user: User) => void) => any = (callBack) => {
|
||||||
firebaseAuth().onAuthStateChanged(callBack)
|
firebaseAuth().onAuthStateChanged(callBack)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reset user password
|
||||||
|
*
|
||||||
|
* @memberof AuthorizeService
|
||||||
|
*/
|
||||||
|
public resetPassword: (email: string) => Promise<void> = (email) => {
|
||||||
|
return new Promise<void>((resolve,reject) => {
|
||||||
|
let auth = firebaseAuth()
|
||||||
|
|
||||||
|
auth.sendPasswordResetEmail(email).then(function () {
|
||||||
|
resolve()
|
||||||
|
}).catch((error: any) => {
|
||||||
|
// An error happened.
|
||||||
|
reject(new SocialError(error.code, error.message))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ export class CircleService implements ICircleService {
|
|||||||
public addCircle: (userId: string, circle: Circle)
|
public addCircle: (userId: string, circle: Circle)
|
||||||
=> Promise<string> = (userId, circle) => {
|
=> Promise<string> = (userId, circle) => {
|
||||||
return new Promise<string>((resolve,reject) => {
|
return new Promise<string>((resolve,reject) => {
|
||||||
let circleRef = firebaseRef.child(`userCircles/${userId}/circles`).push(circle)
|
let circleRef = firebaseRef.child(`users/${userId}/circles`).push(circle)
|
||||||
circleRef.then(() => {
|
circleRef.then(() => {
|
||||||
resolve(circleRef.key as string)
|
resolve(circleRef.key as string)
|
||||||
})
|
})
|
||||||
@@ -35,8 +35,8 @@ export class CircleService implements ICircleService {
|
|||||||
return new Promise<void>((resolve,reject) => {
|
return new Promise<void>((resolve,reject) => {
|
||||||
|
|
||||||
let updates: any = {}
|
let updates: any = {}
|
||||||
updates[`userCircles/${userId}/circles/${circleId}/users/${userFollowingId}`] = userCircle
|
updates[`users/${userId}/circles/${circleId}/users/${userFollowingId}`] = userCircle
|
||||||
updates[`userCircles/${userFollowingId}/circles/-Followers/users/${userId}`] = userFollower
|
updates[`users/${userFollowingId}/circles/-Followers/users/${userId}`] = userFollower
|
||||||
|
|
||||||
firebaseRef.update(updates).then(() => {
|
firebaseRef.update(updates).then(() => {
|
||||||
resolve()
|
resolve()
|
||||||
@@ -52,8 +52,8 @@ export class CircleService implements ICircleService {
|
|||||||
return new Promise<void>((resolve,reject) => {
|
return new Promise<void>((resolve,reject) => {
|
||||||
|
|
||||||
let updates: any = {}
|
let updates: any = {}
|
||||||
updates[`userCircles/${userId}/circles/${circleId}/users/${userFollowingId}`] = null
|
updates[`users/${userId}/circles/${circleId}/users/${userFollowingId}`] = null
|
||||||
updates[`userCircles/${userFollowingId}/circles/-Followers/users/${userId}`] = null
|
updates[`users/${userFollowingId}/circles/-Followers/users/${userId}`] = null
|
||||||
|
|
||||||
firebaseRef.update(updates).then(() => {
|
firebaseRef.update(updates).then(() => {
|
||||||
resolve()
|
resolve()
|
||||||
@@ -69,7 +69,7 @@ export class CircleService implements ICircleService {
|
|||||||
return new Promise<void>((resolve,reject) => {
|
return new Promise<void>((resolve,reject) => {
|
||||||
|
|
||||||
let updates: any = {}
|
let updates: any = {}
|
||||||
updates[`userCircles/${userId}/circles/${circleId}`] = circle
|
updates[`users/${userId}/circles/${circleId}`] = circle
|
||||||
firebaseRef.update(updates).then(() => {
|
firebaseRef.update(updates).then(() => {
|
||||||
resolve()
|
resolve()
|
||||||
})
|
})
|
||||||
@@ -85,7 +85,7 @@ export class CircleService implements ICircleService {
|
|||||||
return new Promise<void>((resolve,reject) => {
|
return new Promise<void>((resolve,reject) => {
|
||||||
|
|
||||||
let updates: any = {}
|
let updates: any = {}
|
||||||
updates[`userCircles/${userId}/circles/${circleId}`] = null
|
updates[`users/${userId}/circles/${circleId}`] = null
|
||||||
firebaseRef.update(updates).then(() => {
|
firebaseRef.update(updates).then(() => {
|
||||||
resolve()
|
resolve()
|
||||||
})
|
})
|
||||||
@@ -97,7 +97,7 @@ export class CircleService implements ICircleService {
|
|||||||
}
|
}
|
||||||
public getCircles: (userId: string) => Promise<{ [circleId: string]: Circle }> = (userId) => {
|
public getCircles: (userId: string) => Promise<{ [circleId: string]: Circle }> = (userId) => {
|
||||||
return new Promise<{ [circleId: string]: Circle }>((resolve,reject) => {
|
return new Promise<{ [circleId: string]: Circle }>((resolve,reject) => {
|
||||||
let circlesRef: any = firebaseRef.child(`userCircles/${userId}/circles`)
|
let circlesRef: any = firebaseRef.child(`users/${userId}/circles`)
|
||||||
|
|
||||||
circlesRef.once('value').then((snapshot: any) => {
|
circlesRef.once('value').then((snapshot: any) => {
|
||||||
let circles: any = snapshot.val() || {}
|
let circles: any = snapshot.val() || {}
|
||||||
|
|||||||
@@ -35,12 +35,12 @@ export class CommentService implements ICommentService {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
public updateComment: (userId: string, postId: string, comment: Comment)
|
public updateComment: (commentId: string, postId: string, comment: Comment)
|
||||||
=> Promise<void> = (userId, postId, comment) => {
|
=> Promise<void> = (commentId, postId, comment) => {
|
||||||
return new Promise<void>((resolve,reject) => {
|
return new Promise<void>((resolve,reject) => {
|
||||||
|
|
||||||
let updates: any = {}
|
let updates: any = {}
|
||||||
updates[`postComments/${postId}/${userId}`] = comment
|
updates[`postComments/${postId}/${commentId}`] = comment
|
||||||
firebaseRef.update(updates)
|
firebaseRef.update(updates)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
resolve()
|
resolve()
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
@import "base/variables";
|
@import "base/variables";
|
||||||
@import 'base/grid';
|
@import 'base/grid';
|
||||||
@import 'base/animate';
|
@import 'base/animate';
|
||||||
|
@import 'base/icon';
|
||||||
|
|
||||||
// Component styles
|
// Component styles
|
||||||
@import 'components/global';
|
@import 'components/global';
|
||||||
@import 'components/master';
|
@import 'components/master';
|
||||||
@@ -19,5 +18,4 @@
|
|||||||
@import 'components/login';
|
@import 'components/login';
|
||||||
@import 'components/signup';
|
@import 'components/signup';
|
||||||
@import 'components/masterLoading';
|
@import 'components/masterLoading';
|
||||||
@import 'components/settings';
|
@import 'components/settings';
|
||||||
|
|
||||||
@@ -165,3 +165,32 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.animated {
|
||||||
|
animation-duration: .5s;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.infinite {
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated.hinge {
|
||||||
|
animation-duration: 2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes zoomOutUp {
|
||||||
|
40% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale3d(1, 1, 1) translate3d(0, 0px, 0);
|
||||||
|
animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: scale3d(.8, .8, .8) translate3d(-80px, -40px, 0);
|
||||||
|
transform-origin: center bottom;
|
||||||
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zoomOutLCorner {
|
||||||
|
animation-name: zoomOutUp;
|
||||||
|
}
|
||||||
38
src/styles/base/_icon.scss
Normal file
38
src/styles/base/_icon.scss
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
// https://codepen.io/noahblon/pen/xGbXdV
|
||||||
|
@function _buildIcon($icon) {
|
||||||
|
$icon: '%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%3E#{$icon}%3C%2Fsvg%3E';
|
||||||
|
@return $icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function _buildPath($path, $parameters) {
|
||||||
|
$icon: '%3Cpath%20fill%3D%22#{map-get($parameters, color)}%22%20stroke%3D%22#{map-get($parameters, stroke-color)}%22%20stroke-width%3D%22#{map-get($parameters, stroke-width)}%22%20style%3D%22#{map-get($parameters, css)}%22%20d%3D%22#{$path}%22%20%2F%3E';
|
||||||
|
@return $icon;
|
||||||
|
}
|
||||||
|
|
||||||
|
@function icon( $icon-name, $color, $stroke-color: transparent, $stroke-width: 0, $css: '' // arbitrary css
|
||||||
|
) {
|
||||||
|
$parameters: ( 'color': $color, 'stroke-color': $stroke-color, 'stroke-width': $stroke-width, 'css': $css);
|
||||||
|
$icons: ( github: _buildPath('M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12', $parameters), google: _buildPath('M7.635 10.909v2.619h4.335c-.173 1.125-1.31 3.295-4.331 3.295-2.604 0-4.731-2.16-4.731-4.823 0-2.662 2.122-4.822 4.728-4.822 1.485 0 2.479.633 3.045 1.178l2.073-1.994c-1.33-1.245-3.056-1.995-5.115-1.995C3.412 4.365 0 7.785 0 12s3.414 7.635 7.635 7.635c4.41 0 7.332-3.098 7.332-7.461 0-.501-.054-.885-.12-1.265H7.635zm16.365 0h-2.183V8.726h-2.183v2.183h-2.182v2.181h2.184v2.184h2.189V13.09H24', $parameters), facebook: _buildPath('M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0', $parameters));
|
||||||
|
$icon: _buildIcon(map-get($icons, $icon-name));
|
||||||
|
@return url("data:image/svg+xml;charset=utf8,#{$icon}");
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-github {
|
||||||
|
background-image: icon(github, #24292e);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-google {
|
||||||
|
background-image: icon(google, #db4437);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-fb {
|
||||||
|
background-image: icon(facebook, #4267b2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// .icon-dashstroke { background-image: icon(heart, red, black, 2, 'stroke-dasharray : 2px, 1px;'); }
|
||||||
@@ -7,147 +7,146 @@ process.env.NODE_ENV = process.env.NODE_ENV || 'development';
|
|||||||
console.log(process.env.NODE_ENV);
|
console.log(process.env.NODE_ENV);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env'));
|
envFile(path.join(__dirname, 'config/' + process.env.NODE_ENV + '.env'));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var babelOptions = {
|
var babelOptions = {
|
||||||
plugins: ['transform-decorators-legacy'],
|
plugins: ['transform-decorators-legacy'],
|
||||||
presets: ['babel-polyfill','react', 'env', 'stage-0']
|
presets: ['babel-polyfill', 'react', 'env', 'stage-0']
|
||||||
};
|
};
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: [
|
entry: [
|
||||||
'./src/index.tsx'
|
'./src/index.tsx'
|
||||||
],
|
|
||||||
externals: {
|
|
||||||
jquery: 'jQuery'
|
|
||||||
},
|
|
||||||
plugins: (process.env.NODE_ENV === 'production') ? [
|
|
||||||
new webpack.optimize.UglifyJsPlugin({
|
|
||||||
minimize: true,
|
|
||||||
compressor: {
|
|
||||||
warnings: false
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
'process.env': {
|
|
||||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
|
|
||||||
API_KEY: JSON.stringify(process.env.API_KEY),
|
|
||||||
AUTH_DOMAIN: JSON.stringify(process.env.AUTH_DOMAIN),
|
|
||||||
DATABASE_URL: JSON.stringify(process.env.DATABASE_URL),
|
|
||||||
STORAGE_BUCKET: JSON.stringify(process.env.STORAGE_BUCKET),
|
|
||||||
PROJECT_ID: JSON.stringify(process.env.PROJECT_ID),
|
|
||||||
MESSAGING_SENDER_ID: JSON.stringify(process.env.MESSAGING_SENDER_ID),
|
|
||||||
HOST_URL: JSON.stringify(process.env.HOST_URL)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
] : [
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
'process.env': {
|
|
||||||
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
|
|
||||||
API_KEY: JSON.stringify(process.env.API_KEY),
|
|
||||||
AUTH_DOMAIN: JSON.stringify(process.env.AUTH_DOMAIN),
|
|
||||||
DATABASE_URL: JSON.stringify(process.env.DATABASE_URL),
|
|
||||||
STORAGE_BUCKET: JSON.stringify(process.env.STORAGE_BUCKET),
|
|
||||||
PROJECT_ID: JSON.stringify(process.env.PROJECT_ID),
|
|
||||||
MESSAGING_SENDER_ID: JSON.stringify(process.env.MESSAGING_SENDER_ID),
|
|
||||||
HOST_URL: JSON.stringify(process.env.HOST_URL)
|
|
||||||
}
|
|
||||||
})],
|
|
||||||
output: {
|
|
||||||
path: path.resolve(__dirname, './public'),
|
|
||||||
filename: 'bundle.js',
|
|
||||||
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
|
|
||||||
modules: [
|
|
||||||
__dirname,
|
|
||||||
path.resolve(__dirname, 'node_modules')
|
|
||||||
],
|
],
|
||||||
alias: {
|
externals: {
|
||||||
src: 'src',
|
jquery: 'jQuery'
|
||||||
components: 'src/components',
|
},
|
||||||
reducers: 'src/reducers',
|
plugins: (process.env.NODE_ENV === 'production') ? [
|
||||||
constants: 'src/constants',
|
new webpack.optimize.UglifyJsPlugin({
|
||||||
core: 'src/core',
|
minimize: true,
|
||||||
data: 'src/data',
|
compressor: {
|
||||||
api: 'src/api',
|
warnings: false
|
||||||
layouts: 'src/layouts',
|
}
|
||||||
models: 'src/models',
|
}),
|
||||||
store: 'src/store',
|
new webpack.DefinePlugin({
|
||||||
applicationStyles: 'src/styles/app.scss',
|
'process.env': {
|
||||||
actions: 'src/actions',
|
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
|
||||||
actionTypes: 'src/constants/actionTypes.jsx'
|
API_KEY: JSON.stringify(process.env.API_KEY),
|
||||||
|
AUTH_DOMAIN: JSON.stringify(process.env.AUTH_DOMAIN),
|
||||||
|
DATABASE_URL: JSON.stringify(process.env.DATABASE_URL),
|
||||||
|
STORAGE_BUCKET: JSON.stringify(process.env.STORAGE_BUCKET),
|
||||||
|
PROJECT_ID: JSON.stringify(process.env.PROJECT_ID),
|
||||||
|
MESSAGING_SENDER_ID: JSON.stringify(process.env.MESSAGING_SENDER_ID),
|
||||||
|
HOST_URL: JSON.stringify(process.env.HOST_URL)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
] : [
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env': {
|
||||||
|
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
|
||||||
|
API_KEY: JSON.stringify(process.env.API_KEY),
|
||||||
|
AUTH_DOMAIN: JSON.stringify(process.env.AUTH_DOMAIN),
|
||||||
|
DATABASE_URL: JSON.stringify(process.env.DATABASE_URL),
|
||||||
|
STORAGE_BUCKET: JSON.stringify(process.env.STORAGE_BUCKET),
|
||||||
|
PROJECT_ID: JSON.stringify(process.env.PROJECT_ID),
|
||||||
|
MESSAGING_SENDER_ID: JSON.stringify(process.env.MESSAGING_SENDER_ID),
|
||||||
|
HOST_URL: JSON.stringify(process.env.HOST_URL)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
],
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, './public'),
|
||||||
|
filename: 'bundle-v0.1.js',
|
||||||
|
|
||||||
},
|
},
|
||||||
extensions: [' ', '.scss', ".ts", ".tsx", ".js", ".json", '.jsx']
|
resolve: {
|
||||||
},
|
|
||||||
module: {
|
modules: [
|
||||||
rules: [
|
__dirname,
|
||||||
{
|
path.resolve(__dirname, 'node_modules')
|
||||||
test: /\.ts(x?)$/,
|
],
|
||||||
exclude: /node_modules/,
|
alias: {
|
||||||
use: [
|
src: 'src',
|
||||||
{
|
components: 'src/components',
|
||||||
loader: 'babel-loader',
|
reducers: 'src/reducers',
|
||||||
options: babelOptions
|
constants: 'src/constants',
|
||||||
},
|
core: 'src/core',
|
||||||
{
|
data: 'src/data',
|
||||||
loader: 'ts-loader',
|
api: 'src/api',
|
||||||
options: { transpileOnly: true }
|
layouts: 'src/layouts',
|
||||||
}
|
models: 'src/models',
|
||||||
|
store: 'src/store',
|
||||||
|
applicationStyles: 'src/styles/app.scss',
|
||||||
|
actions: 'src/actions',
|
||||||
|
actionTypes: 'src/constants/actionTypes.jsx'
|
||||||
|
|
||||||
|
},
|
||||||
|
extensions: [' ', '.scss', ".ts", ".tsx", ".js", '.jsx']
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [{
|
||||||
|
test: /\.ts(x?)$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: [{
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: babelOptions
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'ts-loader',
|
||||||
|
options: { transpileOnly: true }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enforce: "pre",
|
||||||
|
test: /\.js$/,
|
||||||
|
loader: "source-map-loader"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.js(x?)$/,
|
||||||
|
exclude: /(node_modules|bower_components)/,
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: babelOptions
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [{
|
||||||
|
loader: "style-loader"
|
||||||
|
}, {
|
||||||
|
loader: "css-loader"
|
||||||
|
}, {
|
||||||
|
loader: "sass-loader",
|
||||||
|
options: {
|
||||||
|
includePaths: [
|
||||||
|
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [{
|
||||||
|
loader: "style-loader"
|
||||||
|
}, {
|
||||||
|
loader: "css-loader"
|
||||||
|
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||||
|
loader: 'url-loader'
|
||||||
|
}, {
|
||||||
|
test: /\.(jpe?g|png|webp|gif|cur)$/,
|
||||||
|
loader: 'file-loader?name=/images/[name].[ext]'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
devtool: process.env.NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map'
|
||||||
enforce: "pre",
|
};
|
||||||
test: /\.js$/,
|
|
||||||
loader: "source-map-loader"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.js(x?)$/,
|
|
||||||
exclude: /(node_modules|bower_components)/,
|
|
||||||
use: {
|
|
||||||
loader: 'babel-loader',
|
|
||||||
options: babelOptions
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.scss$/,
|
|
||||||
use: [{
|
|
||||||
loader: "style-loader"
|
|
||||||
}, {
|
|
||||||
loader: "css-loader"
|
|
||||||
}, {
|
|
||||||
loader: "sass-loader",
|
|
||||||
options: {
|
|
||||||
includePaths: [
|
|
||||||
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
use: [{
|
|
||||||
loader: "style-loader"
|
|
||||||
}, {
|
|
||||||
loader: "css-loader"
|
|
||||||
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
|
||||||
loader: 'url-loader'
|
|
||||||
}, {
|
|
||||||
test: /\.(jpe?g|png|webp|gif|cur)$/,
|
|
||||||
loader: 'file-loader?name=/images/[name].[ext]'
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
]
|
|
||||||
},
|
|
||||||
devtool: process.env.NODE_ENV === 'production' ? undefined : 'cheap-module-eval-source-map'
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user