{!forgottenPwd ? 'Sign in' : 'Forgotten password'}

this.setState({email: value})} 108 | error={submitted ? emailError : ''} 109 | validate={value => this.validateInput('email', value)} 110 | /> 111 | 112 | {!forgottenPwd && ( 113 | this.setState({password: value})} 118 | error={submitted ? passwordError : ''} 119 | validate={value => this.validateInput('password', value)} 120 | /> 121 | )} 122 | 123 | 126 | 127 | {serverError.length > 0 &&

{serverError}

} 128 | 129 |

130 | this.setState({forgottenPwd: !forgottenPwd})}>{!forgottenPwd ? 'Forgot your password?' : 'Try to sign in'} 131 |

132 | 133 | 134 | 135 | 140 |

Change name

this.setState({name: value})} 90 | error={submitted ? nameError : ''} 91 | validate={value => this.validateInput('name', value)} 92 | /> 93 | 94 | 95 | 96 | {serverError.length > 0 &&

{serverError}

} 97 | 98 | 99 | ) 100 | } 101 | } 102 | 103 | const mapStateToProps = (state) => ({ 104 | user: state.auth.user 105 | }) 106 | 107 | const mapDispatchToProps = (dispatch) => ( 108 | bindActionCreators({ 109 | changePassword, 110 | updateUser, 111 | setUser 112 | }, dispatch) 113 | ) 114 | 115 | export default connect(mapStateToProps, mapDispatchToProps)(ChangeName) 116 | 117 | -------------------------------------------------------------------------------- /src/app/components/user/ChangeName.scss: -------------------------------------------------------------------------------- 1 | @import '../common/variables'; 2 | 3 | .change-name { 4 | 5 | padding: 30px 15px; 6 | 7 | @media (min-width: $tablet) { 8 | padding: 30px; 9 | } 10 | 11 | h1 { 12 | font-family: 'Roboto Slab', serif; 13 | font-size: 1.25em; 14 | font-weight: 500; 15 | margin: 10px 0 30px; 16 | text-align: center; 17 | color: #666; 18 | } 19 | 20 | button { 21 | margin: 30px 0 0; 22 | } 23 | 24 | .server-error { 25 | margin: 20px 0 0; 26 | color: $red; 27 | font-size: .95em; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/app/components/user/ChangePwd.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import PropTypes from 'prop-types' 3 | import { connect } from 'react-redux' 4 | import { bindActionCreators } from 'redux' 5 | import { changePassword, reauthenticate } from '../../lib/auth/actions' 6 | import TextInput from '../common/TextInput' 7 | import Button from '../common/Button' 8 | import './ChangePwd.scss' 9 | 10 | class ChangePwd extends Component { 11 | 12 | static propTypes = { 13 | changePassword: PropTypes.func.isRequired, 14 | reauthenticate: PropTypes.func.isRequired, 15 | close: PropTypes.func.isRequired, 16 | user: PropTypes.object 17 | } 18 | 19 | state = { 20 | oldPwd: '', 21 | newPwd: '', 22 | oldPwdError: '', 23 | newPwdError: '', 24 | serverError: '', 25 | submitted: false, 26 | loading: false 27 | } 28 | 29 | getValidation = (type, value) => { 30 | switch(type) { 31 | case 'oldPwd': 32 | if(!value.length) return 'Password is required' 33 | if(value.length < 6) return 'Password should be at least 6 characters long' 34 | return '' 35 | case 'newPwd': 36 | if(!value.length) return 'Password is required' 37 | if(value.length < 6) return 'Password should be at least 6 characters long' 38 | return '' 39 | default: 40 | return '' 41 | } 42 | } 43 | 44 | validateInput = (key, value) => { 45 | const error = this.getValidation(key, value) 46 | this.setState({[key+'Error']: error}) 47 | return error 48 | } 49 | 50 | isFormValid = () => { 51 | const { oldPwd, newPwd } = this.state 52 | 53 | const oldPwdError = this.validateInput('oldPwd', oldPwd) 54 | const oldPwdValid = oldPwdError.length === 0 55 | 56 | const newPwdError = this.validateInput('newPwd', newPwd) 57 | const newPwdValid = newPwdError.length === 0 58 | 59 | return (oldPwdValid && newPwdValid) 60 | } 61 | 62 | handleSubmit = (e) => { 63 | e.preventDefault() 64 | const { user, changePassword, reauthenticate, close } = this.props 65 | const { oldPwd, newPwd, loading } = this.state 66 | 67 | this.setState({submitted: true}) 68 | 69 | if(!loading && this.isFormValid()) { 70 | this.setState({loading: true}) 71 | 72 | reauthenticate(user.email, oldPwd) 73 | .then(() => changePassword(newPwd)) 74 | .then(close) 75 | .catch(error => this.setState({serverError: error.code, loading: false})) 76 | } 77 | } 78 | 79 | render = () => { 80 | const { oldPwd, newPwd, oldPwdError, newPwdError, submitted, serverError, loading } = this.state 81 | 82 | return ( 83 |

84 | 85 |

Change password

86 | 87 | this.setState({oldPwd: value})} 92 | error={submitted ? oldPwdError : ''} 93 | validate={value => this.validateInput('oldPwd', value)} 94 | /> 95 | 96 | this.setState({newPwd: value})} 101 | error={submitted ? newPwdError : ''} 102 | validate={value => this.validateInput('newPwd', value)} 103 | /> 104 | 105 | 106 | 107 | {serverError.length > 0 &&

{serverError}

} 108 | 109 | 110 | ) 111 | } 112 | } 113 | 114 | const mapStateToProps = (state) => ({ 115 | user: state.auth.user 116 | }) 117 | 118 | const mapDispatchToProps = (dispatch) => ( 119 | bindActionCreators({ 120 | changePassword, 121 | reauthenticate 122 | }, dispatch) 123 | ) 124 | 125 | export default connect(mapStateToProps, mapDispatchToProps)(ChangePwd) 126 | 127 | -------------------------------------------------------------------------------- /src/app/components/user/ChangePwd.scss: -------------------------------------------------------------------------------- 1 | @import '../common/variables'; 2 | 3 | .change-pwd { 4 | 5 | padding: 30px 15px; 6 | 7 | @media (min-width: $tablet) { 8 | padding: 30px; 9 | } 10 | 11 | h1 { 12 | font-family: 'Roboto Slab', serif; 13 | font-size: 1.25em; 14 | font-weight: 500; 15 | margin: 10px 0 30px; 16 | text-align: center; 17 | color: #666; 18 | } 19 | 20 | button { 21 | margin: 30px 0 0; 22 | } 23 | 24 | .server-error { 25 | margin: 20px 0 0; 26 | color: $red; 27 | font-size: .95em; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/app/components/user/ImgUpload.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import PropTypes from 'prop-types' 3 | import { connect } from 'react-redux' 4 | import { bindActionCreators } from 'redux' 5 | import { uploadFile, updateUser, setUser } from '../../lib/auth/actions' 6 | import { auth } from '../../lib/firebase' 7 | import Button from '../common/Button' 8 | import './ImgUpload.scss' 9 | 10 | class ImgUpload extends Component { 11 | 12 | static propTypes = { 13 | uploadFile: PropTypes.func.isRequired, 14 | updateUser: PropTypes.func.isRequired, 15 | setUser: PropTypes.func.isRequired, 16 | close: PropTypes.func.isRequired, 17 | user: PropTypes.object 18 | } 19 | 20 | state = { 21 | serverError: '', 22 | loading: false 23 | } 24 | 25 | handleFileChange = () => { 26 | const filename = (this.file && this.file.files.length) ? this.file.files[0].name : '' 27 | this.setState({filename}) 28 | } 29 | 30 | uploadFile = (e) => { 31 | e.preventDefault() 32 | const { user, uploadFile, updateUser, setUser, close } = this.props 33 | const file = this.file.files[0] 34 | 35 | if(!file) return 36 | 37 | this.setState({loading: true}) 38 | 39 | const ext = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase() 40 | const time = new Date().getTime() 41 | const name = `${user.uid}.${ext}` 42 | const path = `images/${name}` 43 | 44 | uploadFile(file, name, path) 45 | .then(snapshot => snapshot.ref.getDownloadURL()) 46 | .then(downloadURL => updateUser({photoURL: downloadURL})) 47 | .then(() => setUser(auth.currentUser)) 48 | .then(close) 49 | .catch(error => this.setState({serverError: error.code, loading: false})) 50 | } 51 | 52 | render = () => { 53 | const { serverError, loading } = this.state 54 | 55 | return ( 56 | 67 | ) 68 | } 69 | } 70 | 71 | const mapStateToProps = (state) => ({ 72 | user: state.auth.user 73 | }) 74 | 75 | const mapDispatchToProps = (dispatch) => ( 76 | bindActionCreators({ 77 | uploadFile, 78 | updateUser, 79 | setUser 80 | }, dispatch) 81 | ) 82 | 83 | export default connect(mapStateToProps, mapDispatchToProps)(ImgUpload) 84 | 85 | -------------------------------------------------------------------------------- /src/app/components/user/ImgUpload.scss: -------------------------------------------------------------------------------- 1 | @import '../common/variables'; 2 | 3 | .img-upload { 4 | 5 | padding: 30px 15px; 6 | 7 | @media (min-width: $tablet) { 8 | padding: 30px; 9 | } 10 | 11 | h1 { 12 | font-family: 'Roboto Slab', serif; 13 | font-size: 1.25em; 14 | font-weight: 500; 15 | margin: 10px 0 30px; 16 | text-align: center; 17 | color: #666; 18 | } 19 | 20 | button { 21 | margin: 30px 0 0; 22 | } 23 | 24 | .server-error { 25 | margin: 20px 0 0; 26 | color: $red; 27 | font-size: .95em; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/app/components/user/SetPwd.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import PropTypes from 'prop-types' 3 | import { connect } from 'react-redux' 4 | import { bindActionCreators } from 'redux' 5 | import { setPassword, setUser } from '../../lib/auth/actions' 6 | import TextInput from '../common/TextInput' 7 | import Button from '../common/Button' 8 | import './SetPwd.scss' 9 | 10 | class SetPwd extends Component { 11 | 12 | static propTypes = { 13 | setPassword: PropTypes.func.isRequired, 14 | setUser: PropTypes.func.isRequired, 15 | close: PropTypes.func.isRequired, 16 | user: PropTypes.object 17 | } 18 | 19 | state = { 20 | pwd: '', 21 | pwdAgain: '', 22 | pwdError: '', 23 | pwdAgainError: '', 24 | serverError: '', 25 | submitted: false, 26 | loading: false 27 | } 28 | 29 | getValidation = (type, value) => { 30 | switch(type) { 31 | case 'pwd': 32 | if(!value.length) return 'Password is required' 33 | if(value.length < 6) return 'Password should be at least 6 characters long' 34 | return '' 35 | case 'pwdAgain': 36 | if(!value.length) return 'Password is required' 37 | if(value !== this.state.pwd) return 'Passwords don\'t match' 38 | return '' 39 | default: 40 | return '' 41 | } 42 | } 43 | 44 | validateInput = (key, value) => { 45 | const error = this.getValidation(key, value) 46 | this.setState({[key+'Error']: error}) 47 | return error 48 | } 49 | 50 | isFormValid = () => { 51 | const { pwd, pwdAgain } = this.state 52 | 53 | const pwdError = this.validateInput('pwd', pwd) 54 | const pwdValid = pwdError.length === 0 55 | 56 | const pwdAgainError = this.validateInput('pwdAgain', pwdAgain) 57 | const pwdAgainValid = pwdAgainError.length === 0 58 | 59 | return (pwdValid && pwdAgainValid) 60 | } 61 | 62 | handleSubmit = (e) => { 63 | e.preventDefault() 64 | const { user, setPassword, setUser, close } = this.props 65 | const { pwd, loading } = this.state 66 | 67 | this.setState({submitted: true}) 68 | 69 | if(!loading && this.isFormValid()) { 70 | this.setState({loading: true}) 71 | 72 | setPassword(user.email, pwd) 73 | .then(({user}) => setUser(user)) 74 | .then(close) 75 | .catch(error => this.setState({serverError: error.code, loading: false})) 76 | } 77 | } 78 | 79 | render = () => { 80 | const { user } = this.props 81 | const { submitted, loading, pwd, pwdError, pwdAgain, pwdAgainError, serverError } = this.state 82 | 83 | return ( 84 |

85 | 86 |

Set password

87 | 88 | {}} 92 | disabled 93 | /> 94 | 95 | this.setState({pwd: value})} 100 | error={(submitted || pwd.length) > 0 ? pwdError : ''} 101 | validate={value => this.validateInput('pwd', value)} 102 | /> 103 | 104 | this.setState({pwdAgain: value})} 109 | error={(submitted || pwdAgain.length > 0) ? pwdAgainError : ''} 110 | validate={value => this.validateInput('pwdAgain', value)} 111 | /> 112 | 113 | 114 | 115 | {serverError.length > 0 &&

{serverError}

} 116 | 117 | 118 | ) 119 | } 120 | } 121 | 122 | const mapStateToProps = (state) => ({ 123 | user: state.auth.user 124 | }) 125 | 126 | const mapDispatchToProps = (dispatch) => ( 127 | bindActionCreators({ 128 | setPassword, 129 | setUser 130 | }, dispatch) 131 | ) 132 | 133 | export default connect(mapStateToProps, mapDispatchToProps)(SetPwd) 134 | 135 | -------------------------------------------------------------------------------- /src/app/components/user/SetPwd.scss: -------------------------------------------------------------------------------- 1 | @import '../common/variables'; 2 | 3 | .set-pwd { 4 | 5 | padding: 30px 15px; 6 | 7 | @media (min-width: $tablet) { 8 | padding: 30px; 9 | } 10 | 11 | h1 { 12 | font-family: 'Roboto Slab', serif; 13 | font-size: 1.25em; 14 | font-weight: 500; 15 | margin: 10px 0 30px; 16 | text-align: center; 17 | color: #666; 18 | } 19 | 20 | button { 21 | margin: 30px 0 0; 22 | } 23 | 24 | .server-error { 25 | margin: 20px 0 0; 26 | color: $red; 27 | font-size: .95em; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/app/lib/auth/actions.js: -------------------------------------------------------------------------------- 1 | import { auth, storage, firebase } from '../firebase' 2 | 3 | export const setUser = (user) => ({ type: 'SET_USER', user }) 4 | 5 | export const createUser = (email, password) => ({ 6 | type: 'CREATE_USER', 7 | payload: auth.createUserWithEmailAndPassword(email, password) 8 | }) 9 | 10 | export const signIn = (email, password) => ({ 11 | type: 'SIGN_IN', 12 | payload: auth.signInWithEmailAndPassword(email, password) 13 | }) 14 | 15 | export const signInSocial = (provider) => ({ 16 | type: 'SIGN_IN_SOCIAL', 17 | payload: auth.signInWithPopup(provider) 18 | }) 19 | 20 | export const signOut = () => ({ 21 | type: 'SIGN_OUT', 22 | payload: auth.signOut() 23 | }) 24 | 25 | export const sendPasswordResetEmail = (email) => ({ 26 | type: 'SEND_PASSWORD_RESET_EMAIL', 27 | payload: auth.sendPasswordResetEmail(email) 28 | }) 29 | 30 | export const sendVerificationEmail = () => ({ 31 | type: 'SEND_VERIFICATION_EMAIL', 32 | payload: auth.currentUser.sendEmailVerification() 33 | }) 34 | 35 | export const setPassword = (email, password) => ({ 36 | type: 'SET_PASSWORD', 37 | payload: auth.currentUser.linkAndRetrieveDataWithCredential(firebase.auth.EmailAuthProvider.credential(email, password)) 38 | }) 39 | 40 | export const changePassword = (newPassword) => ({ 41 | type: 'CHANGE_PASSWORD', 42 | payload: auth.currentUser.updatePassword(newPassword) 43 | }) 44 | 45 | export const reauthenticate = (email, password) => ({ 46 | type: 'REAUTHENTICATE', 47 | payload: auth.currentUser.reauthenticateAndRetrieveDataWithCredential(firebase.auth.EmailAuthProvider.credential(email, password)) 48 | }) 49 | 50 | export const updateUser = (data) => ({ 51 | type: 'UPDATE_USER', 52 | payload: auth.currentUser.updateProfile(data) 53 | }) 54 | 55 | export const uploadFile = (file, name, path) => ({ 56 | type: 'UPLOAD_FILE', 57 | payload: new Promise((resolve, reject) => { 58 | const storageRef = storage.ref() 59 | 60 | const imageDir = storageRef.child(path) 61 | const task = imageDir.put(file) 62 | 63 | task.on('state_changed', snapshot => { 64 | const progress = Math.ceil((snapshot.bytesTransferred / snapshot.totalBytes) * 100) 65 | console.log(progress) 66 | }, error => reject(error), () => resolve(task.snapshot)) 67 | }) 68 | }) 69 | -------------------------------------------------------------------------------- /src/app/lib/auth/reducer.js: -------------------------------------------------------------------------------- 1 | import { HYDRATE } from 'next-redux-wrapper' 2 | 3 | export const initialState = { 4 | user: null 5 | } 6 | 7 | const reducer = (state = initialState, action) => { 8 | switch (action.type) { 9 | case HYDRATE: 10 | return {...state, ...action.payload.auth} 11 | 12 | case 'SET_USER': 13 | return {...state, user: action.user ? {...action.user} : null} 14 | 15 | default: 16 | return state 17 | } 18 | } 19 | 20 | export default reducer 21 | -------------------------------------------------------------------------------- /src/app/lib/firebase.js: -------------------------------------------------------------------------------- 1 | import Firebase from 'firebase/app' 2 | import 'firebase/auth' 3 | import 'firebase/firestore' 4 | import 'firebase/storage' 5 | 6 | const config = { 7 | apiKey: process.env.FIREBASE_API_KEY, 8 | authDomain: process.env.FIREBASE_AUTH_DOMAIN, 9 | databaseURL: process.env.FIREBASE_DATABASE_URL, 10 | projectId: process.env.FIREBASE_PROJECT_ID, 11 | storageBucket: process.env.FIREBASE_STORAGE_BUCKET, 12 | messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID, 13 | appId: process.env.FIREBASE_APP_ID 14 | } 15 | 16 | if(!Firebase.apps.length) Firebase.initializeApp(config) 17 | 18 | const db = Firebase.firestore() 19 | const auth = Firebase.auth() 20 | const storage = Firebase.storage() 21 | const firebase = Firebase 22 | 23 | export { 24 | db, 25 | auth, 26 | storage, 27 | firebase 28 | } 29 | -------------------------------------------------------------------------------- /src/app/lib/logger.js: -------------------------------------------------------------------------------- 1 | export default store => next => action => { 2 | console.info(action.type, action) 3 | return next(action) 4 | } 5 | -------------------------------------------------------------------------------- /src/app/lib/promiseMiddleware.js: -------------------------------------------------------------------------------- 1 | export const getData = (res) => { 2 | if(!res) return null 3 | 4 | if(res.forEach) { 5 | let data = [] 6 | res.forEach(item => { 7 | data.push({...item.data(), id: item.id}) 8 | }) 9 | return data 10 | } 11 | 12 | if(res.data) { 13 | return {...res.data(), id: res.id} 14 | } 15 | 16 | return res 17 | } 18 | 19 | const isPromise = (v) => v && typeof v.then === 'function' 20 | 21 | const promiseMiddleware = store => next => action => { 22 | if(isPromise(action.payload)) { 23 | 24 | next({type: `${action.type}_REQUEST`}) 25 | 26 | return action.payload.then( 27 | res => { 28 | const data = getData(res) 29 | 30 | next({ 31 | type: `${action.type}_SUCCESS`, 32 | payload: data 33 | }) 34 | 35 | return Promise.resolve(data) 36 | }, 37 | error => { 38 | next({ 39 | type: `${action.type}_FAILURE`, 40 | payload: error 41 | }) 42 | 43 | return Promise.reject(error) 44 | } 45 | ) 46 | 47 | } 48 | 49 | next(action) 50 | } 51 | 52 | export default promiseMiddleware 53 | -------------------------------------------------------------------------------- /src/app/lib/reducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux' 2 | import auth, { initialState as initialStateAuth } from './auth/reducer' 3 | import todo, { initialState as initialStateTodo } from './todo/reducer' 4 | 5 | export const initialState = { 6 | auth: initialStateAuth, 7 | todo: initialStateTodo 8 | } 9 | 10 | export default combineReducers({ 11 | auth, 12 | todo 13 | }) 14 | -------------------------------------------------------------------------------- /src/app/lib/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux' 2 | import { MakeStore, createWrapper, Context, HYDRATE } from 'next-redux-wrapper' 3 | import { composeWithDevTools } from 'redux-devtools-extension' 4 | import thunkMiddleware from 'redux-thunk' 5 | import promiseMiddleware from './promiseMiddleware' 6 | import logger from './logger' 7 | import reducer, { initialState } from './reducer' 8 | 9 | // create a makeStore function 10 | const makeStore = (context) => { 11 | const store = createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware, promiseMiddleware, logger))) 12 | 13 | return store 14 | } 15 | 16 | // export an assembled wrapper 17 | export const wrapper = createWrapper(makeStore, {debug: true}) 18 | -------------------------------------------------------------------------------- /src/app/lib/todo/actions.js: -------------------------------------------------------------------------------- 1 | import { db } from '../firebase' 2 | 3 | export const todoDeleted = (todoId) => ({ type: 'TODO_DELETED', todoId }) 4 | 5 | export const getTodos = () => ({ 6 | type: 'GET_TODOS', 7 | payload: db.collection('todos').orderBy('createdAt', 'desc').get() 8 | }) 9 | 10 | export const getTodo = (todoId) => ({ 11 | type: 'GET_TODO', 12 | payload: db.collection('todos').doc(todoId).get() 13 | }) 14 | 15 | export const createTodo = (todo) => ({ 16 | type: 'CREATE_TODO', 17 | payload: db.collection('todos').add(todo) 18 | }) 19 | 20 | export const updateTodo = (todoId, todo) => ({ 21 | type: 'UPDATE_TODO', 22 | payload: db.collection('todos').doc(todoId).update(todo) 23 | }) 24 | 25 | export const deleteTodo = (todoId) => ({ 26 | type: 'DELETE_TODO', 27 | payload: db.collection('todos').doc(todoId).delete() 28 | }) 29 | -------------------------------------------------------------------------------- /src/app/lib/todo/reducer.js: -------------------------------------------------------------------------------- 1 | import { HYDRATE } from 'next-redux-wrapper' 2 | 3 | export const initialState = { 4 | todos: [] 5 | } 6 | 7 | const reducer = (state = initialState, action) => { 8 | switch (action.type) { 9 | case HYDRATE: 10 | return {...state, ...action.payload.todo} 11 | 12 | case 'GET_TODOS_SUCCESS': 13 | return {...state, todos: action.payload} 14 | 15 | case 'GET_TODO_SUCCESS': { 16 | const todo = state.todos.find(todo => todo.id === action.payload.id) 17 | 18 | if(todo) { 19 | return {...state, todos: state.todos.map(todo => { 20 | if(todo.id === action.payload.id) return action.payload 21 | return todo 22 | })} 23 | } 24 | 25 | return {...state, todos: [action.payload, ...state.todos]} 26 | } 27 | 28 | case 'TODO_DELETED': 29 | return {...state, todos: state.todos.filter(todo => todo.id !== action.todoId)} 30 | 31 | default: 32 | return state 33 | } 34 | } 35 | 36 | export default reducer 37 | -------------------------------------------------------------------------------- /src/app/lib/withAuthentication.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { connect } from 'react-redux' 3 | import { bindActionCreators } from 'redux' 4 | import { auth } from './firebase' 5 | import { setUser } from './auth/actions' 6 | import SignIn from '../components/auth/SignIn' 7 | import VerifyEmail from '../components/auth/VerifyEmail' 8 | import Header from '../components/Header' 9 | 10 | const withAuthentication = (needsAuthentication) => (Component) => { 11 | 12 | class WithAuthentication extends React.Component { 13 | componentDidMount() { 14 | const { setUser } = this.props 15 | 16 | auth.onAuthStateChanged(user => { 17 | user 18 | ? setUser(user) 19 | : setUser(null) 20 | }) 21 | } 22 | 23 | renderAuth = (children) => ( 24 |

25 |

26 | {children} 27 |

28 | ) 29 | 30 | render() { 31 | const { user } = this.props 32 | 33 | if(!user && needsAuthentication) return this.renderAuth() 34 | 35 | const hasPassword = user && user.providerData.find(provider => provider.providerId === 'password') 36 | 37 | if(user && hasPassword && !user.emailVerified) return this.renderAuth() 38 | 39 | return 40 | } 41 | } 42 | 43 | WithAuthentication.getInitialProps = Component.getInitialProps 44 | 45 | const mapStateToProps = (state) => ({ 46 | user: state.auth.user 47 | }) 48 | 49 | const mapDispatchToProps = (dispatch) => ( 50 | bindActionCreators({ 51 | setUser 52 | }, dispatch) 53 | ) 54 | 55 | return connect(mapStateToProps, mapDispatchToProps)(WithAuthentication) 56 | 57 | } 58 | 59 | export default withAuthentication 60 | -------------------------------------------------------------------------------- /src/app/next.config.js: -------------------------------------------------------------------------------- 1 | const { parsed: localEnv } = require('dotenv').config() 2 | const webpack = require('webpack') 3 | const withSass = require('@zeit/next-sass') 4 | const withImages = require('next-images') 5 | 6 | module.exports = withImages(withSass({ 7 | webpack: (config, options) => { 8 | config.plugins.push(new webpack.EnvironmentPlugin(localEnv)) 9 | 10 | return config 11 | }, 12 | distDir: '../../dist/functions/next' 13 | })) 14 | -------------------------------------------------------------------------------- /src/app/pages/_app.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import App, { AppInitialProps, AppContext } from 'next/app' 3 | import { wrapper } from '../lib/store' 4 | 5 | class MyApp extends App { 6 | 7 | static getInitialProps = async ({ Component, ctx }) => { 8 | 9 | // ctx.store.dispatch({type: 'TOE', payload: 'was set in _app'}) 10 | 11 | return { 12 | pageProps: { 13 | // Call page-level getInitialProps 14 | ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}), 15 | // Some custom thing for all pages 16 | pathname: ctx.pathname 17 | } 18 | } 19 | 20 | } 21 | 22 | render() { 23 | const { Component, pageProps } = this.props 24 | 25 | return ( 26 | 27 | ) 28 | } 29 | 30 | } 31 | 32 | export default wrapper.withRedux(MyApp) 33 | -------------------------------------------------------------------------------- /src/app/pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | class MyDocument extends Document { 4 | static async getInitialProps(ctx) { 5 | const initialProps = await Document.getInitialProps(ctx) 6 | 7 | return { ...initialProps } 8 | } 9 | 10 | render() { 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 |

18 | 19 | 20 | 21 | ) 22 | } 23 | } 24 | 25 | export default MyDocument 26 | -------------------------------------------------------------------------------- /src/app/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import Head from 'next/head' 4 | import compose from 'recompose/compose' 5 | import { connect } from 'react-redux' 6 | import { bindActionCreators } from 'redux' 7 | import { getTodos } from '../lib/todo/actions' 8 | import withAuthentication from '../lib/withAuthentication' 9 | import PageWrapper from '../components/PageWrapper' 10 | import Header from '../components/Header' 11 | import AddTodo from '../components/todo/AddTodo' 12 | import TodoList from '../components/todo/TodoList' 13 | import Footer from '../components/Footer' 14 | import './index.scss' 15 | 16 | class Home extends React.Component { 17 | 18 | static propTypes = { 19 | getTodos: PropTypes.func.isRequired, 20 | user: PropTypes.object 21 | } 22 | 23 | static getInitialProps = async ({ store }) => { 24 | await store.dispatch(getTodos()) 25 | return {} 26 | } 27 | 28 | render = () => { 29 | return ( 30 | 31 |

32 | 33 | 34 | 35 | 36 | Todo list | Nextbase 37 | 38 | 39 |

40 | 41 | 42 | 43 | 44 | 45 |

48 | 49 | ) 50 | } 51 | } 52 | 53 | const mapStateToProps = (state) => ({ 54 | user: state.auth.user 55 | }) 56 | 57 | const mapDispatchToProps = (dispatch) => ( 58 | bindActionCreators({ 59 | getTodos 60 | }, dispatch) 61 | ) 62 | 63 | export default compose(withAuthentication(false), connect(mapStateToProps, mapDispatchToProps))(Home) 64 | -------------------------------------------------------------------------------- /src/app/pages/index.scss: -------------------------------------------------------------------------------- 1 | @import '../components/common/global'; 2 | @import '../components/common/variables'; 3 | 4 | .index { 5 | min-height: 100vh; 6 | padding-bottom: 100px; 7 | position: relative; 8 | } 9 | 10 | -------------------------------------------------------------------------------- /src/app/pages/user.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Head from 'next/head' 3 | import compose from 'recompose/compose' 4 | import { connect } from 'react-redux' 5 | import { bindActionCreators } from 'redux' 6 | import withAuthentication from '../lib/withAuthentication' 7 | import PageWrapper from '../components/PageWrapper' 8 | import Modal from '../components/common/Modal' 9 | import SetPwd from '../components/user/SetPwd' 10 | import ChangePwd from '../components/user/ChangePwd' 11 | import ChangeName from '../components/user/ChangeName' 12 | import ImgUpload from '../components/user/ImgUpload' 13 | import Header from '../components/Header' 14 | import Button from '../components/common/Button' 15 | import './user.scss' 16 | 17 | class User extends React.Component { 18 | 19 | state = { 20 | setPwdVisible: false, 21 | changePwdVisible: false, 22 | changeNameVisible: false, 23 | imgUploadVisible: false 24 | } 25 | 26 | render = () => { 27 | const { user } = this.props 28 | const { setPwdVisible, changePwdVisible, changeNameVisible, imgUploadVisible } = this.state 29 | 30 | const hasPassword = !!user.providerData.find(provider => provider.providerId === 'password') 31 | 32 | return ( 33 | 34 |

35 | 36 | 37 | My account | Nextbase 38 | 39 | 40 |

41 | 42 |

43 |

44 |

{user.email}

45 |

{user.displayName}

46 | 47 | 48 | 49 | {hasPassword ? 50 | : 51 | 52 | } 53 |

54 | 55 | this.setState({imgUploadVisible: false})}> 56 | this.setState({imgUploadVisible: false})} /> 57 | 58 | 59 | this.setState({changeNameVisible: false})}> 60 | this.setState({changeNameVisible: false})} /> 61 | 62 | 63 | this.setState({setPwdVisible: false})}> 64 | this.setState({setPwdVisible: false})} /> 65 | 66 | 67 | this.setState({changePwdVisible: false})}> 68 | this.setState({changePwdVisible: false})} /> 69 | 70 |

