25 |
27 |
29 |
30 |
19 | {imageElement}
20 | {title &&
25 | );
26 | };
27 |
28 | Card.propTypes = {
29 | children: PropTypes.node,
30 | image: PropTypes.shape({
31 | src: PropTypes.string,
32 | title: PropTypes.string,
33 | alt: PropTypes.string,
34 | linkTo: PropTypes.string,
35 | }),
36 | title: PropTypes.string,
37 | };
38 |
39 | export default Card;
40 |
--------------------------------------------------------------------------------
/app/src/util/cookie-utils.js:
--------------------------------------------------------------------------------
1 | import Cookies from 'universal-cookie';
2 | import { getEnvironment } from './environment-utils';
3 |
4 | const cookies = new Cookies();
5 |
6 | /**
7 | * setCookie - Sets a cookie in the user's browser
8 | * @param {String} name Name/key of cookie to save
9 | * @param {String} value Value to save in cookie
10 | * @param {Object} options Options to override defaults
11 | */
12 | export const setCookie = (name, value, options = {}) =>
13 | cookies.set(name, value, Object.assign({
14 | path: '/',
15 | maxAge: 604800,
16 | secure: getEnvironment() === 'production',
17 | }, options));
18 |
19 |
20 | /**
21 | * getCookie - Retrieves a cookie. Not super necessary, but it
22 | * keeps things uniform
23 | * @param {String} name Name of cookie to get
24 | *
25 | * @returns {String}
26 | */
27 | export const getCookie = name => cookies.get(name);
28 |
29 | /**
30 | * deleteCookie - Removes a cookie. Not super necessary, but it
31 | * keeps things uniform
32 | * @param {String} name Name of cookie to get
33 | */
34 | export const deleteCookie = name => cookies.remove(name);
35 |
--------------------------------------------------------------------------------
/api/config/auth.js:
--------------------------------------------------------------------------------
1 | const passport = require('koa-passport');
2 | const LocalStrategy = require('passport-local');
3 | const JwtStrategy = require('passport-jwt');
4 | const User = require('../models/user');
5 |
6 | const SECRET = 'TEST_SECRET';
7 | const localOpts = { usernameField: 'email', session: false };
8 | const jwtOpts = { jwtFromRequest: JwtStrategy.ExtractJwt.fromAuthHeaderWithScheme("jwt"), secretOrKey: SECRET };
9 |
10 | module.exports = {
11 | passport: () => {
12 | const localLogin = new LocalStrategy(localOpts, async (email = '', password = '', done) => {
13 | try {
14 | const user = await User.findOne({ email: email.toLowerCase() });
15 | const isValid = await user.comparePassword(password);
16 |
17 | return done(null, isValid ? user : {});
18 | } catch (err) {
19 | return done(err);
20 | }
21 | });
22 |
23 | const jwtLogin = new JwtStrategy.Strategy(jwtOpts, (payload, done) => done(null, payload));
24 |
25 | passport.use(jwtLogin);
26 | passport.use(localLogin);
27 | return passport;
28 | },
29 | opts: {
30 | secret: SECRET,
31 | expiration: 604800,
32 | },
33 | };
34 |
--------------------------------------------------------------------------------
/app/src/assets/stylesheets/partials/_buttons.scss:
--------------------------------------------------------------------------------
1 | .button {
2 | border: 1px solid transparent;
3 | border-radius: $border-radius;
4 | text-align: center;
5 | white-space: nowrap;
6 | padding: calc(0.375em - 1px) .75em;
7 | background: none;
8 | height: 2.25em;
9 | line-height: 1.5;
10 |
11 | &:not([disabled]) {
12 | cursor: pointer;
13 | }
14 |
15 | &.is- {
16 | &primary {
17 | background: $primary-color;
18 | color: #FFF;
19 |
20 | &:hover {
21 | background: darken($primary-color, 5%);
22 | }
23 | }
24 |
25 | &danger {
26 | background: $error-color;
27 | color: #FFF;
28 |
29 | &:hover {
30 | background: darken($error-color, 5%);
31 | }
32 | }
33 |
34 | &primary-outline {
35 | border-color: $primary-color;
36 |
37 | &:hover {
38 | border-color: darken($primary-color, 5%);
39 | }
40 | }
41 |
42 | &text {
43 | padding: 0;
44 | text-transform: none;
45 |
46 | &.is-danger {
47 | color: $error-color;
48 |
49 | &:hover {
50 | color: darken($error-color, 5%);
51 | }
52 | }
53 | }
54 | }
55 | }
--------------------------------------------------------------------------------
/app/src/components/general/modal.scss:
--------------------------------------------------------------------------------
1 | .modal {
2 | display: none;
3 | position: fixed;
4 | z-index: 99;
5 | left: 0;
6 | top: 0;
7 | width: 100%;
8 | height: 100%;
9 | overflow: auto;
10 | background-color: rgb(0,0,0);
11 | background-color: rgba(0,0,0,0.4);
12 | text-align: center;
13 |
14 | &.can-scroll {
15 | .modal-content {
16 | overflow-y: scroll;
17 | }
18 | }
19 |
20 | &-container {
21 | position: relative;
22 | width: 100%;
23 | height: 100%;
24 | }
25 |
26 | &-content {
27 | box-sizing: border-box;
28 | background-color: #fefefe;
29 | padding: 20px;
30 | border: 1px solid #888;
31 | min-width: 450px;
32 | position: absolute;
33 | top: 50%;
34 | left: 50%;
35 | transform: translate(-50%, -50%);
36 | max-height: 100vh;
37 | max-width: 100%;
38 |
39 | .close {
40 | float: right;
41 | transition: color 0.2s ease-in-out;
42 |
43 | &:hover {
44 | color: 'red';
45 | cursor: pointer;
46 | }
47 | }
48 |
49 | .button-row {
50 | max-width: 100%;
51 | margin-top: 20px;
52 | }
53 | }
54 |
55 | &.is-open {
56 | display: block;
57 | }
58 | }
--------------------------------------------------------------------------------
/app/src/components/notification/alert.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { errorPropTypes } from '../../util/proptype-utils';
4 |
5 | /**
6 | * Alert - Standard alert card component
7 | * @param {Array} errors Array containing errors
8 | * @param {String} message Message to display
9 | * @param {String} icon Icon to show with alert
10 | * @returns {Function}
11 | */
12 | const Alert = ({ errors = [], message = '', icon }) => {
13 | const alertType = errors && errors.length ? 'errors' : 'message';
14 | const shouldShow = Boolean((errors && errors.length) || message);
15 |
16 | return (
17 | {title}
}
21 |
22 | {children}
23 |
24 |
18 |
25 | );
26 | };
27 |
28 | Alert.propTypes = {
29 | errors: errorPropTypes,
30 | icon: PropTypes.string,
31 | message: PropTypes.string,
32 | };
33 |
34 | export default Alert;
35 |
--------------------------------------------------------------------------------
/app/src/components/form-fields/generic-form.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Field } from 'redux-form';
4 | import Alert from '../notification/alert';
5 | import { errorPropTypes } from '../../util/proptype-utils';
6 |
7 | const GenericForm = ({ formSpec = [], errors = [], message = '', onSubmit, submitText }) => (
8 |
16 | );
17 |
18 | GenericForm.propTypes = {
19 | onSubmit: PropTypes.func,
20 | formSpec: PropTypes.arrayOf(PropTypes.shape({
21 | placeholder: PropTypes.string,
22 | type: PropTypes.string,
23 | id: PropTypes.string,
24 | name: PropTypes.string,
25 | label: PropTypes.string,
26 | component: PropTypes.func,
27 | })),
28 | message: PropTypes.string,
29 | errors: errorPropTypes,
30 | submitText: PropTypes.string,
31 | };
32 |
33 | export default GenericForm;
34 |
--------------------------------------------------------------------------------
/api/constants.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | ROLES: {
3 | ADMIN: 'admin',
4 | USER: 'user',
5 | },
6 | ERRORS: {
7 | ALREADY_REGISTERED: 'A user has already registered with that email address.',
8 | BAD_LOGIN: 'Your login details could not be verified. Please try again.',
9 | INVALID_EMAIL: 'You must enter a valid email address.',
10 | INVALID_ENTRY: 'You have not filled out all the required fields.',
11 | INVALID_NAME: 'You must enter a full name.',
12 | INVALID_PASSWORD: 'You must enter a password.',
13 | JWT_EXPIRED: 'For your safety, your session has expired. Please log back in and try your request again.',
14 | JWT_FAILURE: 'You are not authorized to access this content. If you feel this is in error, please contact an administrator.',
15 | NO_PERMISSION: 'You do not have permission to access this content.',
16 | PASSWORD_CONFIRM_FAIL: 'Your passwords did not match. Please attempt your request again.',
17 | PASSWORD_MUST_MATCH: 'Your passwords must match.',
18 | PASSWORD_RESET_EXPIRED: 'Your password reset request may have expired. Please attempt to reset your password again.',
19 | PASSWORD_TOO_SHORT: 'Your password must be at least eight characters long.',
20 | USER_NOT_FOUND: 'No user was found.',
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/app/src/util/environment-utils.js:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * getEnvironment - Returns the current environment, or development by default
4 | * @returns {String}
5 | */
6 | export const getEnvironment = () => process.env.NODE_ENV
7 | ? process.env.NODE_ENV
8 | : 'development';
9 |
10 |
11 | /**
12 | * getApiUrl - Returns the URL for the api, given the current environment
13 | * @returns {String}
14 | */
15 | export const getApiUrl = () => {
16 | switch (getEnvironment()) {
17 | case 'production':
18 | return 'http://api.mkrn-domain.com';
19 | case 'stage':
20 | return 'http://api-stage.mkrn-stage-domain.com';
21 | case 'test':
22 | return 'http://api-test.mkrn-test-domain.com';
23 | case 'development':
24 | default:
25 | return 'http://localhost:3000';
26 | }
27 | };
28 |
29 |
30 | /**
31 | * getAppUrl - Returns the URL for the app, given the environment
32 | * @returns {String}
33 | */
34 | export const getAppUrl = () => {
35 | switch (getEnvironment()) {
36 | case 'production':
37 | return 'http://app.mkrn-domain.com';
38 | case 'stage':
39 | return 'http://app-stage.mkrn-stage-domain.com';
40 | case 'test':
41 | return 'http://app-test.mkrn-test-domain.com';
42 | case 'development':
43 | default:
44 | return 'http://localhost:8080';
45 | }
46 | };
47 |
--------------------------------------------------------------------------------
/app/src/components/general/modal.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import './modal.scss';
4 |
5 | class Modal extends Component {
6 | static propTypes = {
7 | handleClose: PropTypes.func,
8 | heading: PropTypes.string,
9 | isOpen: PropTypes.bool,
10 | canScroll: PropTypes.bool,
11 | children: PropTypes.node,
12 | };
13 |
14 | componentDidMount = () => window.addEventListener('keyup', this.escapeClose);
15 | componentWillUnmount = () => window.removeEventListener('keyup', this.escapeClose);
16 |
17 | escapeClose = (e) => {
18 | if (e.which === 27 && this.props.isOpen) {
19 | this.props.handleClose(e);
20 | }
21 | }
22 |
23 | render() {
24 | const { handleClose, heading, isOpen, canScroll = false, children } = this.props;
25 | return (
26 | {icon}
19 | {(errors && errors.length) &&
20 | errors.map((error, index) => {error.error} )
21 | }
22 | {message && {message}}
23 |
24 |
27 |
37 | );
38 | }
39 | }
40 |
41 | export default Modal;
42 |
--------------------------------------------------------------------------------
/app/src/assets/stylesheets/partials/_header.scss:
--------------------------------------------------------------------------------
1 | header {
2 | background: #e6e6e6;
3 | height: $header-height;
4 | width: 100%;
5 | padding: 0 $wrapper-horiz-pad;
6 |
7 | .mobile-nav-toggle {
8 | text-decoration: none;
9 | line-height: $header-height;
10 | color: #000;
11 | }
12 |
13 | .logo {
14 | line-height: $header-height;
15 | }
16 |
17 | // Navigation
18 | nav {
19 | // Mobile navigation
20 | &.mobile {
21 | display: none;
22 |
23 | &.is-expanded {
24 | display: block;
25 |
26 | ul {
27 | position: absolute;
28 | width: 100%;
29 | right: 0;
30 | top: $header-height;
31 | padding: 10px;
32 | background-color: #efefef;
33 |
34 | li {
35 | display: block;
36 | padding: 10px 0;
37 | line-height: 1rem;
38 | border-top: 1px solid #CCC;
39 |
40 | &:first-of-type {
41 | border-top: none;
42 | }
43 | }
44 | }
45 | }
46 | }
47 |
48 | // Non-mobile and shared navigation
49 | ul {
50 | margin: 0;
51 |
52 | li {
53 | display: inline-block;
54 | padding: 0 10px;
55 | line-height: $header-height;
56 |
57 | &:last-of-type {
58 | padding-right: 0;
59 | }
60 | }
61 | }
62 | }
63 | }
--------------------------------------------------------------------------------
/api/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mkrn-api",
3 | "version": "1.0.0",
4 | "description": "Koa-based API for MKRN starter.",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "nodemon index.js",
8 | "test": "jest --coverage --watch"
9 | },
10 | "repository": "https://github.com/joshuaslate/mkrn-starter.git",
11 | "author": "Joshua Anderson Slate",
12 | "license": "MIT",
13 | "dependencies": {
14 | "bcrypt": "^5.0.1",
15 | "crypto-promise": "^2.1.0",
16 | "jsonwebtoken": "^8.5.1",
17 | "kcors": "^2.2.2",
18 | "koa": "^2.13.1",
19 | "koa-bodyparser": "^4.3.0",
20 | "koa-combine-routers": "^2.0.1",
21 | "koa-logger": "^3.2.1",
22 | "koa-passport": "^4.1.4",
23 | "koa-router": "^10.0.0",
24 | "lodash": "^4.17.21",
25 | "mailgun-js": "^0.22.0",
26 | "moment": "^2.29.1",
27 | "mongoose": "^5.13.3",
28 | "passport-jwt": "^4.0.0",
29 | "passport-local": "^1.0.0",
30 | "stripe": "^8.165.0",
31 | "validator": "^13.6.0"
32 | },
33 | "devDependencies": {
34 | "@babel/eslint-parser": "^7.14.7",
35 | "eslint": "^7.31.0",
36 | "eslint-config-airbnb": "^18.2.1",
37 | "eslint-config-airbnb-base": "^14.2.1",
38 | "eslint-plugin-import": "^2.23.4",
39 | "eslint-plugin-jest": "^24.4.0",
40 | "eslint-plugin-jsx-a11y": "6.4.1",
41 | "eslint-plugin-react": "^7.24.0",
42 | "eslint-plugin-react-hooks": "^4.2.0",
43 | "jest": "^27.0.6",
44 | "nodemon": "^2.0.12",
45 | "supertest": "^6.1.4",
46 | "typescript": "^4.3.5"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/api/utils/user-utils.js:
--------------------------------------------------------------------------------
1 | const jwt = require('jsonwebtoken');
2 | const _ = require('lodash');
3 | const authConfig = require('../config').auth;
4 | const ROLES = require('../constants').ROLES;
5 |
6 | /**
7 | * standardizeUser - Standardizes user and strips unnecessary data
8 | * @param {Object} user Full user object
9 | * @returns {Object} Stripped down user information
10 | */
11 | const standardizeUser = user => ({
12 | id: _.get(user, '_id') || '',
13 | firstName: _.get(user, 'name.first') || '',
14 | lastName: _.get(user, 'name.last') || '',
15 | email: _.get(user, 'email') || '',
16 | role: _.get(user, 'role') || '',
17 | });
18 |
19 | /**
20 | * generateJWT - Signs JWT with user data
21 | * @param {Object} user Object containing user data to sign JWT with
22 | * @returns {Object} JSON Web Token for authenticated API requests
23 | */
24 | const generateJWT = user => ({
25 | token: jwt.sign(standardizeUser(user), authConfig.secret, {
26 | expiresIn: authConfig.jwtExpiration,
27 | }),
28 | expiration: authConfig.jwtExpiration,
29 | });
30 |
31 | /**
32 | * getRole - Returns a numerical value, which corresponds to the user's role
33 | * @param {String} role User's role in string form from the database
34 | * @returns {Number} User's role in number form for comparison
35 | */
36 | const getRole = (role) => {
37 | switch (role) {
38 | case ROLES.ADMIN: return 2;
39 | case ROLES.USER: return 1;
40 | default: return 0;
41 | }
42 | };
43 |
44 | module.exports = {
45 | generateJWT,
46 | getRole,
47 | standardizeUser,
48 | };
49 |
--------------------------------------------------------------------------------
/app/src/util/i18n.js:
--------------------------------------------------------------------------------
1 | import { translate, getTranslations } from 'react-i18nify';
2 |
3 | export const getClientLanguage = () => {
4 | const translations = getTranslations(),
5 | translatedlanguages = Object.keys(translations);
6 | let translatedRegex,
7 | clientLanguage;
8 |
9 | switch (translatedlanguages.length) {
10 | case 0:
11 | return undefined;
12 |
13 | case 1:
14 | translatedRegex = new RegExp(`^${translatedlanguages[0]}`);
15 | break;
16 |
17 | default:
18 | translatedRegex = translatedlanguages.reduce((accumulator, currentValue, index) =>
19 | index === 1 ? `(${accumulator})|(${currentValue})` : `${accumulator}|(${currentValue})`
20 | );
21 | translatedRegex = new RegExp(`^${translatedRegex}`);
22 | }
23 |
24 | if (navigator.languages) {
25 | clientLanguage = navigator.languages.find(
26 | language => translatedRegex.test(language));
27 |
28 | if (clientLanguage) {
29 | return translations[clientLanguage] ? clientLanguage : clientLanguage.substring(0, 2);
30 | }
31 | }
32 |
33 | clientLanguage = navigator.language || navigator.userLanguage;
34 |
35 | if (clientLanguage && translatedlanguages.find( language => clientLanguage.search(language) >= 0 || language.search(clientLanguage) >= 0)) {
36 | return translations[clientLanguage] ? clientLanguage : clientLanguage.substring(0, 2);
37 | }
38 |
39 | return undefined;
40 | }
41 |
42 | export const getComponentTranslator = (name) => {
43 | return (key, parameters) => {
44 | return translate(name + '.' + key, parameters);
45 | }
46 | };
47 |
--------------------------------------------------------------------------------
/app/webpack.config.js:
--------------------------------------------------------------------------------
1 | const polyfill = require('babel-polyfill');
2 | const path = require('path');
3 | const HotModuleReplacementPlugin = require('webpack').HotModuleReplacementPlugin;
4 |
5 | module.exports = () => ({
6 | entry: [
7 | 'babel-polyfill',
8 | 'react-hot-loader/patch',
9 | 'webpack-dev-server/client?http://localhost:8080',
10 | path.join(__dirname, 'src/index.js'),
11 | ],
12 | output: {
13 | path: path.join(__dirname, 'dist'),
14 | filename: 'bundle.js'
15 | },
16 | devtool: 'eval-source-map',
17 | plugins: [
18 | new HotModuleReplacementPlugin(),
19 | ],
20 | module: {
21 | rules: [
22 | {
23 | test: /\.js$/,
24 | exclude: /node_modules/,
25 | include: path.join(__dirname, 'src'),
26 | use: [
27 | {
28 | loader: 'babel-loader',
29 | options: {
30 | babelrc: false,
31 | presets: [
32 | ['@babel/preset-env', { modules: false }],
33 | '@babel/react',
34 | ],
35 | plugins: ['react-hot-loader/babel'],
36 | },
37 | },
38 | ],
39 | },
40 | {
41 | test: /\.(css|scss)$/,
42 | loader: 'style-loader',
43 | },
44 | {
45 | test: /\.(css|scss)$/,
46 | loader: 'css-loader',
47 | },
48 | {
49 | test: /\.(css|scss)$/,
50 | loader: 'sass-loader',
51 | },
52 | ],
53 | },
54 | devServer: {
55 | historyApiFallback: true,
56 | contentBase: './src',
57 | hot: true,
58 | },
59 | });
60 |
--------------------------------------------------------------------------------
/app/src/redux/modules/billing.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import { APP_NAMESPACE } from '../../util/redux-constants';
3 | import { put, post, get, del } from '../../util/http-utils';
4 | import { updateStore, buildGenericInitialState, handleError } from '../../util/store-utils';
5 |
6 | const BILLING_ENDPOINT_BASE = 'billing';
7 | const typeBase = `${APP_NAMESPACE}/${BILLING_ENDPOINT_BASE}/`;
8 |
9 | // Constants
10 | export const CREATE_SUBSCRIPTION = `${typeBase}CREATE_SUBSCRIPTION`;
11 |
12 | // Actions
13 |
14 | /**
15 | * createSubscription - Create a new Stripe subscription
16 | * @param {Object} formData {stripeToken, plan, isTrial, quantity}
17 | */
18 | export const createSubscription = formData => async (dispatch) => {
19 | try {
20 | await post(dispatch, CREATE_SUBSCRIPTION, `${BILLING_ENDPOINT_BASE}/subscription`, formData, true);
21 | } catch (err) {
22 | await handleError(dispatch, err, CREATE_SUBSCRIPTION);
23 | }
24 | };
25 |
26 | // Store
27 | const INITIAL_STATE = {
28 | ...buildGenericInitialState([CREATE_SUBSCRIPTION]),
29 | id: '',
30 | sources: [],
31 | subscriptions: [],
32 | invoices: [],
33 | };
34 |
35 | export default (state = INITIAL_STATE, action) => {
36 | switch (action.type) {
37 | case CREATE_SUBSCRIPTION:
38 | return updateStore(state, action, _.get(action, 'payload.customer')
39 | ? {
40 | id: action.payload.customer.id,
41 | sources: _.get(action, 'payload.customer.sources.data') || [],
42 | subscriptions: _.get(action, 'payload.customer.subscriptions.data') || [],
43 | }
44 | : {});
45 | default:
46 | return state;
47 | }
48 | };
49 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # MKRN Starter
2 | Starter/seed project for MongoDB, Koa, React/Redux, Node full-stack JavaScript apps.
3 |
4 | ## Usage
5 | Clone the starter onto your machine and install all of the dependencies. You may need to [install a local copy of mongodb](https://docs.mongodb.com/manual/installation/) if you do not already have it.
6 |
7 | This example shows cloning the main repository, but you should **fork** it first and clone your fork if you plan to contribute.
8 |
9 | ```
10 | git clone https://github.com/joshuaslate/mkrn-starter.git
11 | cd mkrn-starter/api
12 | npm install
13 | cd ../mkrn-starter/app
14 | npm install
15 | ```
16 | Now, you need to set up three shells to run mongodb, the server, and the client.
17 |
18 | *shell 1 - this is mongodb*
19 |
20 | ```
21 | cd ../mkrn-starter/app
22 | mongod
23 | ```
24 | *shell 2 - this is the server*
25 |
26 | ```
27 | cd ../mkrn-starter/app
28 | npm start
29 | ```
30 | *shell 3 - this is your client*
31 |
32 | ```
33 | cd ../mkrn-starter/api
34 | npm start
35 | ```
36 |
37 | At this point, you should be able to navigate to `http://localhost:8080/` on your browser (if it doesn't open automatically) and see the landing page which is blank except for the header. Recommendations:
38 |
39 | - open your 'Developer Console'
40 | - Click on "Register" and enter a new user
41 | - you should be navigated to the protected area
42 | - test the Sign Out, forgot password, and other features
43 | - break it, learn from it, post here :green_heart:
44 |
45 | ## Features
46 | - Login/Logout
47 | - Register
48 | - Forgot passwort
49 | - Multiple languages (en, de)
50 |
51 | ## Contributions
52 | Please feel free to contribute to this project. Whether it's features, tests, or code cleanup, any help is welcome at this point.
53 |
54 | ### Contact
55 | Please send inquiries to josh(at)slatepeak.com, or use the contact form at https://slatepeak.com to contact me.
56 |
--------------------------------------------------------------------------------
/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mkrn-app",
3 | "version": "1.0.0",
4 | "description": "React/Redux client-side for MKRN stack app.",
5 | "main": "index.js",
6 | "author": "Joshua Anderson Slate",
7 | "license": "MIT",
8 | "scripts": {
9 | "start": "webpack serve --progress --color --hot --mode development",
10 | "build": "export NODE_ENV=production|| set NODE_ENV=production && webpack"
11 | },
12 | "devDependencies": {
13 | "@babel/core": "^7.14.8",
14 | "@babel/eslint-parser": "^7.14.7",
15 | "@babel/preset-env": "^7.14.8",
16 | "@babel/preset-react": "^7.14.5",
17 | "@babel/preset-stage-2": "^7.8.3",
18 | "babel-loader": "^8.2.2",
19 | "css-loader": "^6.2.0",
20 | "eslint": "7.31.0",
21 | "eslint-config-airbnb": "18.2.1",
22 | "eslint-config-airbnb-base": "^14.2.1",
23 | "eslint-plugin-import": "2.23.4",
24 | "eslint-plugin-jest": "^24.4.0",
25 | "eslint-plugin-jsx-a11y": "6.4.1",
26 | "eslint-plugin-react": "7.24.0",
27 | "eslint-plugin-react-hooks": "^4.2.0",
28 | "node-sass": "^6.0.1",
29 | "react-hot-loader": "4.13.0",
30 | "sass-loader": "^12.1.0",
31 | "style-loader": "^3.2.1",
32 | "typescript": "^3.9.10",
33 | "webpack-cli": "^4.7.2"
34 | },
35 | "dependencies": {
36 | "@babel/polyfill": "^7.12.1",
37 | "axios": "^0.21.2",
38 | "babel-polyfill": "^6.26.0",
39 | "lodash": "^4.17.21",
40 | "moment": "^2.29.1",
41 | "normalize.css": "^8.0.1",
42 | "path": "^0.12.7",
43 | "prop-types": "^15.7.2",
44 | "react": "^17.0.2",
45 | "react-dom": "^17.0.2",
46 | "react-i18nify": "^4.1.0",
47 | "react-redux": "^7.2.4",
48 | "react-router-dom": "^5.2.0",
49 | "redux": "^4.1.0",
50 | "redux-form": "^8.3.7",
51 | "redux-thunk": "^2.3.0",
52 | "universal-cookie": "^4.0.4",
53 | "webpack": "^5.46.0",
54 | "webpack-dev-server": "^3.11.2"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/api/controllers/user.js:
--------------------------------------------------------------------------------
1 | const User = require('../models/user');
2 | const userUtils = require('../utils/user-utils');
3 | const validationUtils = require('../utils/validation-utils');
4 |
5 | const { standardizeUser } = userUtils;
6 | const { filterSensitiveData } = validationUtils;
7 |
8 | /**
9 | * getUsers - Returns JSON for all users
10 | * @returns {Array} - Array of users
11 | */
12 | exports.getUsers = async (ctx, next) => {
13 | try {
14 | const users = await User.find({});
15 | const filteredUsers = users.map(user => standardizeUser(user));
16 | ctx.status = 200;
17 | ctx.body = { users: filteredUsers };
18 | await next();
19 | } catch (err) {
20 | ctx.throw(500, err);
21 | }
22 | };
23 |
24 | /**
25 | * getUser - Returns JSON for specified user
26 | * @returns {Object} - Single user object
27 | */
28 | exports.getUser = async (ctx, next) => {
29 | try {
30 | const user = await User.findById(ctx.params.id);
31 | ctx.status = 200;
32 | ctx.body = { user: standardizeUser(user) };
33 | await next();
34 | } catch (err) {
35 | ctx.throw(500, err);
36 | }
37 | };
38 |
39 | /**
40 | * editUser - Edits single user
41 | */
42 | exports.editUser = async (ctx, next) => {
43 | try {
44 | // Allow users to edit all of their own information, but limited information
45 | // on other users. This could be controlled in other ways as well.
46 | const safeData = ctx.state.user.id === ctx.params.id
47 | ? ctx.request.body
48 | : filterSensitiveData(ctx.request.body);
49 |
50 | await User.findOneAndUpdate({ _id: ctx.params.id }, safeData);
51 | ctx.body = { user: safeData };
52 | await next();
53 | } catch (err) {
54 | ctx.throw(500, err);
55 | }
56 | };
57 |
58 | /**
59 | * deleteUser - Deletes single user
60 | */
61 | exports.deleteUser = async (ctx, next) => {
62 | try {
63 | await User.findOneAndRemove({ _id: ctx.params.id });
64 | await next();
65 | } catch (err) {
66 | ctx.throw(500, err);
67 | }
68 | };
69 |
--------------------------------------------------------------------------------
/app/src/components/hoc/require-auth.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import _ from 'lodash';
4 | import { connect } from 'react-redux';
5 | import { withRouter } from 'react-router-dom';
6 | import { getAuthenticatedUser, setPostAuthPath } from '../../redux/modules/authentication';
7 |
8 | export default (ComposedComponent) => {
9 | class Authentication extends Component {
10 | static propTypes = {
11 | authenticated: PropTypes.bool,
12 | history: PropTypes.shape({
13 | push: PropTypes.func,
14 | }),
15 | match: PropTypes.shape({
16 | path: PropTypes.string,
17 | }),
18 | setPostAuthPath: PropTypes.func,
19 | getAuthenticatedUser: PropTypes.func,
20 | };
21 |
22 | // List of pre-authention routes, so they aren't saved for a post-auth redirect
23 | static preAuthRoutes = ['/login', '/register', '/reset-password', '/forgot-password'];
24 |
25 | componentDidMount = () => this.ensureAuthentication(this.props.authenticated);
26 |
27 | componentWillUpdate = (nextProps) => {
28 | if (this.props.authenticated !== nextProps.authenticated) {
29 | this.ensureAuthentication(nextProps.authenticated);
30 | }
31 | };
32 |
33 | ensureAuthentication = (isAuthed) => {
34 | if (!isAuthed) {
35 | const path = _.get(this.props.match, 'path');
36 |
37 | // Save the user's path for future redirect
38 | if (path && !Authentication.preAuthRoutes.includes(path)) {
39 | this.props.setPostAuthPath(path);
40 | }
41 |
42 | // Redirect to the login page
43 | return this.props.history.push('/login');
44 | }
45 |
46 | return this.props.getAuthenticatedUser();
47 | }
48 |
49 | render() {
50 | return
28 |
36 |
29 |
32 |
35 | {heading}
33 | {children} 34 |
39 |
40 |
49 | );
50 | }
51 | }
52 |
53 | const mapStateToProps = ({ authentication }) => ({
54 | errors: authentication.errors[RESET_PASSWORD],
55 | message: authentication.messages[RESET_PASSWORD],
56 | loading: authentication.loading[RESET_PASSWORD],
57 | });
58 |
59 | export default connect(mapStateToProps, { forgotPassword })(form(ForgotPassword));
60 |
--------------------------------------------------------------------------------
/app/src/redux/modules/user.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import { APP_NAMESPACE } from '../../util/redux-constants';
3 | import { put, post, get, del } from '../../util/http-utils';
4 | import { updateStore, buildGenericInitialState, handleError } from '../../util/store-utils';
5 | import { CHANGE_AUTH, GET_AUTHENTICATED_USER } from './authentication';
6 |
7 | const USER_ENDPOINT_BASE = 'user';
8 | const typeBase = `${APP_NAMESPACE}/${USER_ENDPOINT_BASE}/`;
9 |
10 | // Constants
11 | export const GET_USER = `${typeBase}GET_USER`;
12 | export const GET_USERS = `${typeBase}GET_USERS`;
13 |
14 | // Actions
15 |
16 | /**
17 | * getUser - Fetches user from API, given id
18 | *
19 | * @param {String} id User's id for lookup
20 | * @returns {Promise}
21 | */
22 | export const getUser = id => async (dispatch) => {
23 | try {
24 | const response = await get(dispatch, GET_USER, `${USER_ENDPOINT_BASE}/${id}`, true);
25 | return Promise.resolve(response);
26 | } catch (err) {
27 | await handleError(dispatch, err, GET_USER);
28 | }
29 | };
30 |
31 | /**
32 | * getUsers - Fetches users from API
33 | *
34 | * @returns {Promise}
35 | */
36 | export const getUsers = () => async (dispatch) => {
37 | try {
38 | const response = await get(dispatch, GET_USERS, USER_ENDPOINT_BASE, true);
39 | return Promise.resolve(response);
40 | } catch (err) {
41 | await handleError(dispatch, err, GET_USER);
42 | }
43 | };
44 |
45 | // Store
46 | const INITIAL_STATE = {
47 | ...buildGenericInitialState([GET_USER, GET_USERS]),
48 | };
49 |
50 | export default (state = INITIAL_STATE, action) => {
51 | switch (action.type) {
52 | case CHANGE_AUTH:
53 | return updateStore(state, action, _.get(action, 'payload.user.id') ? { [action.payload.user.id]: action.payload.user } : {});
54 | case GET_USER:
55 | case GET_AUTHENTICATED_USER:
56 | return updateStore(state, action, _.get(action, 'payload.user.id') ? { [action.payload.user.id]: action.payload.user } : {});
57 | case GET_USERS:
58 | return updateStore(state, action, _.get(action, 'payload.users') ? _.mapKeys(action.payload.users, 'id') : {});
59 | default:
60 | return state;
61 | }
62 | };
63 |
64 | // Selectors
65 | export const getAuthenticatedUser = ({ user, authentication }) => user[authentication.user];
66 |
--------------------------------------------------------------------------------
/app/src/components/authentication/reset-password.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { reduxForm } from 'redux-form';
5 | import TextInput from '../form-fields/text-input';
6 | import GenericForm from '../form-fields/generic-form';
7 | import { resetPassword, RESET_PASSWORD } from '../../redux/modules/authentication';
8 | import { errorPropTypes } from '../../util/proptype-utils';
9 | import './authentication.scss';
10 | import { getComponentTranslator } from '../../util/i18n';
11 | import { Translate } from 'react-i18nify';
12 |
13 | const translate = getComponentTranslator('resetPassword');
14 |
15 | const form = reduxForm({
16 | form: 'resetPassword',
17 | });
18 |
19 | class ResetPassword extends Component {
20 | static propTypes = {
21 | resetPassword: PropTypes.func,
22 | handleSubmit: PropTypes.func,
23 | errors: errorPropTypes,
24 | message: PropTypes.string,
25 | loading: PropTypes.bool,
26 | params: PropTypes.shape({
27 | token: PropTypes.string,
28 | }),
29 | };
30 |
31 | static formSpec = [
32 | { id: 'password', name: 'password', label: translate('password'), type: 'password', placeholder: '********', component: TextInput },
33 | { id: 'passwordConfirm', name: 'passwordConfirm', label: translate('confirmPassword'), type: 'password', placeholder: '********', component: TextInput },
34 | ];
35 |
36 | handleFormSubmit = formProps => this.props.resetPassword(formProps, this.props.params.token);
37 |
38 | render() {
39 | const { handleSubmit, errors, message, loading } = this.props;
40 | return (
41 |
42 |
43 |
51 | );
52 | }
53 | }
54 |
55 | const mapStateToProps = ({ authentication }) => ({
56 | errors: authentication.errors[RESET_PASSWORD],
57 | message: authentication.messages[RESET_PASSWORD],
58 | loading: authentication.loading[RESET_PASSWORD],
59 | });
60 |
61 | export default connect(mapStateToProps, { resetPassword })(form(ResetPassword));
62 |
--------------------------------------------------------------------------------
/api/models/user.js:
--------------------------------------------------------------------------------
1 | const mongoose = require('mongoose');
2 | const bcrypt = require('bcrypt');
3 | const ROLES = require('../constants').ROLES;
4 |
5 | const Schema = mongoose.Schema;
6 |
7 | //= ===============================
8 | // User Schema
9 | //= ===============================
10 | const UserSchema = new Schema({
11 | email: {
12 | type: String,
13 | lowercase: true,
14 | unique: true,
15 | required: true,
16 | },
17 | password: { type: String, required: true },
18 | name: {
19 | first: { type: String, required: true },
20 | last: { type: String, required: true },
21 | },
22 | role: {
23 | type: String,
24 | enum: Object.keys(ROLES).map(key => ROLES[key]),
25 | default: ROLES.USER,
26 | },
27 | resetPasswordToken: { type: String },
28 | resetPasswordExpires: { type: Date },
29 | billing: {
30 | customerId: { type: String },
31 | subscriptionId: { type: String },
32 | plan: { type: String },
33 | nextPaymentDue: { type: Date },
34 | },
35 | deactivated: { type: Boolean, default: false },
36 | },
37 | {
38 | timestamps: true,
39 | toObject: {
40 | virtuals: true,
41 | },
42 | toJSON: {
43 | virtuals: true,
44 | },
45 | });
46 |
47 | UserSchema.virtual('fullName').get(function virtualFullName() {
48 | return `${this.name.first} ${this.name.last}`;
49 | });
50 |
51 | //= ===============================
52 | // User model hooks
53 | //= ===============================
54 | async function hashPassword(next) {
55 | const user = this;
56 |
57 | if (user && user.isModified('password')) {
58 | try {
59 | const salt = await bcrypt.genSalt(5);
60 | user.password = await bcrypt.hash(user.password, salt, null);
61 | return next();
62 | } catch (err) {
63 | return next(err);
64 | }
65 | } else {
66 | return next();
67 | }
68 | }
69 |
70 | // Pre-save of user to database, hash password if password is modified or new
71 | UserSchema.pre('save', hashPassword);
72 | UserSchema.pre('update', hashPassword);
73 |
74 | //= ===============================
75 | // User model methods
76 | //= ===============================
77 | // Method to compare password for login
78 | UserSchema.methods.comparePassword = async function comparePassword(candidatePassword) {
79 | try {
80 | return await bcrypt.compare(candidatePassword, this.password);
81 | } catch (err) {
82 | throw new Error(err);
83 | }
84 | };
85 |
86 | module.exports = mongoose.model('User', UserSchema);
87 |
--------------------------------------------------------------------------------
/app/src/components/authentication/login.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { reduxForm } from 'redux-form';
5 | import { Link } from 'react-router-dom';
6 | import TextInput from '../form-fields/text-input';
7 | import GenericForm from '../form-fields/generic-form';
8 | import { login, CHANGE_AUTH } from '../../redux/modules/authentication';
9 | import { errorPropTypes } from '../../util/proptype-utils';
10 | import './authentication.scss';
11 | import { getComponentTranslator } from '../../util/i18n';
12 | import { Translate } from 'react-i18nify';
13 |
14 | const translate = getComponentTranslator('login');
15 |
16 | const form = reduxForm({
17 | form: 'login',
18 | });
19 |
20 | class Login extends Component {
21 | static propTypes = {
22 | handleSubmit: PropTypes.func,
23 | desiredPath: PropTypes.string,
24 | login: PropTypes.func,
25 | errors: errorPropTypes,
26 | message: PropTypes.string,
27 | loading: PropTypes.bool,
28 | };
29 |
30 | static formSpec = [
31 | { id: 'email', name: 'email', label: translate('email'), type: 'email', placeholder: 'you@yourdomain.com', component: TextInput },
32 | { id: 'password', name: 'password', label: translate('password'), type: 'password', placeholder: '********', component: TextInput },
33 | ];
34 |
35 | handleFormSubmit = (formProps) => {
36 | const { desiredPath } = this.props;
37 | if (desiredPath) {
38 | this.props.login(formProps, desiredPath);
39 | } else {
40 | this.props.login(formProps);
41 | }
42 | }
43 |
44 | render = () => {
45 | const { handleSubmit, errors, message, loading } = this.props;
46 |
47 | return (
48 |
49 |
50 |
62 | );
63 | }
64 | }
65 |
66 | const mapStateToProps = ({ authentication }) => ({
67 | errors: authentication.errors[CHANGE_AUTH],
68 | message: authentication.messages[CHANGE_AUTH],
69 | loading: authentication.loading[CHANGE_AUTH],
70 | authenticated: authentication.authenticated,
71 | desiredPath: authentication.desiredPath,
72 | });
73 |
74 | export default connect(mapStateToProps, { login })(form(Login));
75 |
--------------------------------------------------------------------------------
/api/test/user.test.js:
--------------------------------------------------------------------------------
1 | const request = require('supertest');
2 | const server = require('../index');
3 | const User = require('../models/user');
4 | const ERRORS = require('../constants').ERRORS;
5 |
6 | const seedUser = {
7 | email: 'testSuccess@successfultestdomain.com',
8 | password: '12345678',
9 | name: {
10 | first: 'Jillian',
11 | last: 'Mary',
12 | },
13 | };
14 |
15 | const validRegistration = {
16 | email: 'test@domain.com',
17 | password: '12345678',
18 | name: {
19 | first: 'Kurt',
20 | last: 'Vonnegut',
21 | },
22 | };
23 |
24 | describe('User tests', () => {
25 | beforeAll(async () => {
26 | await new User(seedUser).save();
27 | });
28 |
29 | it('should not allow a user to register with missing information', async () => {
30 | const fields = Object.keys(validRegistration);
31 |
32 | fields.forEach(async (field) => {
33 | const invalidRegistration = Object.assign({}, validRegistration);
34 | delete invalidRegistration[field];
35 |
36 | const result = await request(server).post('/user/register').send(invalidRegistration);
37 | result.expect(422);
38 | });
39 | });
40 |
41 | it('should not allow a user to register with a password fewer than 8 characters long', () => {
42 | const invalidRegistration = Object.assign({}, validRegistration, { password: '1234' });
43 | return request(server).post('/user/register')
44 | .send(invalidRegistration)
45 | .expect(422)
46 | .expect({ errors: [{ error: ERRORS.PASSWORD_TOO_SHORT }] });
47 | });
48 |
49 | it('should not allow a user to register with a bad email address', () => {
50 | const invalidRegistration = Object.assign({}, validRegistration, { email: 'bad email' });
51 | return request(server).post('/user/register')
52 | .send(invalidRegistration)
53 | .expect(422)
54 | .expect({ errors: [{ error: ERRORS.INVALID_EMAIL }] });
55 | });
56 |
57 | it('should not allow a user to register with a duplicate email address', () => {
58 | const invalidRegistration = Object.assign({}, validRegistration, { email: seedUser.email });
59 | return request(server).post('/user/register')
60 | .send(invalidRegistration)
61 | .expect(422)
62 | .expect({ errors: [{ error: ERRORS.ALREADY_REGISTERED }] });
63 | });
64 |
65 | it('should allow new users to register with valid credentials', async () => {
66 | await request(server).post('/user/register')
67 | .send(validRegistration)
68 | .expect(200);
69 | });
70 |
71 | it('should allow users with the correct login information to authenticate', async () => {
72 | await request(server).post('/user/login')
73 | .send(Object.assign({}, { email: seedUser.email, password: seedUser.password }))
74 | .expect(200);
75 | });
76 |
77 | // Remove saved user data from test database
78 | afterAll(() => User.remove({}));
79 | });
80 |
--------------------------------------------------------------------------------
/app/src/components/authentication/register.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { reduxForm } from 'redux-form';
5 | import { Link } from 'react-router-dom';
6 | import TextInput from '../form-fields/text-input';
7 | import GenericForm from '../form-fields/generic-form';
8 | import { register, CHANGE_AUTH } from '../../redux/modules/authentication';
9 | import { errorPropTypes } from '../../util/proptype-utils';
10 | import './authentication.scss';
11 | import { getComponentTranslator } from '../../util/i18n';
12 | import { Translate } from 'react-i18nify';
13 |
14 | const translate = getComponentTranslator('register');
15 |
16 | const form = reduxForm({
17 | form: 'register',
18 | });
19 |
20 | class Register extends Component {
21 | static propTypes = {
22 | handleSubmit: PropTypes.func,
23 | register: PropTypes.func,
24 | errors: errorPropTypes,
25 | message: PropTypes.string,
26 | loading: PropTypes.bool,
27 | };
28 |
29 | static formSpec = [
30 | { id: 'firstName', name: 'name.first', label: translate('firstName'), type: 'text', placeholder: translate('firstNameExample'), component: TextInput },
31 | { id: 'lastName', name: 'name.last', label: translate('lastName'), type: 'text', placeholder: translate('lastNameExample'), component: TextInput },
32 | { id: 'email', name: 'email', label: translate('email'), type: 'email', placeholder: translate('emailExample'), component: TextInput },
33 | { id: 'password', name: 'password', label: translate('password'), type: 'password', placeholder: '********', component: TextInput },
34 | { id: 'passwordConfirm', name: 'passwordConfirm', label: translate('confirmPassword'), type: 'password', placeholder: '********', component: TextInput },
35 | ];
36 |
37 | handleFormSubmit = formProps => this.props.register(formProps);
38 |
39 | render = () => {
40 | const { handleSubmit, errors, message, loading } = this.props;
41 |
42 | return (
43 |
44 |
45 |
54 | );
55 | }
56 | }
57 |
58 | const mapStateToProps = ({ authentication }) => ({
59 | errors: authentication.errors[CHANGE_AUTH],
60 | message: authentication.messages[CHANGE_AUTH],
61 | loading: authentication.loading[CHANGE_AUTH],
62 | authenticated: authentication.authenticated,
63 | });
64 |
65 | export default connect(mapStateToProps, { register })(form(Register));
66 |
--------------------------------------------------------------------------------
/api/utils/validation-utils.js:
--------------------------------------------------------------------------------
1 | const validator = require('validator');
2 | const ERRORS = require('../constants').ERRORS;
3 |
4 | /**
5 | * responseValidator - Validate responses and return corresponding errors
6 | *
7 | * @param {Object} req the Koa request body
8 | * @param {Array} fields an array of fields on the req to validate
9 | * @return {Object} validated/sanitized request body
10 | */
11 | const responseValidator = function responseValidator(req, fields) {
12 | const errors = [];
13 | const props = Object.keys(req);
14 |
15 | for (let i = 0; i < fields.length; i += 1) {
16 | const isPresent = props.indexOf(fields[i].name) !== -1;
17 | const isRequired = fields[i].required;
18 |
19 | if (!isPresent && isRequired) {
20 | switch (fields[i].name) {
21 | case 'email': errors.push({ error: ERRORS.INVALID_EMAIL }); break;
22 | case 'name':
23 | if (!req.name || !req.name.first || !req.name.last) {
24 | errors.push({ error: ERRORS.INVALID_NAME });
25 | }
26 | break;
27 | case 'password': errors.push({ error: ERRORS.INVALID_PASSWORD }); break;
28 | case 'passwordConfirm': errors.push({ error: ERRORS.PASSWORD_MUST_MATCH }); break;
29 | default: errors.push({ error: ERRORS.INVALID_ENTRY }); break;
30 | }
31 | } else {
32 | // Escape and sanitize inputs for security (validator only works on strings)
33 | if (typeof req[fields[i].name] === 'string') {
34 | req[fields[i].name] = validator.trim(req[fields[i].name]);
35 | // Evidently, React already escapes strings
36 | // req[fields[i].name] = validator.escape(req[fields[i].name]);
37 | }
38 |
39 | if (fields[i].name === 'email') {
40 | if (!validator.isEmail(req.email)) {
41 | errors.push({ error: ERRORS.INVALID_EMAIL });
42 | }
43 | }
44 | if (fields[i].name === 'password') {
45 | if (req.password && req.password.length < 8) {
46 | errors.push({ error: ERRORS.PASSWORD_TOO_SHORT });
47 | }
48 | }
49 | if (fields[i].name === 'passwordConfirm') {
50 | if (req.passwordConfirm !== req.password) {
51 | errors.push({ error: ERRORS.PASSWORD_MUST_MATCH });
52 | }
53 | }
54 | }
55 | }
56 |
57 | // If there are errors, return them, otherwise return the modified request body.
58 | if (errors && errors.length) {
59 | return errors;
60 | }
61 | return req;
62 | };
63 |
64 | /**
65 | * filterSensitiveData - Filters out sensitive data from a request body
66 | *
67 | * @param {Object} req the Koa request body
68 | * @return {Object} Body without sensitive fields
69 | */
70 | const filterSensitiveData = (req) => {
71 | const newBody = {};
72 | const sensitiveKeys = [
73 | 'password',
74 | 'billing',
75 | ];
76 |
77 | Object.keys(req).forEach((item) => {
78 | if (sensitiveKeys.indexOf(item) === -1) {
79 | newBody[item] = req[item];
80 | }
81 | });
82 |
83 | return newBody;
84 | };
85 |
86 | module.exports = {
87 | responseValidator,
88 | filterSensitiveData,
89 | };
90 |
--------------------------------------------------------------------------------
/app/src/i18n.js:
--------------------------------------------------------------------------------
1 | export default {
2 | en: {
3 | dashboard: {
4 | welcomeText: "Welcome to the dashboard"
5 | },
6 | forgotPassword: {
7 | backToLogin: "Back to login",
8 | email: "Email",
9 | submit: "Reset Password",
10 | title: "Forgot Password"
11 | },
12 | header: {
13 | dashboard: 'Dashboard',
14 | login: "Sign in",
15 | logout: "Sign out",
16 | profile: "Profile",
17 | register: "Register"
18 | },
19 | login: {
20 | email: "Email",
21 | createNewAccount: "Create a new account.",
22 | forgotPassword: "Forgot password?",
23 | submit: "Login",
24 | title: "Login",
25 | password: "Password"
26 | },
27 | register: {
28 | confirmPassword: "Confirm Password",
29 | email: 'Email',
30 | emailExample: 'you@yourdomain.com',
31 | firstName: "First Name",
32 | firstNameExample: "John",
33 | haveAccount: "Have an account?",
34 | lastName: "Last Name",
35 | lastNameExample: "Snow",
36 | password: "Password",
37 | submit: "Register",
38 | title: "Register"
39 | },
40 | resetPassword: {
41 | confirmPassword: "Confirm Password",
42 | password: "Password",
43 | submit: "Change Password",
44 | title: "Reset Password"
45 | }
46 | },
47 | de: {
48 | dashboard: {
49 | welcomeText: "Willkommen im Dashboard"
50 | },
51 | forgotPassword: {
52 | backToLogin: "Zurück zur Anmeldung",
53 | email: "Email",
54 | submit: "Kennwort zurücksetzen",
55 | title: "Kennwort vergessen"
56 | },
57 | header: {
58 | dashboard: 'Dashboard',
59 | login: "Anmelden",
60 | logout: "Abmelden",
61 | profile: "Profil",
62 | register: "Registrieren"
63 | },
64 | login: {
65 | email: "Email",
66 | createNewAccount: "Neues Konto anlegen.",
67 | forgotPassword: "Passwort vergessen?",
68 | submit: "Anmelden",
69 | title: "Anmelden",
70 | password: "Kennwort"
71 | },
72 | register: {
73 | confirmPassword: "Kennwort wiederholen",
74 | email: 'Email',
75 | emailExample: 'max.mustermann@yourdomain.com',
76 | firstName: "Vorname",
77 | firstNameExample: "Max",
78 | haveAccount: "Schon registriert?",
79 | lastName: "Nachname",
80 | lastNameExample: "Mustermann",
81 | password: "Kennwort",
82 | submit: "Registrieren",
83 | title: "Registrieren"
84 | },
85 | resetPassword: {
86 | confirmPassword: "Kennwort wiederholen",
87 | password: "Kennwort",
88 | submit: "Kennwort ändern",
89 | title: "Kennwort zurücksetzen"
90 | }
91 | }
92 | };
--------------------------------------------------------------------------------
/app/src/util/store-utils.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import { PENDING, SUCCESS, ERROR } from './redux-constants';
3 |
4 | /**
5 | * updateStore - Returns an object containing updated state. This helper
6 | * builds generic state (messages, errors, loading)
7 | *
8 | * @param {Object} state Current state of the store
9 | * @param {Object} action Redux action for the store to respond to
10 | * @param {Object} [extraValues] Any additional state to be assigned
11 | * @returns {Object}
12 | */
13 | export const updateStore = (state, action, extraValues = {}) => {
14 | const { type = '', payload = {}, meta = { status: '' } } = action;
15 | switch (meta.status) {
16 | case SUCCESS:
17 | return {
18 | ...state,
19 | ...extraValues,
20 | messages: { ...state.messages, [type]: _.get(payload, 'message') },
21 | loading: { ...state.loading, [type]: false },
22 | errors: { ...state.errors, [type]: [] },
23 | };
24 | case ERROR:
25 | return {
26 | ...state,
27 | messages: { ...state.messages, [type]: '' },
28 | loading: { ...state.loading, [type]: false },
29 | errors: { ...state.errors, [type]: _.get(payload, 'data.errors') || _.get(payload, 'errors') || action.payload || [] },
30 | };
31 | case PENDING:
32 | default:
33 | return {
34 | ...state,
35 | messages: { ...state.messages, [type]: '' },
36 | loading: { ...state.loading, [type]: true },
37 | errors: { ...state.errors, [type]: [] },
38 | };
39 | }
40 | };
41 |
42 | /**
43 | * buildGenericInitialState - Builds initial state for a set of constants
44 | * (loading, errors, messages)
45 | *
46 | * @param {Array} constants Array of constants to build state around
47 | * @returns {Object}
48 | */
49 | export const buildGenericInitialState = constants => ({
50 | messages: constants.reduce((retObj, constant) => {
51 | retObj[constant] = '';
52 | return retObj;
53 | }, {}),
54 | errors: constants.reduce((retObj, constant) => {
55 | retObj[constant] = [];
56 | return retObj;
57 | }, {}),
58 | loading: constants.reduce((retObj, constant) => {
59 | retObj[constant] = false;
60 | return retObj;
61 | }, {}),
62 | });
63 |
64 | /**
65 | * handleError - Dispatches error properly to Redux stores
66 | *
67 | * @param {Function} dispatch Redux dispatch function
68 | * @param {Object} error Error container
69 | * @param {String} type Action type constant for error received
70 | */
71 | export const handleError = (dispatch, error, type) => {
72 | const foundError = _.get(error, 'response.data.errors') || [{ error }];
73 | return dispatch({
74 | type,
75 | payload: foundError,
76 | meta: { status: ERROR },
77 | });
78 | };
79 |
80 | /**
81 | * removeMetaFromState - Remove metadata from state (general selector)
82 | *
83 | * @param {Object} state State to filter metadata out of
84 | */
85 | export const removeMetaFromState = state => Object.keys(state).reduce((accum, val) => {
86 | if (val !== 'errors' && val !== 'messages' && val !== 'loading') {
87 | accum[val] = state[val];
88 | }
89 |
90 | return accum;
91 | }, {});
92 |
--------------------------------------------------------------------------------
/app/src/components/header/header.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { connect } from 'react-redux';
4 | import { Link } from 'react-router-dom';
5 | import { getAuthenticatedUser } from '../../redux/modules/user';
6 | import { logoutUser } from '../../redux/modules/authentication';
7 | import { mobileBreakpoint } from '../../constants/ui-constants';
8 | import { getComponentTranslator } from '../../util/i18n';
9 |
10 | const translate = getComponentTranslator('header');
11 |
12 | class Header extends Component {
13 | state = {
14 | isMobile: window.innerWidth <= mobileBreakpoint,
15 | mobileNavOpen: false,
16 | };
17 |
18 | componentWillMount = () => {
19 | window.addEventListener('resize', this.mobileCheck);
20 | }
21 |
22 | componentWillUnmount = () => {
23 | window.removeEventListener('resize', this.mobileCheck);
24 | }
25 |
26 | mobileCheck = () => this.setState({ isMobile: window.innerWidth <= mobileBreakpoint });
27 |
28 | buildNavigation = () => {
29 | const { user } = this.props;
30 | const links = [
31 | {
32 | name: translate('dashboard'),
33 | link: 'dashboard',
34 | authenticated: true,
35 | },
36 | {
37 | name: (user && user.firstName) || translate('profile'),
38 | link: 'profile',
39 | authenticated: true,
40 | },
41 | {
42 | name: translate('logout'),
43 | onClick: this.props.logoutUser,
44 | authenticated: true,
45 | },
46 | {
47 | name: translate('login'),
48 | link: 'login',
49 | authenticated: false,
50 | },
51 | {
52 | name: translate('register'),
53 | link: 'register',
54 | authenticated: false,
55 | },
56 | ];
57 |
58 | return (
59 | -
60 | {links.filter(link => link.authenticated === this.props.authenticated).map(link => (
61 |
- 62 | {link.link && {link.name}} 63 | {link.onClick && {link.name}} 64 | 65 | ))} 66 |