93 | 404 Not Found
94 |
95 | )}
96 | />
97 |
9 | 
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/client/src/index.css:
--------------------------------------------------------------------------------
1 | html {
2 | height: 100%;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | font-family: 'Source sans Pro', sans-serif;
8 | -webkit-font-smoothing: antialiased;
9 | -moz-osx-font-smoothing: grayscale;
10 | background-color: snow;
11 | height: 100%;
12 | }
13 |
14 | code {
15 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
16 | }
17 |
--------------------------------------------------------------------------------
/client/src/components/Backdrop/Backdrop.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useBackdropStyles } from './Backdrop.style';
3 |
4 | interface BackdropProps {
5 | click(): void;
6 | }
7 |
8 | export const Backdrop: React.FC
10 | We're sad to see you go :(
8 |
9 |
17 |
18 | );
19 | };
20 |
--------------------------------------------------------------------------------
/client/src/components/Dialog/Dialog.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useDialogStyles } from './Dialog.style';
3 |
4 | interface DialogProps {
5 | isOpen: boolean;
6 | onClose: any;
7 | }
8 |
9 | export const Dialog: React.FC10 | Click{' '} 11 | 12 | here 13 | {' '} 14 | to return back to the home page 15 |
16 |
14 |
17 | {children}
18 |
19 | );
20 |
21 | if (!isOpen) {
22 | dialog = undefined;
23 | }
24 | return {dialog}
;
25 | };
26 |
--------------------------------------------------------------------------------
/client/src/components/SideDrawer/DrawerToggleButton.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useDrawerToggleButtonStyles } from './DrawerToggleButton.style';
3 |
4 | interface DrawerToggleButtonProps {
5 | click(): void;
6 | }
7 |
8 | export const DrawerToggleButton: React.FC
9 |
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/client/src/pages/Register/Register.style.ts:
--------------------------------------------------------------------------------
1 | import { makeStyles } from '@material-ui/core/styles';
2 | import { ColorScheme } from '../../utils/theme';
3 |
4 | export const useRegisterStyles = makeStyles({
5 | root: {
6 | margin: '0 auto',
7 | top: '25%',
8 | height: '100%',
9 | width: '348px',
10 | },
11 | headerText: {
12 | textAlign: 'center',
13 | fontWeight: 'bold',
14 | },
15 | alignedFormContent: {
16 | marginTop: 12,
17 | display: 'flex',
18 | width: '100%',
19 | },
20 | alignedFormField: {
21 | width: '50%',
22 | },
23 | formField: {
24 | width: '100%',
25 | marginTop: 12,
26 | },
27 | formButton: {
28 | marginTop: 12,
29 | textTransform: 'none',
30 | fontWeight: 'bold',
31 | letterSpacing: 1,
32 | textAlign: 'center',
33 | '&:disabled': {
34 | backgroundColor: ColorScheme.ORANGE,
35 | color: ColorScheme.WHITE,
36 | },
37 | },
38 | loginText: {
39 | margintop: 12,
40 | },
41 | spacer: {
42 | width: 8,
43 | },
44 | });
45 |
--------------------------------------------------------------------------------
/server/src/utils/createRandom.ts:
--------------------------------------------------------------------------------
1 | export const createRandomNumber = (n: number): string => {
2 | let add = 1,
3 | max = 12 - add;
4 |
5 | if (n > max) {
6 | return createRandomNumber(max) + createRandomNumber(n - max);
7 | }
8 |
9 | max = Math.pow(10, n + add);
10 | let min = max / 10;
11 | let randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
12 | return ("" + randomNumber).substring(add);
13 | };
14 |
15 | export const createRandomIbanCode = (): string => {
16 | return `GB${createRandomNumber(2)} AP0L ${createRandomNumber(4)} ${createRandomNumber(
17 | 4
18 | )} ${createRandomNumber(4)} ${createRandomNumber(2)}`;
19 | };
20 |
21 | export const createRandomBicCode = (): string => {
22 | return `AP0LGB${createRandomNumber(2)}`;
23 | };
24 |
25 | export const createRandomSortCode = (): string | undefined => {
26 | let randomNumber = Math.floor(Math.random() * 899999 + 100000);
27 | return randomNumber
28 | .toString()
29 | .match(/.{1,2}/g)
30 | ?.join("-");
31 | };
32 |
33 | export const createRandomCardNumber = (): string => {
34 | return `${createRandomNumber(4)} ${createRandomNumber(4)} ${createRandomNumber(
35 | 4
36 | )} ${createRandomNumber(4)}`;
37 | };
38 |
--------------------------------------------------------------------------------
/server/ormconfig.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "production",
4 | "type": "postgres",
5 | "synchronize": true,
6 | "logging": true
7 | },
8 | {
9 | "name": "development",
10 | "type": "postgres",
11 | "host": "localhost",
12 | "port": 5432,
13 | "username": "postgres",
14 | "password": "postgres",
15 | "database": "apollobank",
16 | "synchronize": true,
17 | "logging": false,
18 | "entities": ["src/entity/**/*.ts"],
19 | "migrations": ["src/migration/**/*.ts"],
20 | "subscribers": ["src/subscriber/**/*.ts"],
21 | "cli": {
22 | "entitiesDir": "src/entity",
23 | "migrationsDir": "src/migration",
24 | "subscribersDir": "src/subscriber"
25 | }
26 | },
27 | {
28 | "name": "default",
29 | "type": "postgres",
30 | "host": "localhost",
31 | "port": 5432,
32 | "username": "postgres",
33 | "password": "postgres",
34 | "database": "apollobank",
35 | "synchronize": true,
36 | "logging": false,
37 | "entities": ["src/entity/**/*.ts"],
38 | "migrations": ["src/migration/**/*.ts"],
39 | "subscribers": ["src/subscriber/**/*.ts"],
40 | "cli": {
41 | "entitiesDir": "src/entity",
42 | "migrationsDir": "src/migration",
43 | "subscribersDir": "src/subscriber"
44 | }
45 | }
46 | ]
47 |
--------------------------------------------------------------------------------
/client/src/schemas/registerValidationSchema.ts:
--------------------------------------------------------------------------------
1 | import * as yup from 'yup';
2 |
3 | export const registerValidationSchema = yup.object({
4 | firstName: yup.string().required('First name is required'),
5 | lastName: yup.string().required('Last name is required'),
6 | email: yup
7 | .string()
8 | .email()
9 | .required('Email is required'),
10 | streetAddres: yup.string().required('Street address is required'),
11 | postCode: yup.string().required('Post code is required'),
12 | city: yup.string().required('City is required'),
13 | country: yup.string().required('Country is required'),
14 | password: yup.lazy(value =>
15 | !value
16 | ? yup.string()
17 | : yup
18 | .string()
19 | .min(6, 'Password must be at least 6 characters')
20 | .required('Password is required'),
21 | ),
22 | confirmPassword: yup.string().oneOf([yup.ref('password')], 'Passwords do not match'),
23 | dateOfBirth: yup
24 | .date()
25 | .max(new Date(), 'Date of birth cannot be in the future')
26 | .typeError('Date of birth has to be a valid date')
27 | .required('Date of birth is required'),
28 | });
29 |
--------------------------------------------------------------------------------
/server/src/entity/User.ts:
--------------------------------------------------------------------------------
1 | import { Entity, PrimaryGeneratedColumn, Column, BaseEntity, OneToMany } from "typeorm";
2 | import { ObjectType, Field, Int } from "type-graphql";
3 | import { Account } from "./Account";
4 | import { Card } from "./Card";
5 |
6 | /**
7 | * Users table
8 | */
9 | @ObjectType()
10 | @Entity("users")
11 | export class User extends BaseEntity {
12 | @Field(() => Int)
13 | @PrimaryGeneratedColumn()
14 | id: number;
15 |
16 | @Field()
17 | @Column({ unique: true })
18 | email: string;
19 |
20 | @Column()
21 | password: string;
22 |
23 | @Field()
24 | @Column()
25 | firstName: string;
26 |
27 | @Field()
28 | @Column()
29 | lastName: string;
30 |
31 | @Field()
32 | @Column()
33 | dateOfBirth: string;
34 |
35 | @Field()
36 | @Column()
37 | streetAddress: string;
38 |
39 | @Field()
40 | @Column()
41 | postCode: string;
42 |
43 | @Field()
44 | @Column()
45 | city: string;
46 |
47 | @Field()
48 | @Column()
49 | country: string;
50 |
51 | @OneToMany(() => Account, (account) => account.owner, { onDelete: "CASCADE" })
52 | accounts: Account[];
53 |
54 | @OneToMany(() => Card, (card) => card.owner, { onDelete: "CASCADE" })
55 | cards: Card[];
56 |
57 | @Column("int", { default: 0 })
58 | tokenVersion: number;
59 | }
60 |
--------------------------------------------------------------------------------
/client/src/components/Dialog/Dialog.style.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from 'react-jss';
2 | import { ColorScheme } from '../../utils/theme';
3 |
4 | export const useDialogStyles = createUseStyles({
5 | dialog: {
6 | width: '500px',
7 | maxWidth: '100%',
8 | margin: '0 auto',
9 | position: 'fixed',
10 | left: '50%',
11 | top: '50%',
12 | transform: 'translate(-50%, -50%)',
13 | zIndex: 999,
14 | backgroundColor: 'white',
15 | padding: '10px 20px 40px',
16 | borderRadius: '8px',
17 | display: 'flex',
18 | flexDirection: 'column',
19 | boxShadow: '3px 7px 18px 0px rgba(148,148,148,1)',
20 | },
21 | closeButton: {
22 | backgroundColor: ColorScheme.PRIMARY,
23 | color: ColorScheme.WHITE,
24 | fontSize: 16,
25 | outline: 'none',
26 | marginBottom: '15px',
27 | padding: '3px 8px',
28 | cursor: 'pointer',
29 | borderRadius: '50%',
30 | border: 'none',
31 | width: '30px',
32 | height: '30px',
33 | fontWeight: 'bold',
34 | alignSelf: 'flex-end',
35 | '&:hover': {
36 | backgroundColor: ColorScheme.PRIMARY_HOVER,
37 | },
38 | },
39 | });
40 |
--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "server",
3 | "version": "0.0.1",
4 | "description": "Awesome project developed with TypeORM.",
5 | "devDependencies": {
6 | "@types/bcryptjs": "^2.4.2",
7 | "@types/cookie-parser": "^1.4.2",
8 | "@types/cors": "^2.8.6",
9 | "@types/express": "^4.17.3",
10 | "@types/graphql": "^14.5.0",
11 | "@types/jsonwebtoken": "^8.3.8",
12 | "@types/node": "^13.7.7",
13 | "minimist": "^1.2.5",
14 | "nodemon": "^2.0.14",
15 | "ts-node": "8.6.2",
16 | "typescript": "3.8.3"
17 | },
18 | "dependencies": {
19 | "@hapi/joi": "^17.1.1",
20 | "@types/faker": "^4.1.10",
21 | "@types/hapi__joi": "^16.0.12",
22 | "apollo-server-express": "^2.17.0",
23 | "bcryptjs": "^2.4.3",
24 | "cookie-parser": "^1.4.4",
25 | "cors": "^2.8.5",
26 | "dotenv": "^8.2.0",
27 | "express": "^4.17.1",
28 | "faker": "^4.1.0",
29 | "graphql": "^14.6.0",
30 | "jsonwebtoken": "^8.5.1",
31 | "pg": "^8.4.0",
32 | "reflect-metadata": "^0.1.13",
33 | "type-graphql": "^0.17.6",
34 | "typeorm": "^0.2.38"
35 | },
36 | "scripts": {
37 | "start": "ts-node src/index.ts",
38 | "dev": "nodemon --exec ts-node src/index.ts",
39 | "build": "tsc",
40 | "preinstall": "npx npm-force-resolutions"
41 | },
42 | "resolutions": {
43 | "minimist": "^1.2.5"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/client/build/precache-manifest.1f2247de76a6c560e3bc294074f75a8b.js:
--------------------------------------------------------------------------------
1 | self.__precacheManifest = (self.__precacheManifest || []).concat([
2 | {
3 | "revision": "21e9ceb5cde8f1f7a505cdeac1bfdeb6",
4 | "url": "/index.html"
5 | },
6 | {
7 | "revision": "0596feb02e91b353ba83",
8 | "url": "/static/css/main.3609ce2a.chunk.css"
9 | },
10 | {
11 | "revision": "634750f8c2e86629aa39",
12 | "url": "/static/js/2.76c6d5bb.chunk.js"
13 | },
14 | {
15 | "revision": "3b22f900d4f81232c73c229663f8fe41",
16 | "url": "/static/js/2.76c6d5bb.chunk.js.LICENSE.txt"
17 | },
18 | {
19 | "revision": "0596feb02e91b353ba83",
20 | "url": "/static/js/main.161267fe.chunk.js"
21 | },
22 | {
23 | "revision": "cda345fb50b7e11c0025",
24 | "url": "/static/js/runtime-main.844668cf.js"
25 | },
26 | {
27 | "revision": "36ab476e5e55f496749ee61897a9cfb5",
28 | "url": "/static/media/flag.36ab476e.svg"
29 | },
30 | {
31 | "revision": "543bc93b2e32281bad1ede21bb3afbdd",
32 | "url": "/static/media/mc_symbol.543bc93b.svg"
33 | },
34 | {
35 | "revision": "e5564902e2642c5e6e2e98e68a7d41f5",
36 | "url": "/static/media/uk.e5564902.svg"
37 | },
38 | {
39 | "revision": "7aea52bbbc38e6d8f93bf6f50c467452",
40 | "url": "/static/media/world.7aea52bb.svg"
41 | }
42 | ]);
--------------------------------------------------------------------------------
/client/build/service-worker.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Welcome to your Workbox-powered service worker!
3 | *
4 | * You'll need to register this file in your web app and you should
5 | * disable HTTP caching for this file too.
6 | * See https://goo.gl/nhQhGp
7 | *
8 | * The rest of the code is auto-generated. Please don't update this file
9 | * directly; instead, make changes to your Workbox build configuration
10 | * and re-run your build process.
11 | * See https://goo.gl/2aRDsh
12 | */
13 |
14 | importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
15 |
16 | importScripts(
17 | "/precache-manifest.1f2247de76a6c560e3bc294074f75a8b.js"
18 | );
19 |
20 | self.addEventListener('message', (event) => {
21 | if (event.data && event.data.type === 'SKIP_WAITING') {
22 | self.skipWaiting();
23 | }
24 | });
25 |
26 | workbox.core.clientsClaim();
27 |
28 | /**
29 | * The workboxSW.precacheAndRoute() method efficiently caches and responds to
30 | * requests for URLs in the manifest.
31 | * See https://goo.gl/S9QRab
32 | */
33 | self.__precacheManifest = [].concat(self.__precacheManifest || []);
34 | workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
35 |
36 | workbox.routing.registerNavigationRoute(workbox.precaching.getCacheKeyForURL("/index.html"), {
37 |
38 | blacklist: [/^\/_/,/\/[^/?]+\.[^/]+$/],
39 | });
40 |
--------------------------------------------------------------------------------
/client/build/asset-manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": {
3 | "main.css": "/static/css/main.3609ce2a.chunk.css",
4 | "main.js": "/static/js/main.161267fe.chunk.js",
5 | "main.js.map": "/static/js/main.161267fe.chunk.js.map",
6 | "runtime-main.js": "/static/js/runtime-main.844668cf.js",
7 | "runtime-main.js.map": "/static/js/runtime-main.844668cf.js.map",
8 | "static/js/2.76c6d5bb.chunk.js": "/static/js/2.76c6d5bb.chunk.js",
9 | "static/js/2.76c6d5bb.chunk.js.map": "/static/js/2.76c6d5bb.chunk.js.map",
10 | "index.html": "/index.html",
11 | "precache-manifest.1f2247de76a6c560e3bc294074f75a8b.js": "/precache-manifest.1f2247de76a6c560e3bc294074f75a8b.js",
12 | "service-worker.js": "/service-worker.js",
13 | "static/css/main.3609ce2a.chunk.css.map": "/static/css/main.3609ce2a.chunk.css.map",
14 | "static/js/2.76c6d5bb.chunk.js.LICENSE.txt": "/static/js/2.76c6d5bb.chunk.js.LICENSE.txt",
15 | "static/media/flag.36ab476e.svg": "/static/media/flag.36ab476e.svg",
16 | "static/media/mc_symbol.543bc93b.svg": "/static/media/mc_symbol.543bc93b.svg",
17 | "static/media/uk.e5564902.svg": "/static/media/uk.e5564902.svg",
18 | "static/media/world.7aea52bb.svg": "/static/media/world.7aea52bb.svg"
19 | },
20 | "entrypoints": [
21 | "static/js/runtime-main.844668cf.js",
22 | "static/js/2.76c6d5bb.chunk.js",
23 | "static/css/main.3609ce2a.chunk.css",
24 | "static/js/main.161267fe.chunk.js"
25 | ]
26 | }
--------------------------------------------------------------------------------
/client/src/components/SideDrawer/SideDrawer.style.ts:
--------------------------------------------------------------------------------
1 | import { createUseStyles } from 'react-jss';
2 | import { ColorScheme } from '../../utils/theme';
3 |
4 | export const useSideDrawerStyles = createUseStyles({
5 | siderDrawer: {
6 | height: '100%',
7 | background: ColorScheme.WHITE,
8 | boxShadow: '1px 0 7px rgba(0,0,0,0.5)',
9 | position: 'fixed',
10 | top: 0,
11 | left: 0,
12 | width: '70%',
13 | maxWidth: '280px',
14 | zIndex: 200,
15 | transform: 'translateX(-100%)',
16 | transition: 'transform 0.3s ease-out',
17 | '& ul': {
18 | height: '100%',
19 | listStyle: 'none',
20 | display: 'flex',
21 | flexDirection: 'column',
22 | justifyContent: 'center',
23 | },
24 | '& li': {
25 | margin: '0.5rem 0',
26 | },
27 | '& a': {
28 | color: ColorScheme.PRIMARY,
29 | textDecoration: 'none',
30 | fontSize: '1.2rem',
31 | },
32 | '& a:hover': {
33 | color: ColorScheme.ORANGE,
34 | },
35 | '& a:active': {
36 | color: ColorScheme.ORANGE,
37 | },
38 | },
39 | open: {
40 | transform: 'translateX(0)',
41 | },
42 | '@media (min-width: 769px)': {
43 | siderDrawer: {
44 | display: 'none',
45 | },
46 | },
47 | });
48 |
--------------------------------------------------------------------------------
/client/build/Bitcoin.svg:
--------------------------------------------------------------------------------
1 |
2 |
8 |
--------------------------------------------------------------------------------
/client/public/Bitcoin.svg:
--------------------------------------------------------------------------------
1 |
2 |
8 |
--------------------------------------------------------------------------------
/client/build/static/js/runtime-main.844668cf.js:
--------------------------------------------------------------------------------
1 | !function(e){function t(t){for(var n,l,i=t[0],f=t[1],a=t[2],p=0,s=[];p
17 |
30 |
26 | APOLLO
27 |
28 | Banking made easy.
29 |
37 |
39 |
40 | );
41 | }
42 |
43 | return (
44 | <>
45 | 6 | Now it is fully open source. Check the contribution guide [here](CONTRIBUTING.md). 7 | 8 | ## Running 9 | 10 | ### Prerequirement 11 | - Node.js 12 | - PostgreSQL 13 13 | - create database name "apollobank" 14 | - Git clone 15 | ```bash 16 | git clone https://github.com/edwardcdev/apollobank.git 17 | cd apollobank 18 | ``` 19 | 20 | ### Run backend 21 | ```bash 22 | cd server 23 | npm install 24 | npm start 25 | ``` 26 | - check ormconfig.json file to check or update database connection info. 27 | 28 | ### Run frontend 29 | ```bash 30 | cd client 31 | npm install 32 | npm start 33 | ``` 34 | - It will server at http://localhost:3000/ 35 |  36 | 37 | ### Using 38 | - Register fist. 39 |  40 | - And then login. 41 |  42 | - Add account and transaction! Play it! 43 |  44 | 45 | ## Functions 46 | 47 | - Login/register 48 | - Dashboard 49 | - Accounts 50 | - Transactions 51 | - Credit cards 52 | - Settings 53 | - Spending for this month chart 54 | - Dummy data generator using faker 55 | 56 | ## Tech Stack 57 | 58 | ### Server side 59 | 60 | - Apollo Server 61 | - bcryptjs 62 | - cors 63 | - Express 64 | - GraphQL 65 | - faker 66 | - jsonwebtoken 67 | - TypeGraphQL 68 | - TypeORM 69 | - TypeScript 70 | - PostgreSQL 71 | 72 | ### Client side 73 | 74 | - Apollo React Hooks 75 | - FontAwesome Icons 76 | - Material UI 77 | - Recharts 78 | - Formik 79 | - Yup 80 | 81 | ## Todo 82 | 83 | - [ ] Don't allow the user to destroy an account if they are in debt or their account balance > 0 84 | - [ ] When deleting and destroying an account, alert the user with another dialog to check if they would like to proceed with this action. 85 | - [ ] Update the chart on the dashboard to show spending such that the y axis is the users account balance. 86 | - [ ] Sort transactions by date & sort chart data by date. 87 | - [ ] Fetch exchange rates from an API. 88 | -------------------------------------------------------------------------------- /client/build/index.html: -------------------------------------------------------------------------------- 1 |
21 |
30 |
22 |
23 | 🚀
24 |
25 |
26 |
27 |
29 | {cardNumber}
31 |
32 |
41 |
42 | );
43 | };
44 |
45 | export const NoApolloCard: React.FC
33 |
36 | valid thru
34 | {validThru}
35 |
37 |
40 | cvv
38 | {cvv}
39 |
54 |
55 | }
60 | onClick={onCreateNewCardClicked}
61 | >
62 | Create new card
63 |
64 |
65 |
66 | );
67 | };
68 |
--------------------------------------------------------------------------------
/client/build/static/js/2.76c6d5bb.chunk.js.LICENSE.txt:
--------------------------------------------------------------------------------
1 | /*
2 | object-assign
3 | (c) Sindre Sorhus
4 | @license MIT
5 | */
6 |
7 | /*!
8 | Copyright (c) 2017 Jed Watson.
9 | Licensed under the MIT License (MIT), see
10 | http://jedwatson.github.io/classnames
11 | */
12 |
13 | /*! *****************************************************************************
14 | Copyright (c) Microsoft Corporation. All rights reserved.
15 | Licensed under the Apache License, Version 2.0 (the "License"); you may not use
16 | this file except in compliance with the License. You may obtain a copy of the
17 | License at http://www.apache.org/licenses/LICENSE-2.0
18 |
19 | THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
20 | KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
21 | WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
22 | MERCHANTABLITY OR NON-INFRINGEMENT.
23 |
24 | See the Apache Version 2.0 License for specific language governing permissions
25 | and limitations under the License.
26 | ***************************************************************************** */
27 |
28 | /*! decimal.js-light v2.5.0 https://github.com/MikeMcl/decimal.js-light/LICENCE */
29 |
30 | /**
31 | * A better abstraction over CSS.
32 | *
33 | * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
34 | * @website https://github.com/cssinjs/jss
35 | * @license MIT
36 | */
37 |
38 | /** @license React v0.18.0
39 | * scheduler.production.min.js
40 | *
41 | * Copyright (c) Facebook, Inc. and its affiliates.
42 | *
43 | * This source code is licensed under the MIT license found in the
44 | * LICENSE file in the root directory of this source tree.
45 | */
46 |
47 | /** @license React v16.12.0
48 | * react-dom.production.min.js
49 | *
50 | * Copyright (c) Facebook, Inc. and its affiliates.
51 | *
52 | * This source code is licensed under the MIT license found in the
53 | * LICENSE file in the root directory of this source tree.
54 | */
55 |
56 | /** @license React v16.12.0
57 | * react-is.production.min.js
58 | *
59 | * Copyright (c) Facebook, Inc. and its affiliates.
60 | *
61 | * This source code is licensed under the MIT license found in the
62 | * LICENSE file in the root directory of this source tree.
63 | */
64 |
65 | /** @license React v16.12.0
66 | * react.production.min.js
67 | *
68 | * Copyright (c) Facebook, Inc. and its affiliates.
69 | *
70 | * This source code is licensed under the MIT license found in the
71 | * LICENSE file in the root directory of this source tree.
72 | */
73 |
--------------------------------------------------------------------------------
/client/src/components/Charts/Chart.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | ResponsiveContainer,
4 | AreaChart,
5 | Area,
6 | XAxis,
7 | YAxis,
8 | CartesianGrid,
9 | Tooltip,
10 | Legend,
11 | } from 'recharts';
12 | import {
13 | useTransactionsQuery,
14 | TransactionsQueryResult,
15 | Transaction,
16 | } from '../../generated/graphql';
17 | import { useChartStyles } from './Chart.style';
18 |
19 | interface ChartProps {
20 | currency: string;
21 | }
22 |
23 | export const Chart: React.FC
34 |
36 | {
40 | return {
41 | date: new Date(
42 | Date.parse(transaction.date),
43 | ).toLocaleDateString(),
44 | type: transaction.transactionType,
45 | amount: transaction.amount,
46 | };
47 | })
48 | : []
49 | }
50 | margin={{
51 | top: 24,
52 | right: 30,
53 | left: 20,
54 | bottom: 5,
55 | }}
56 | >
57 |
65 |
66 |
67 |
68 | );
69 | };
70 |
--------------------------------------------------------------------------------
/client/src/assets/uk.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
62 |
--------------------------------------------------------------------------------
/client/build/static/media/uk.e5564902.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
62 |
--------------------------------------------------------------------------------
/server/src/index.ts:
--------------------------------------------------------------------------------
1 | import express, { Request, Response } from "express";
2 | import { ApolloServer } from "apollo-server-express";
3 | import { buildSchema } from "type-graphql";
4 | import { UserResolver } from "./resolvers/UserResolver";
5 | import { AccountResolver } from "./resolvers/AccountResolver";
6 | import { TransactionResolver } from "./resolvers/TransactionResolver";
7 | import cookieParser from "cookie-parser";
8 | import { verify } from "jsonwebtoken";
9 | import cors from "cors";
10 | import { User } from "./entity/User";
11 | import { createAccessToken, createRefreshToken } from "./utils/auth";
12 | import { sendRefreshToken } from "./utils/sendRefreshToken";
13 | import { createTypeOrmConnection } from "./utils/createTypeOrmConnection";
14 | import { createConnection } from "typeorm";
15 | import { CardResolver } from "./resolvers/CardResolver";
16 | import "dotenv/config";
17 | import "reflect-metadata";
18 |
19 | (async () => {
20 | const app = express();
21 |
22 | app.use(cookieParser());
23 | app.use(
24 | cors({
25 | origin:
26 | process.env.NODE_ENV === "production"
27 | ? "https://vigilant-goldwasser-9ac664.netlify.app"
28 | : "http://localhost:3000",
29 | credentials: true,
30 | })
31 | );
32 |
33 | app.get("/", (_req: Request, res: Response) => {
34 | res.send("🚀 Server is running");
35 | });
36 |
37 | app.post("/refresh_token", async (req: Request, res: Response) => {
38 | const token = req.cookies.jid;
39 | if (!token) {
40 | return res.send({ ok: false, accessToken: "" });
41 | }
42 |
43 | let payload: any = null;
44 |
45 | try {
46 | payload = verify(token, process.env.REFRESH_TOKEN_SECRET!);
47 | } catch (err) {
48 | console.log(err);
49 | return res.send({ ok: false, accessToken: "" });
50 | }
51 |
52 | // token is valid and can send back access token
53 | const user: User | undefined = await User.findOne({ id: payload.userId });
54 |
55 | if (!user) {
56 | return res.send({ ok: false, accessToken: "" });
57 | }
58 |
59 | if (user.tokenVersion !== payload.tokenVersion) {
60 | return res.send({ ok: true, accessToken: createAccessToken(user) });
61 | }
62 |
63 | sendRefreshToken(res, createRefreshToken(user));
64 |
65 | return res.send({ ok: true, accessToken: createAccessToken(user) });
66 | });
67 |
68 | process.env.NODE_ENV === "production"
69 | ? await createTypeOrmConnection()
70 | : await createConnection();
71 |
72 | const appolloServer: ApolloServer = new ApolloServer({
73 | schema: await buildSchema({
74 | resolvers: [UserResolver, AccountResolver, TransactionResolver, CardResolver],
75 | }),
76 | introspection: true,
77 | playground: true,
78 | context: ({ req, res }) => ({ req, res }),
79 | });
80 |
81 | appolloServer.applyMiddleware({ app, cors: false });
82 |
83 | app.listen(process.env.PORT || 4000, () => {
84 | console.log(`🚀 Server ready at ${process.env.PORT || 4000}${appolloServer.graphqlPath}`);
85 | });
86 | })();
87 |
--------------------------------------------------------------------------------
/client/src/components/Cards/AccountsCard.tsx:
--------------------------------------------------------------------------------
1 | import React, { MouseEvent } from 'react';
2 | import { IconButton, Typography, Divider, Button, ThemeProvider } from '@material-ui/core';
3 | import NavigateNextIcon from '@material-ui/icons/NavigateNext';
4 | import AddIcon from '@material-ui/icons/Add';
5 | import { Title } from '../Typography/Title';
6 | import { ColorScheme, theme } from '../../utils/theme';
7 | import { useAccountsCardStyles, useNoAccountsCardStyles } from './styles/AccountsCard.style';
8 |
9 | interface AccountsCardProps {
10 | svg: any | string;
11 | currencyIcon: string;
12 | fullCurrencyText: string;
13 | balance: number;
14 | iban: string;
15 | onAccountClicked(e: MouseEventSpending (this month)
35 |
35 |
43 | {svg}
36 |
38 |
39 |
41 |
42 |
66 |
67 | }
72 | onClick={onCreateNewAccountClicked}
73 | >
74 | Create new account
75 |
76 |
77 |
78 | );
79 | };
80 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@apollo/react-hooks": "^3.1.3",
7 | "@fortawesome/fontawesome-svg-core": "^1.2.27",
8 | "@fortawesome/free-brands-svg-icons": "^5.12.1",
9 | "@fortawesome/free-solid-svg-icons": "^5.12.1",
10 | "@fortawesome/react-fontawesome": "^0.1.9",
11 | "@material-ui/core": "^4.9.5",
12 | "@material-ui/icons": "^4.9.1",
13 | "@material-ui/lab": "^4.0.0-alpha.45",
14 | "@testing-library/jest-dom": "^5.14.1",
15 | "@testing-library/react": "^12.1.2",
16 | "@testing-library/user-event": "^7.2.1",
17 | "@types/recharts": "^1.8.9",
18 | "apollo-boost": "^0.4.7",
19 | "apollo-cache-inmemory": "^1.6.5",
20 | "apollo-client": "^2.6.8",
21 | "apollo-link": "^1.2.13",
22 | "apollo-link-error": "^1.1.12",
23 | "apollo-link-http": "^1.5.16",
24 | "apollo-link-state": "^0.4.2",
25 | "apollo-link-token-refresh": "^0.2.7",
26 | "chart.js": "^2.9.4",
27 | "formik": "^2.1.4",
28 | "graphql": "^14.6.0",
29 | "graphql-tag": "^2.10.3",
30 | "jwt-decode": "^2.2.0",
31 | "moment": "^2.24.0",
32 | "react": "^16.12.0",
33 | "react-dom": "^16.12.0",
34 | "react-helmet": "^5.2.1",
35 | "react-jss": "^10.0.4",
36 | "react-router-dom": "^5.1.2",
37 | "react-scripts": "^4.0.3",
38 | "recharts": "^1.8.5",
39 | "typescript": "^3.7.5",
40 | "yup": "^0.28.2"
41 | },
42 | "scripts": {
43 | "start": "react-scripts start",
44 | "build": "react-scripts build",
45 | "test": "react-scripts test",
46 | "eject": "react-scripts eject",
47 | "gen": "graphql-codegen --config codegen.yml"
48 | },
49 | "eslintConfig": {
50 | "extends": "react-app"
51 | },
52 | "browserslist": {
53 | "production": [
54 | ">0.2%",
55 | "not dead",
56 | "not op_mini all"
57 | ],
58 | "development": [
59 | "last 1 chrome version",
60 | "last 1 firefox version",
61 | "last 1 safari version"
62 | ]
63 | },
64 | "devDependencies": {
65 | "@graphql-codegen/cli": "^2.2.1",
66 | "@graphql-codegen/typescript": "^1.17.9",
67 | "@graphql-codegen/typescript-operations": "^1.17.8",
68 | "@graphql-codegen/typescript-react-apollo": "^3.1.6",
69 | "@types/graphql": "^14.5.0",
70 | "@types/hapi__joi": "^16.0.12",
71 | "@types/jest": "^27.0.2",
72 | "@types/jwt-decode": "^2.2.1",
73 | "@types/node": "^12.12.28",
74 | "@types/react": "^16.9.22",
75 | "@types/react-datepicker": "^2.11.0",
76 | "@types/react-dom": "^16.9.5",
77 | "@types/react-helmet": "^5.0.15",
78 | "@types/react-router-dom": "^5.1.3",
79 | "@types/yup": "^0.26.32"
80 | }
81 | }
82 |
--------------------------------------------------------------------------------
/client/src/pages/Accounts/Transactions/Transactions.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { TransactionsQuery, Transaction } from '../../../generated/graphql';
3 | import { useAccountStyles } from '../styles/Account.style';
4 | import { Loading } from '../../../components/Loading/Loading';
5 | import { TransactionCard } from '../../../components/Cards/TransactionCard';
6 | import PaymentIcon from '@material-ui/icons/Payment';
7 | import AccountBalanceIcon from '@material-ui/icons/AccountBalance';
8 | import LocalAtmIcon from '@material-ui/icons/LocalAtm';
9 | import ReceiptIcon from '@material-ui/icons/Receipt';
10 |
11 | interface TransactionProps {
12 | account: TransactionsQuery | undefined;
13 | cardNumber: string | undefined;
14 | currencyIcon?: string;
15 | }
16 |
17 | export const Transactions: React.FC
26 |
65 | );
66 | };
67 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing to Apollobank
2 | 👍🎉 First off, thanks for taking the time to contribute! 🎉👍
3 |
27 |
28 |
64 |
29 | {account.transactions.length > 0 &&
30 | account.transactions.map((transaction: Transaction) => {
31 | let transactionIcon: any;
32 |
33 | switch (transaction.transactionType) {
34 | case 'payment':
35 | transactionIcon =
63 | I didn't expect this project to get a large amount of ⭐ because it is only a functional project for my personal practice.
4 |It is already getting over 150 ⭐ in here that's why I am going to make it open source so anyone can attribute it to this project.
5 | 6 | I want to make contributing to this project as easy and transparent as possible, whether it's: 7 | 8 | - Reporting a bug 9 | - Discussing the current state of the code 10 | - Submitting a fix 11 | - Proposing new features 12 | - Becoming a maintainer 13 | 14 | ## We Develop with Github 15 | We use github to host code, to track issues and feature requests, as well as accept pull requests. 16 | 17 | ## We Use [Github Flow](https://guides.github.com/introduction/flow/index.html), So All Code Changes Happen Through Pull Requests 18 | Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests: 19 | 20 | 1. Fork the repo and create your branch from `main`. 21 | 2. If you've added code that should be tested, add tests. 22 | 3. If you've changed APIs, update the documentation. 23 | 4. Ensure the test suite passes. 24 | 5. Make sure your code lints. 25 | 6. Issue that pull request! 26 | 27 | ## Any contributions you make will be under the MIT Software License 28 | In short, when you submit code changes, your submissions are understood to be under the same [MIT License](http://choosealicense.com/licenses/mit/) that covers the project. Feel free to contact the maintainers if that's a concern. 29 | 30 | ## Report bugs using Github's [issues](https://github.com/edwardcdev/apollobank/issues) 31 | We use GitHub issues to track public bugs. Report a bug by [opening a new issue](); it's that easy! 32 | 33 | ## Write bug reports with detail, background, and sample code 34 | [This is an example](http://stackoverflow.com/q/12488905/180626) of a bug report, and I think it's not a bad model. Here's [another example from Craig Hockenberry](http://www.openradar.me/11905408), an app developer whom I greatly respect. 35 | 36 | **Great Bug Reports** tend to have: 37 | 38 | - A quick summary and/or background 39 | - Steps to reproduce 40 | - Be specific! 41 | - Give sample code if you can. 42 | - What you expected would happen 43 | - What actually happens 44 | - Notes (possibly including why you think this might be happening, or stuff you tried that didn't work) 45 | 46 | People *love* thorough bug reports. I'm not even kidding. 47 | 48 | ## Use a Consistent Coding Style 49 | I'm again borrowing these from [Facebook's Guidelines](https://github.com/facebook/draft-js/blob/a9316a723f9e918afde44dea68b5f9f39b7d9b00/CONTRIBUTING.md) 50 | 51 | * 2 spaces for indentation rather than tabs 52 | * You can try running `npm run lint` for style unification 53 | 54 | ## License 55 | By contributing, you agree that your contributions will be licensed under its MIT License. 56 | 57 | ## References 58 | This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/a9316a723f9e918afde44dea68b5f9f39b7d9b00/CONTRIBUTING.md) 59 | -------------------------------------------------------------------------------- /client/src/components/Cards/TransactionCard.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { 3 | Avatar, 4 | Card, 5 | CardHeader, 6 | Collapse, 7 | CardContent, 8 | IconButton, 9 | CardActions, 10 | ThemeProvider, 11 | } from '@material-ui/core'; 12 | import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; 13 | import { theme } from '../../utils/theme'; 14 | import { useTransactionCardStyles } from './styles/TransactionCard.style'; 15 | 16 | interface TransactionCardProps { 17 | title: string; 18 | amount: string; 19 | time: string; 20 | card?: string; 21 | transactionIcon?: any; 22 | currencyIcon?: string; 23 | } 24 | 25 | export const TransactionCard: React.FC
42 |
43 |
46 | {transactionIcon}
47 |
48 | }
49 | title={title}
50 | subheader={time}
51 | style={{ textAlign: 'left' }}
52 | />
53 |
54 |
55 |
62 |
64 |
65 |
66 |
67 |
68 |
74 |
85 |
86 |
87 |
88 | );
89 | };
90 |
--------------------------------------------------------------------------------
/server/src/resolvers/TransactionResolver.ts:
--------------------------------------------------------------------------------
1 | import { Account } from "./../entity/Account";
2 | import { Transaction } from "./../entity/Transaction";
3 | import { User } from "./../entity/User";
4 | import { MyContext } from "./../MyContext";
5 | import { isAuth } from "../middleware";
6 | import { Resolver, Query, UseMiddleware, Ctx, Mutation, Arg, Float } from "type-graphql";
7 | import faker from "faker";
8 |
9 | @Resolver()
10 | export class TransactionResolver {
11 | /**
12 | * Query for returning all transactions for an authenticated users currency account
13 | * @param currency
14 | * @param param1
15 | */
16 | @Query(() => [Transaction])
17 | @UseMiddleware(isAuth)
18 | async transactions(@Arg("currency") currency: string, @Ctx() { payload }: MyContext) {
19 | if (!payload) {
20 | return null;
21 | }
22 |
23 | const owner: User | undefined = await User.findOne({ where: { id: payload.userId } });
24 |
25 | if (owner) {
26 | const account: Account | undefined = await Account.findOne({
27 | where: { owner: owner, currency: currency },
28 | });
29 |
30 | if (account) {
31 | return Transaction.find({ where: { account: account } });
32 | }
33 | }
34 |
35 | return null;
36 | }
37 |
38 | /**
39 | * Mutation for creating a new transaction
40 | * @param currency
41 | * @param param1
42 | */
43 | @Mutation(() => Float)
44 | @UseMiddleware(isAuth)
45 | async createTransaction(@Arg("currency") currency: string, @Ctx() { payload }: MyContext) {
46 | if (!payload) {
47 | return false;
48 | }
49 |
50 | const owner: User | undefined = await User.findOne({ where: { id: payload.userId } });
51 |
52 | if (owner) {
53 | const account: Account | undefined = await Account.findOne({
54 | where: { owner: owner, currency: currency },
55 | });
56 |
57 | if (account) {
58 | // Generate fake financial data using faker
59 | let transactionType: string = faker.finance.transactionType();
60 | let amount: number = parseInt(faker.finance.amount());
61 | let date: Date = faker.date.recent(31);
62 | let balance: number = account.balance;
63 |
64 | if (balance <= 0) {
65 | throw new Error("You do not have the sufficient funds.");
66 | }
67 |
68 | // Update account balance depending on the transaction type faker generates
69 | switch (transactionType) {
70 | case "withdrawal":
71 | balance -= amount;
72 | break;
73 | case "deposit":
74 | balance += amount;
75 | break;
76 | case "payment":
77 | balance -= amount;
78 | break;
79 | case "invoice":
80 | balance -= amount;
81 | break;
82 | }
83 |
84 | try {
85 | await Transaction.insert({
86 | account,
87 | transactionType: transactionType,
88 | date: date,
89 | amount: amount.toString(),
90 | });
91 | await Account.update(
92 | {
93 | id: account.id,
94 | },
95 | { balance: balance }
96 | );
97 | } catch (err) {
98 | console.log(err);
99 | return null;
100 | }
101 | }
102 | }
103 |
104 | // In order to update the total account balance, return the above updated Accounts balance
105 | const updatedAccount = await Account.findOne({ where: { owner: owner, currency: currency } });
106 |
107 | if (updatedAccount) {
108 | return updatedAccount.balance;
109 | }
110 |
111 | return null;
112 | }
113 | }
114 |
--------------------------------------------------------------------------------
/client/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import { ApolloClient } from 'apollo-client';
5 | import { InMemoryCache } from 'apollo-cache-inmemory';
6 | import { HttpLink } from 'apollo-link-http';
7 | import { onError } from 'apollo-link-error';
8 | import { ApolloLink, Observable } from 'apollo-link';
9 | import { ApolloProvider } from '@apollo/react-hooks';
10 | import { getAccessToken, setAccessToken } from './utils/accessToken';
11 | import { TokenRefreshLink } from 'apollo-link-token-refresh';
12 | import jwtDecode from 'jwt-decode';
13 | import { App } from './App';
14 |
15 | // Setup Apollo Client manually without Apollo Boost
16 | // https://www.apollographql.com/docs/react/migrating/boost-migration/
17 |
18 | const cache = new InMemoryCache({});
19 |
20 | const requestLink = new ApolloLink(
21 | (operation, forward) =>
22 | new Observable(observer => {
23 | let handle: any;
24 | Promise.resolve(operation)
25 | .then(operation => {
26 | const accessToken = getAccessToken();
27 | operation.setContext({
28 | headers: {
29 | authorization: accessToken ? `Bearer ${accessToken}` : '',
30 | },
31 | });
32 | })
33 | .then(() => {
34 | handle = forward(operation).subscribe({
35 | next: observer.next.bind(observer),
36 | error: observer.error.bind(observer),
37 | complete: observer.complete.bind(observer),
38 | });
39 | })
40 | .catch(observer.error.bind(observer));
41 |
42 | return () => {
43 | if (handle) handle.unsubscribe();
44 | };
45 | }),
46 | );
47 |
48 | const client = new ApolloClient({
49 | link: ApolloLink.from([
50 | new TokenRefreshLink({
51 | accessTokenField: 'accessToken',
52 | isTokenValidOrUndefined: () => {
53 | const token = getAccessToken();
54 |
55 | if (!token) {
56 | return true;
57 | }
58 |
59 | try {
60 | const { exp } = jwtDecode(token);
61 | if (Date.now() >= exp * 1000) {
62 | return false;
63 | } else {
64 | return true;
65 | }
66 | } catch {
67 | return false;
68 | }
69 | },
70 | fetchAccessToken: () => {
71 | return fetch((process.env.REACT_APP_SERVER_URL as string) + '/refresh_token', {
72 | method: 'POST',
73 | credentials: 'include',
74 | });
75 | },
76 | handleFetch: accessToken => {
77 | setAccessToken(accessToken);
78 | },
79 | handleError: err => {
80 | console.warn('Your refresh token is invalid. Try to relogin');
81 | console.error(err);
82 | },
83 | }),
84 | onError(({ graphQLErrors, networkError }) => {
85 | console.log(graphQLErrors);
86 | console.log(networkError);
87 | }),
88 | requestLink,
89 | new HttpLink({
90 | uri: process.env.REACT_APP_SERVER_URL + '/graphql',
91 | credentials: 'include',
92 | }),
93 | ]),
94 | cache,
95 | });
96 |
97 | ReactDOM.render(
98 | 74 |
75 | Apollo card: {card}
76 |
77 |
78 | Amount:{' '}
79 |
80 | {currencyIcon}
81 | {amount}
82 |
83 |
84 |
71 |
75 |
76 | (
86 |
98 |
99 |
100 |
32 | {
44 | setSubmitting(true);
45 |
46 | // On login button click, call the login mutation
47 | try {
48 | const response: ExecutionResult = await login({
49 | variables: {
50 | email: data.email,
51 | password: data.password,
52 | },
53 | update: (store, { data }) => {
54 | if (!data) {
55 | return null;
56 | }
57 | store.writeQuery({
58 | query: MeDocument,
59 | data: {
60 | me: data.login.user,
61 | },
62 | });
63 | },
64 | });
65 |
66 | // If the login was successful, provide the user with an access token that can be used for
67 | // routes which require authentication
68 | // Route the user to the dashboard
69 | if (response && response.data) {
70 | setAccessToken(response.data.login.accessToken);
71 | history.push('/dashboard');
72 | setSubmitting(false);
73 | resetForm();
74 | }
75 | } catch (error) {
76 | const errorMessage: string = error.message.split(':')[1];
77 | setErrorMessage(errorMessage);
78 | setSubmitting(false);
79 | }
80 | }}
81 | >
82 | {({ isSubmitting }) => (
83 |
130 |
131 | );
132 | };
133 |
--------------------------------------------------------------------------------
/server/src/resolvers/UserResolver.ts:
--------------------------------------------------------------------------------
1 | import { registerSchema, loginSchema, changePasswordSchema } from "./../utils/validation";
2 | import { createRefreshToken, createAccessToken } from "../utils/auth";
3 | import {
4 | Resolver,
5 | Query,
6 | Mutation,
7 | Arg,
8 | Field,
9 | ObjectType,
10 | Ctx,
11 | UseMiddleware,
12 | Int,
13 | } from "type-graphql";
14 | import { hash, compare } from "bcryptjs";
15 | import { User } from "../entity/User";
16 | import { MyContext } from "../MyContext";
17 | import { isAuth } from "../middleware";
18 | import { sendRefreshToken } from "../utils/sendRefreshToken";
19 | import { ErrorMessages } from "../utils/messages";
20 | import { getConnection } from "typeorm";
21 | import { verify } from "jsonwebtoken";
22 |
23 | @ObjectType()
24 | class LoginResponse {
25 | @Field()
26 | accessToken: string;
27 |
28 | @Field(() => User)
29 | user: User;
30 | }
31 |
32 | @Resolver()
33 | export class UserResolver {
34 | /**
35 | * Query to return the current user
36 | * Must first check that the user contains the secret token in the authorization header
37 | * If the token is found, use jwt to verify the token
38 | * If verified, return the user
39 | * @param context
40 | */
41 | @Query(() => User, { nullable: true })
42 | me(@Ctx() context: MyContext) {
43 | const authorization: string | undefined = context.req.headers["authorization"];
44 |
45 | if (!authorization) {
46 | return null;
47 | }
48 |
49 | try {
50 | const token: string = authorization.split(" ")[1];
51 | const payload: any = verify(token, process.env.ACCESS_TOKEN_SECRET!);
52 | context.payload = payload as any;
53 | return User.findOne(payload.userId);
54 | } catch (err) {
55 | console.log(err);
56 | return null;
57 | }
58 | }
59 |
60 | /**
61 | * Mutation to logout the user
62 | * Remove the refresh token once logged out
63 | * @param param0
64 | */
65 | @Mutation(() => Boolean)
66 | async logout(@Ctx() { res }: MyContext) {
67 | sendRefreshToken(res, "");
68 | return true;
69 | }
70 |
71 | /**
72 | * Mutation to revoke the refresh token for a user
73 | * @param userId
74 | */
75 | @Mutation(() => Boolean)
76 | async revokeRefreshTokensForUser(@Arg("userId", () => Int) userId: number) {
77 | await getConnection().getRepository(User).increment({ id: userId }, "tokenVersion", 1);
78 |
79 | return true;
80 | }
81 |
82 | /**
83 | * Mutation to login
84 | * Must use the bcryptjs compare function to verify the users hashed password
85 | * If verified, send a refresh token, create an access token and login in the user
86 | * @param email
87 | * @param password
88 | * @param param2
89 | */
90 | @Mutation(() => LoginResponse)
91 | async login(
92 | @Arg("email") email: string,
93 | @Arg("password") password: string,
94 | @Ctx() { res }: MyContext
95 | ): Promise
33 |
35 | {errorMessage.length > 0 && (
36 | Login
34 |
37 |
39 | )}
40 |
84 |
127 |
128 | )}
129 |
31 | {
54 | setSubmitting(true);
55 |
56 | // On the register button click, call the register mutation
57 | const response = await register({
58 | variables: {
59 | firstName: data.firstName,
60 | lastName: data.lastName,
61 | email: data.email,
62 | password: data.password,
63 | streetAddress: data.streetAddres,
64 | postCode: data.postCode,
65 | city: data.city,
66 | country: data.country,
67 | dateOfBirth: data.dateOfBirth,
68 | },
69 | });
70 |
71 | // if the register was successful, route the user to the login page
72 | if (response.data?.register) {
73 | history.push('/login');
74 | setSubmitting(false);
75 | resetForm();
76 | } else {
77 | setErrorMessage('User with that email already exists.');
78 | setSubmitting(false);
79 | }
80 | }}
81 | >
82 | {({ isSubmitting }) => (
83 |
173 |
174 | );
175 | };
176 |
--------------------------------------------------------------------------------
/server/src/resolvers/AccountResolver.ts:
--------------------------------------------------------------------------------
1 | import { ErrorMessages } from "./../utils/messages";
2 | import { createRandomBicCode } from "./../utils/createRandom";
3 | import { isAuth } from "../middleware";
4 | import {
5 | Query,
6 | Resolver,
7 | Mutation,
8 | Ctx,
9 | UseMiddleware,
10 | Arg,
11 | ObjectType,
12 | Field,
13 | } from "type-graphql";
14 | import { MyContext } from "../MyContext";
15 | import { User } from "../entity/User";
16 | import { Account } from "../entity/Account";
17 | import { createRandomSortCode, createRandomIbanCode } from "../utils/createRandom";
18 | import { SuccessMessages } from "../utils/messages";
19 |
20 | @ObjectType()
21 | class AccountResponse {
22 | @Field(() => Account)
23 | account: Account;
24 |
25 | @Field(() => String)
26 | message: String;
27 | }
28 |
29 | @Resolver()
30 | export class AccountResolver {
31 | /**
32 | * Used to query and find all the accounts for an authenticated user
33 | * @param param0
34 | */
35 | @Query(() => [Account])
36 | @UseMiddleware(isAuth)
37 | async accounts(@Ctx() { payload }: MyContext) {
38 | if (!payload) {
39 | return null;
40 | }
41 |
42 | const owner: User | undefined = await User.findOne({ where: { id: payload.userId } });
43 |
44 | if (owner) {
45 | return Account.find({ where: { owner: owner } });
46 | }
47 |
48 | return null;
49 | }
50 |
51 | /**
52 | * Used to query and find a single account specified by the currency (EUR account, USD account or GBP account)
53 | * @param currency
54 | * @param param1
55 | */
56 | @Query(() => Account)
57 | @UseMiddleware(isAuth)
58 | async account(
59 | @Arg("currency") currency: string,
60 | @Ctx() { payload }: MyContext
61 | ): Promise
32 |
34 | {errorMessage.length > 0 && (
35 | Sign Up
33 |
36 |
38 | )}
39 |
84 |
170 |
171 | )}
172 |
121 |
123 | );
124 | }
125 |
126 | const determineCurrencyIcon = (c: string): JSX.Element | undefined => {
127 | switch (c) {
128 | case 'EUR':
129 | return
284 | {renderDialog()}
285 |
286 |
287 |
300 |
301 |
302 |
304 |
305 |
306 |
307 |
308 |
330 | {data.accounts.length > 0 &&
331 | data.accounts.map((account: Account) => {
332 | let svg: any | string;
333 | let currencyIcon: string = '';
334 | let fullCurrencyText: string = '';
335 |
336 | switch (account.currency) {
337 | case GLOBAL_CURRENCIES[0]:
338 | svg =
355 |
356 | ,
364 | ) => handleAccountClicked(e, account)}
365 | />
366 |
367 |
368 | );
369 | })}
370 | {data.accounts.length <= 2 && renderNoAccountsCard()}
371 |
372 |
373 |
374 |
378 | {cards.data &&
379 | cards.data.cards &&
380 | cards.data.cards.length > 0 &&
381 | cards.data.cards.map(card => {
382 | return (
383 |
384 |
385 |
400 |
401 | );
402 | })}
403 | {cards.data && cards.data.cards.length <= 2 && renderNoApolloCard()}
404 |
405 |
406 |
407 |
408 | );
409 | };
410 |
--------------------------------------------------------------------------------
294 |
298 | {data && data.accounts.length > 0 ? renderChartOptions() : undefined}
299 |
295 |
297 |
316 |
329 |
317 |
319 |
326 | Total balance: £{totalBalance}
327 |
328 |
375 |
377 |