71 | 72 | ) 73 | } 74 | } 75 | 76 | const mapStateToProps = (state) => ({ 77 | user: state.auth.user 78 | }) 79 | 80 | const mapDispatchToProps = (dispatch) => ( 81 | bindActionCreators({}, dispatch) 82 | ) 83 | 84 | export default compose(withAuthentication(true), connect(mapStateToProps, mapDispatchToProps))(User) 85 | -------------------------------------------------------------------------------- /src/app/pages/user.scss: -------------------------------------------------------------------------------- 1 | @import '../components/common/global'; 2 | @import '../components/common/variables'; 3 | 4 | .user { 5 | 6 | min-height: 100vh; 7 | 8 | .inner { 9 | 10 | padding: 15px; 11 | max-width: 420px; 12 | min-height: 70vh; 13 | margin: 0 auto; 14 | text-align: center; 15 | 16 | @media (min-width: $tablet) { 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | 23 | .photo { 24 | 25 | width: 100px; 26 | height: 100px; 27 | margin: 0 auto 30px; 28 | border-radius: 50%; 29 | background-size: cover; 30 | overflow: hidden; 31 | 32 | @media (min-width: $tablet) { 33 | width: 150px; 34 | height: 150px; 35 | } 36 | 37 | } 38 | 39 | .email { 40 | margin-bottom: 15px; 41 | font-weight: 600; 42 | font-size: 1.1em; 43 | color: #444; 44 | } 45 | 46 | .name { 47 | margin-bottom: 50px; 48 | color: #444; 49 | } 50 | 51 | button { 52 | margin-bottom: 15px; 53 | } 54 | 55 | } 56 | 57 | } 58 | -------------------------------------------------------------------------------- /src/app/postcss.config.js: -------------------------------------------------------------------------------- 1 | const autoprefixer = require('autoprefixer') 2 | 3 | module.exports = { 4 | plugins: [autoprefixer()] 5 | } 6 | -------------------------------------------------------------------------------- /src/app/public/static/img/firebase.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 9 | -------------------------------------------------------------------------------- /src/app/public/static/img/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/public/static/img/mj_white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/public/static/img/nextjs.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/public/static/img/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 36 | -------------------------------------------------------------------------------- /src/app/public/static/img/redux.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/functions/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "targets": { 7 | "node": "8.14" 8 | } 9 | } 10 | ] 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /src/functions/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const functions = require('firebase-functions') 3 | const nodemailer = require('nodemailer') 4 | const next = require('next') 5 | const admin = require('firebase-admin') 6 | admin.initializeApp() 7 | 8 | const dev = process.env.NODE_ENV !== 'production' 9 | const app = next({ 10 | dev, 11 | conf: { distDir: `${path.relative(process.cwd(), __dirname)}/next` } 12 | }) 13 | const handle = app.getRequestHandler() 14 | 15 | exports.next = functions.https.onRequest((req, res) => { 16 | console.log('File: ' + req.originalUrl) // log the page.js file that is being requested 17 | return app.prepare().then(() => handle(req, res)) 18 | }) 19 | 20 | 21 | /* 22 | const gmailEmail = functions.config().gmail.email 23 | const gmailPassword = functions.config().gmail.password 24 | const mailTransport = nodemailer.createTransport({ 25 | service: 'gmail', 26 | auth: { 27 | user: gmailEmail, 28 | pass: gmailPassword 29 | } 30 | }) 31 | 32 | exports.sendWelcomeEmail = functions.auth.user().onCreate(async (user) => { 33 | if(!user.email) return null 34 | 35 | const mailOptions = { 36 | from: '"Nextbase" ', 37 | to: user.email 38 | } 39 | 40 | mailOptions.subject = 'Welcome to Nextbase' 41 | mailOptions.text = 'Thanks for joining Nextbase. This is demonstrational email. You will receive no spam from us :)' 42 | 43 | try { 44 | await mailTransport.sendMail(mailOptions) 45 | } catch(error) { 46 | console.error('There was an error while sending the email:', error) 47 | } 48 | 49 | return null 50 | }) 51 | 52 | //add uploaded img to db 53 | exports.addUploadedImgToDB = functions.storage.object().onFinalize((object) => { 54 | const imgData = { 55 | bucket: object.bucket, 56 | path: object.name 57 | } 58 | 59 | return admin.firestore().collection('images').add(imgData) 60 | }) 61 | */ 62 | -------------------------------------------------------------------------------- /src/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/martyan/nextbase/2e0e915f5ef980752393c48235e65cd3e2218f9a/src/public/favicon.ico --------------------------------------------------------------------------------

Create new account

{!forgottenPwd ? 'Sign in' : 'Forgotten password'}

Verify your email address

Change name

Change password

Change profile picture

Set password