├── .gitignore ├── types.js ├── .babelrc ├── client ├── styles │ ├── logo.png │ ├── plus.png │ └── index.css ├── components │ ├── Button.tsx │ ├── FormInput.tsx │ ├── MainDisplay.tsx │ ├── NavBar.tsx │ ├── LoginRoot.tsx │ ├── MainContainer.tsx │ ├── CardDisplay.tsx │ ├── RootPage.tsx │ ├── NewAppDetails.tsx │ └── SignUp.tsx ├── index.tsx └── index.html ├── server ├── models │ ├── postgres_create.sql │ ├── model.ts │ └── model.js ├── routers │ ├── signupRoute.js │ ├── signupRouter.ts │ ├── oAuthRouter.js │ ├── oAuthRouter.ts │ ├── userRoute.js │ └── userRoute.ts ├── server.js ├── server.ts └── controllers │ ├── authController.ts │ ├── userController.ts │ ├── applicationController.ts │ ├── authController.js │ ├── userController.js │ └── applicationController.js ├── types.ts ├── postcss.config.js ├── config.env ├── babel.config.js ├── README.md ├── dist └── index.html ├── tailwind.config.cjs ├── .eslintrc.json ├── webpack.config.js ├── package.json └── tsconfig.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /types.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | exports.__esModule = true; 3 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } -------------------------------------------------------------------------------- /client/styles/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jigglypuff36/Application-Tracker/HEAD/client/styles/logo.png -------------------------------------------------------------------------------- /client/styles/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jigglypuff36/Application-Tracker/HEAD/client/styles/plus.png -------------------------------------------------------------------------------- /server/models/postgres_create.sql: -------------------------------------------------------------------------------- 1 | CREATE TABLE user_info ( 2 | user_id bigserial not null primary key, 3 | username varchar(25) not null 4 | ) -------------------------------------------------------------------------------- /client/styles/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss/base"; 2 | @import "tailwindcss/components"; 3 | @import "tailwindcss/utilities"; 4 | 5 | #test { 6 | color: red; 7 | } -------------------------------------------------------------------------------- /types.ts: -------------------------------------------------------------------------------- 1 | import { RequestHandler } from 'express'; 2 | 3 | export type ErrorType = { 4 | log: string; 5 | status: number; 6 | message: { err: string }; 7 | }; -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const tailwindcss = require('tailwindcss'); 2 | const autoprefixer = require('autoprefixer'); 3 | 4 | module.exports = { 5 | plugins: [tailwindcss('./tailwind.config.cjs'), autoprefixer], 6 | }; -------------------------------------------------------------------------------- /client/components/Button.tsx: -------------------------------------------------------------------------------- 1 | // ./components/Button.js 2 | import React, { useState } from "react"; 3 | function Button(props) { 4 | 5 | return ( 6 | 7 | ); 8 | } 9 | export default Button; -------------------------------------------------------------------------------- /config.env: -------------------------------------------------------------------------------- 1 | PG_URL=postgres://hcbdsxtj:QNIf6lS3Q3k_RPZXcfd6xLLcYUTK3Pe3@peanut.db.elephantsql.com/hcbdsxtj 2 | const GOOGLE_CLIENT_ID = 423300255292-6bv81ekcrsb18ghje1iupihj2vgc18jo.apps.googleusercontent.com 3 | const GOOGLE_CLIENT_SECRET = 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 -------------------------------------------------------------------------------- /client/components/FormInput.tsx: -------------------------------------------------------------------------------- 1 | // ./components/Button.js 2 | import React, { useState } from "react"; 3 | function FormInput(props) { 4 | 5 | return ( 6 | 7 | ); 8 | } 9 | export default FormInput; -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@babel/preset-env', 4 | ['@babel/preset-react', { runtime: 'automatic' }], 5 | ], 6 | overrides: [ 7 | { 8 | test: './vendor/something.umd.js', 9 | sourceType: 'script', 10 | }, 11 | ], 12 | }; 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Welcome to your organization's demo respository 2 | This code repository (or "repo") is designed to demonstrate the best GitHub has to offer with the least amount of noise. 3 | 4 | The repo includes an `index.html` file (so it can render a web page), two GitHub Actions workflows, and a CSS stylesheet dependency. 5 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | Application Tracker
-------------------------------------------------------------------------------- /server/models/model.ts: -------------------------------------------------------------------------------- 1 | import {Pool} from 'pg'; 2 | require('dotenv').config(); 3 | 4 | const PG_URI: any = ''; 5 | 6 | const pool = new Pool({ 7 | connectionString: PG_URI 8 | }); 9 | 10 | 11 | export const db = { 12 | query: (text:any) => { 13 | console.log('executed query',text); 14 | return pool.query(text); 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /tailwind.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: ['./client/**/*.{ts,tsx}', './dist/index.html'], 3 | theme: { 4 | extend: { 5 | colors: { 6 | primary: '#1B73E8', 7 | }, 8 | }, 9 | }, 10 | plugins: [require('daisyui')], 11 | daisyui: { 12 | styled: true, 13 | themes: ['night', 'retro', 'cyberpunk'], 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /server/models/model.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | exports.__esModule = true; 3 | exports.db = void 0; 4 | var pg_1 = require("pg"); 5 | require('dotenv').config(); 6 | var PG_URI = ''; 7 | var pool = new pg_1.Pool({ 8 | connectionString: PG_URI 9 | }); 10 | exports.db = { 11 | query: function (text) { 12 | console.log('executed query', text); 13 | return pool.query(text); 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /server/routers/signupRoute.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | exports.__esModule = true; 3 | var express = require('express'); 4 | var router = express.Router(); 5 | var signupController_1 = require("../controllers/signupController"); 6 | router.post('/', signupController_1.signupController.createUser, function (req, res) { 7 | return res.status(200).send(res.locals.newUser); 8 | }); 9 | exports["default"] = router; 10 | -------------------------------------------------------------------------------- /client/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom'; 3 | import MainContainer from './components/MainContainer'; 4 | import './styles/index.css' 5 | const App = () => { 6 | return ( 7 | 8 | ); 9 | } 10 | // const container:HTMLElement = document.getElementById('root'); 11 | 12 | // const root: Root = createRoot(container) 13 | // root.render() 14 | render(, document.querySelector('#root')); -------------------------------------------------------------------------------- /client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Application Tracker 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /server/routers/signupRouter.ts: -------------------------------------------------------------------------------- 1 | import { Request, Response, NextFunction, ErrorRequestHandler } from 'express'; 2 | const express = require('express') 3 | const router = express.Router(); 4 | 5 | 6 | 7 | 8 | router.post('/', 9 | 10 | (req: Request, res: Response) => { 11 | return res.status(200).send('Account Successfully created') 12 | } 13 | ) 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | module.exports = router; -------------------------------------------------------------------------------- /client/components/MainDisplay.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import CardDisplay from './CardDisplay'; 3 | 4 | const MainDisplay = () => { 5 | // iterate through the data and create a card for each company they have applied for 6 | 7 | return ( 8 |
9 |
10 |
11 |
12 | 13 | 14 |
15 |
16 |
17 |
18 | ); 19 | }; 20 | 21 | export default MainDisplay; 22 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "env": { 4 | "node": true, 5 | "browser": true, 6 | "es2021": true, 7 | "jest": true 8 | }, 9 | "plugins": ["react"], 10 | "extends": ["eslint:recommended", "plugin:react/recommended"], 11 | "parserOptions": { 12 | "sourceType": "module", 13 | "ecmaFeatures": { 14 | "jsx": true 15 | } 16 | }, 17 | "rules": { 18 | "indent": ["warn", 2], 19 | "no-unused-vars": ["off", { "vars": "local" }], 20 | "no-case-declarations": "off", 21 | "prefer-const": "warn", 22 | "quotes": ["warn", "single"], 23 | "react/prop-types": "off", 24 | "semi": ["warn", "always"], 25 | "space-infix-ops": "warn" 26 | }, 27 | "settings": { 28 | "react": { "version": "detect"} 29 | } 30 | } -------------------------------------------------------------------------------- /server/routers/oAuthRouter.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | exports.__esModule = true; 3 | var express = require('express'); 4 | var passport = require('passport'); 5 | // import { authController } from '../controllers/authController'; 6 | // require('../controllers/authController'); 7 | require("../controllers/authController"); 8 | var oauthRouter = express.Router(); 9 | var successLoginUrl = '/login/success'; 10 | var errorLoginUrl = '/login/error'; 11 | oauthRouter.get('/login/google', passport.authenticate('google', { scope: ['profile', 12 | 'email'] })); 13 | oauthRouter.get('/google/callback', passport.authenticate('google', { 14 | // failureMessage: 'Cannot Login to Google, Please try again later', 15 | failureRedirect: errorLoginUrl, 16 | successRedirect: successLoginUrl 17 | }), function (req, res) { 18 | console.log('User: ', req.user); 19 | // res.send('Thank you for signing in!'); 20 | res.send('success'); 21 | }); 22 | // oauthRouter.get('/protected', (req: Request, res: Response) => { 23 | // res.status(200).send('Hello!') 24 | // }) 25 | exports["default"] = oauthRouter; 26 | -------------------------------------------------------------------------------- /server/routers/oAuthRouter.ts: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const passport = require('passport'); 3 | import { Request, Response, NextFunction } from 'express'; 4 | import { request } from 'http'; 5 | // import { authController } from '../controllers/authController'; 6 | // require('../controllers/authController'); 7 | 8 | import '../controllers/authController' 9 | 10 | const oauthRouter = express.Router(); 11 | 12 | const successLoginUrl = '/login/success'; 13 | const errorLoginUrl = '/login/error'; 14 | 15 | oauthRouter.get('/login/google', 16 | passport.authenticate('google', { scope: ['profile', 17 | 'email'] }) 18 | ); 19 | 20 | oauthRouter.get('/google/callback', 21 | passport.authenticate('google', 22 | { 23 | // failureMessage: 'Cannot Login to Google, Please try again later', 24 | failureRedirect: errorLoginUrl, 25 | successRedirect: successLoginUrl 26 | }), 27 | (req: Request, res: Response) => { 28 | console.log('User: ', req.user); 29 | // res.send('Thank you for signing in!'); 30 | res.send('success') 31 | }) 32 | 33 | 34 | 35 | // oauthRouter.get('/protected', (req: Request, res: Response) => { 36 | // res.status(200).send('Hello!') 37 | // }) 38 | 39 | 40 | export default oauthRouter; -------------------------------------------------------------------------------- /server/routers/userRoute.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | exports.__esModule = true; 3 | var express = require('express'); 4 | var router = express.Router(); 5 | var userController_1 = require("../controllers/userController"); 6 | var applicationController_1 = require("../controllers/applicationController"); 7 | router.post('/login', userController_1.userController.isLoggedIn, 8 | // userController.getInfo, 9 | function (req, res) { 10 | return res.status(200).send(res.locals.userInfo); 11 | }); 12 | router.post('/:id/addApplication', applicationController_1.applicationController.addApplication, function (req, res) { 13 | return res.status(200).send('successfully added'); 14 | }); 15 | router.post('/', userController_1.userController.createUser, function (req, res) { 16 | return res.status(200).send(res.locals.newUser); 17 | }); 18 | router.get('/:id/getApplications', applicationController_1.applicationController.getApplications, function (req, res) { 19 | return res.status(200).json(res.locals.applications); 20 | }); 21 | router.patch('/:id/:appId/updateApplication', applicationController_1.applicationController.updateApplication, function (req, res) { 22 | return res.status(200).send('successfully patched'); 23 | }); 24 | router["delete"]('/:id/:appId/deleteApplication', applicationController_1.applicationController.deleteApplication, function (req, res) { 25 | return res.status(200).send('successfully deleted'); 26 | }); 27 | exports["default"] = router; 28 | -------------------------------------------------------------------------------- /server/routers/userRoute.ts: -------------------------------------------------------------------------------- 1 | import { Request, Response, NextFunction, ErrorRequestHandler } from 'express'; 2 | const express = require('express') 3 | const router = express.Router() 4 | import {userController} from '../controllers/userController' 5 | import {applicationController} from '../controllers/applicationController'; 6 | 7 | 8 | 9 | router.post('/login', 10 | userController.isLoggedIn, 11 | // userController.getInfo, 12 | (req:Request, res:Response) => { 13 | return res.status(200).send(res.locals.userInfo) 14 | }); 15 | 16 | router.post('/:id/addApplication',applicationController.addApplication, (req:Request, res:Response) => { 17 | return res.status(200).send('successfully added') 18 | }); 19 | 20 | router.post('/', 21 | userController.createUser, 22 | (req: Request, res: Response) => { 23 | return res.status(200).send(res.locals.newUser) 24 | }); 25 | 26 | router.get('/:id/getApplications', applicationController.getApplications, (req:Request, res:Response) => { 27 | return res.status(200).json(res.locals.applications) 28 | }); 29 | 30 | router.patch('/:id/:appId/updateApplication', applicationController.updateApplication, (req:Request, res:Response) => { 31 | return res.status(200).send('successfully patched') 32 | }); 33 | 34 | router.delete('/:id/:appId/deleteApplication', applicationController.deleteApplication, (req:Request, res:Response) => { 35 | return res.status(200).send('successfully deleted') 36 | }); 37 | 38 | 39 | 40 | export default router; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const webpack = require('webpack'); 4 | const e = require('express'); 5 | 6 | module.exports = { 7 | entry: './client/index.tsx', 8 | mode: process.env.NODE_ENV, 9 | output: { 10 | path: path.join(__dirname, 'dist'), 11 | publicPath: '/', 12 | filename: 'bundle.js' 13 | }, 14 | devtool: 'eval-source-map', 15 | devServer: { 16 | proxy: { 17 | '/': 'http://localhost:3000', 18 | '/api/**': 'http://localhost:3000', 19 | }, 20 | compress: true, 21 | port: 8080, 22 | historyApiFallback: true, 23 | }, 24 | plugins: [new HtmlWebpackPlugin({ 25 | template: './client/index.html', 26 | filename: 'index.html' 27 | }), 28 | ], 29 | module: { 30 | rules: [ 31 | { 32 | test: /\.(ts|tsx)$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: 'babel-loader', 36 | options: { 37 | presets: ['@babel/preset-env', '@babel/preset-react'], 38 | }, 39 | }, 40 | }, 41 | { 42 | test: /\.(sa|sc|c)ss$/, 43 | use: ['style-loader', 'css-loader', 'postcss-loader'], 44 | }, 45 | { 46 | exclude: /node_modules/, 47 | }, 48 | { 49 | test: /\.png|svg|jpg|gif$/, 50 | use: ['file-loader'], 51 | }, 52 | ], 53 | }, 54 | resolve: { 55 | extensions: ['.tsx', '.tx', '.js', '.jsx', '.css'], 56 | }, 57 | } 58 | -------------------------------------------------------------------------------- /client/components/NavBar.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import '../styles/index.css'; 3 | import NewAppDetails from './NewAppDetails' 4 | const NavBar = ({addAppFunc, setApp}) => { 5 | 6 | 7 | return ( 8 |
9 |
10 | App Tracker 11 |
12 |
13 |
14 | 19 |
    23 | 24 |
25 |
26 |
27 | 32 | 49 |
50 |
51 |
52 | ); 53 | }; 54 | export default NavBar; -------------------------------------------------------------------------------- /client/components/LoginRoot.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // end point /api/oauth/login/google 3 | const LoginRoot = () => { 4 | return ( 5 | 41 |
42 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | ); 53 | }; 54 | 55 | export default LoginRoot; 56 | -------------------------------------------------------------------------------- /server/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | exports.__esModule = true; 3 | var path = require('path'); 4 | var express = require('express'); 5 | var session = require('express-session'); 6 | var cors = require('cors'); 7 | // const passport = require('passport') 8 | require('dotenv').config(); 9 | var userRoute_1 = require("./routers/userRoute"); 10 | var oAuthRouter_1 = require("./routers/oAuthRouter"); 11 | // import { authController } from './controllers/authController'; 12 | // require('./controllers/authController'); 13 | // require('passport'); 14 | var passport = require("passport"); 15 | // import session from 'express-session'; 16 | // require('./controllers/authController'); 17 | require("./controllers/authController"); 18 | var app = express(); 19 | var PORT = 3000; 20 | app.use(express.json()); 21 | app.use(express.urlencoded({ extended: true })); 22 | app.use(cors()); 23 | app.use(session({ 24 | // resave: false, 25 | // saveUninitialized: true, 26 | secret: 'Secret' 27 | })); 28 | //not sure if this is working 29 | app.use(passport.initialize()); 30 | app.use(passport.session()); 31 | if (process.env.NODE_ENV) { 32 | app.use('/', express.static(path.join(__dirname, '../dist'))); 33 | } 34 | app.use('/api/user', userRoute_1["default"]); 35 | app.use('/login/success', function (req, res) { 36 | return res.status(200).send('welcome'); 37 | }); 38 | app.use('/login/error', function (req, res) { 39 | return res.status(200).send('error loggin in w google'); 40 | }); 41 | app.use('/api/oauth', oAuthRouter_1["default"]); 42 | //redirect to page 404 when endpoint does not exist 43 | app.use('*', function (req, res) { 44 | return res.status(404).send('404 Page Not Found'); 45 | }); 46 | //global error handling 47 | app.use(function (err, req, res, next) { 48 | var defaultErr = { 49 | log: 'Express error handler caught unknown middleware error', 50 | status: 500, 51 | message: { err: "An error occurred ".concat(err) } 52 | }; 53 | var errorObj = Object.assign({}, defaultErr, err); 54 | console.log(errorObj.log); 55 | return res.status(errorObj.status).json(errorObj.message); 56 | }); 57 | //start app on port 58 | app.listen(PORT, function () { 59 | console.log("Server listening on port: ".concat(PORT, "...")); 60 | }); 61 | module.exports = app; 62 | -------------------------------------------------------------------------------- /client/components/MainContainer.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import '../styles/index.css'; 3 | import NavBar from './NavBar'; 4 | import MainDisplay from './MainDisplay'; 5 | import RootPage from './RootPage'; 6 | const MainContainer = () => { 7 | const [isLogged, setIsLogged] = useState(false); 8 | const [displayMode, setDisplayMode] = useState(''); 9 | // const [addApp, setAddApp] = useState('') 10 | const [company, setCompany] = useState(''); 11 | // const [status, setStatus] = useState('') 12 | // const [resume, setResume] = useState('') 13 | 14 | const [app, setApp] = useState({ company }); 15 | console.log(app, ' line 13'); 16 | // useEffect(() => { 17 | // return 18 | // }, [app]) 19 | // iterate through the data. 1x card display per entry 20 | // function for that card 21 | // opens the card and shows you the info 22 | const handleLogged = () => { 23 | console.log(isLogged); 24 | setIsLogged(true); 25 | }; 26 | 27 | const addAppFunc = () => { 28 | //setAddApp(sadfsadf) 29 | console.log('this adds another line'); 30 | }; 31 | 32 | const removeApp = () => { 33 | console.log('this removes'); 34 | }; 35 | 36 | const loginBtn = () => { 37 | console.log('logging'); 38 | //fetch req here 39 | }; 40 | // if the user is logged in (true) it will display MainContainer 41 | // if the user is not logged in (false) then it will display NewApplication(sign in or sign up) 42 | // displayModes would be 'rootPage' (sign up or sign in) ** 'mainDisplay' (Main Display) ** 'resume' (view their resumes) 43 | // fetch request when you log in to get all the user data 44 | // turn NewApplication component into one and pass it in here on Main Container if the user is Logged off(false) 45 | // pass in Main Container to index.tsx . have that with only one Component like 46 | // prop drill from Main Container. Main Container will contain all the displays and the navbar 47 | if (!isLogged) { 48 | return ( 49 |
50 | 51 |
52 | ); 53 | } else { 54 | return ( 55 |
56 | 57 | 58 |
59 | ); 60 | } 61 | }; 62 | 63 | export default MainContainer; 64 | -------------------------------------------------------------------------------- /client/components/CardDisplay.tsx: -------------------------------------------------------------------------------- 1 | import { array } from 'prop-types'; 2 | import React from 'react'; 3 | 4 | const CardDisplay = () => { 5 | // iterate through the data and create a card for each company they have applied for 6 | // const newCard = []; 7 | // for (let i = 0; i < asdf; i++){ 8 | //
9 | //
10 | //

{company}

11 | //

status

12 | //
13 | // 30 | //
31 | //
32 | //
33 | // } 34 | 35 | 36 | 37 | return ( 38 |
39 |
40 |

Company Name!

41 |

status

42 |
43 | 60 |
61 |
62 |
63 | ); 64 | }; 65 | 66 | export default CardDisplay; 67 | -------------------------------------------------------------------------------- /server/server.ts: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const express = require('express'); 3 | const session = require('express-session'); 4 | const cors = require('cors'); 5 | // const passport = require('passport') 6 | require('dotenv').config(); 7 | import { Request, Response, NextFunction, ErrorRequestHandler } from 'express'; 8 | import userRoute from './routers/userRoute'; 9 | import oauthRouter from './routers/oAuthRouter'; 10 | import { ErrorType } from '../types'; 11 | import { db } from './models/model'; 12 | // import { authController } from './controllers/authController'; 13 | // require('./controllers/authController'); 14 | // require('passport'); 15 | import * as passport from 'passport'; 16 | // import session from 'express-session'; 17 | // require('./controllers/authController'); 18 | import './controllers/authController'; 19 | 20 | const app = express(); 21 | const PORT = 3000; 22 | 23 | app.use(express.json()); 24 | app.use(express.urlencoded({ extended: true })); 25 | app.use(cors()); 26 | 27 | app.use( 28 | session({ 29 | // resave: false, 30 | // saveUninitialized: true, 31 | secret: 'Secret', 32 | }) 33 | ); 34 | //not sure if this is working 35 | app.use(passport.initialize()); 36 | app.use(passport.session()); 37 | 38 | if (process.env.NODE_ENV) { 39 | app.use('/', express.static(path.join(__dirname, '../dist'))); 40 | } 41 | 42 | app.use('/api/user', userRoute); 43 | 44 | app.use('/login/success', (req: Request, res: Response) => { 45 | return res.status(200).send('welcome'); 46 | }); 47 | 48 | app.use('/login/error', (req: Request, res: Response) => { 49 | return res.status(200).send('error loggin in w google'); 50 | }); 51 | 52 | app.use('/api/oauth', oauthRouter); 53 | 54 | //redirect to page 404 when endpoint does not exist 55 | app.use('*', (req: Request, res: Response) => { 56 | return res.status(404).send('404 Page Not Found'); 57 | }); 58 | 59 | //global error handling 60 | app.use((err: unknown, req: Request, res: Response, next: NextFunction) => { 61 | const defaultErr: ErrorType = { 62 | log: 'Express error handler caught unknown middleware error', 63 | status: 500, 64 | message: { err: `An error occurred ${err}` }, 65 | }; 66 | const errorObj = Object.assign({}, defaultErr, err); 67 | console.log(errorObj.log); 68 | return res.status(errorObj.status).json(errorObj.message); 69 | }); 70 | 71 | //start app on port 72 | app.listen(PORT, () => { 73 | console.log(`Server listening on port: ${PORT}...`); 74 | }); 75 | 76 | module.exports = app; 77 | -------------------------------------------------------------------------------- /client/components/RootPage.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import LoginRoot from './LoginRoot'; 3 | import SignUp from './SignUp'; 4 | const RootPage = ({ handleLogged }) => { 5 | const loginHandler = async (e) => { 6 | e.preventDefault(); 7 | const userObj = { 8 | username: e.target.username.value, 9 | password: e.target.password.value, 10 | }; 11 | // console.log(userObj); 12 | fetch(`http://localhost:8080/api/user/login`, { 13 | method: 'POST', 14 | headers: { 15 | 'Content-Type': 'application/json', 16 | }, 17 | body: JSON.stringify(userObj), 18 | }) 19 | .then((response) => response.json()) 20 | .then((data) => { 21 | console.log('response to the login attempt on login ', data); 22 | if (data) { 23 | handleLogged(); 24 | } 25 | }); 26 | }; 27 | //asdf 28 | return ( 29 |
30 |
31 |
32 |

Hello there

33 |

34 | Track your application progress with AppTracker 35 |

36 |
37 | 40 | 47 | 48 | 51 | 58 |
59 | 66 |
67 |

OR

68 |
69 |
70 | 71 |
72 |
73 |
74 | ); 75 | }; 76 | 77 | export default RootPage; 78 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "codesmith_reinforcement-project", 3 | "version": "1.0.0", 4 | "description": "Application Tracker", 5 | "main": "webpack.config.js", 6 | "scripts": { 7 | "dev": "NODE_ENV=development webpack serve --open & tsc server/server.ts & nodemon server/server.js", 8 | "start": "NODE_ENV=production nodemon server/server.js", 9 | "build": "NODE_ENV=production webpack" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/Jigglypuff36/demo-repository.git" 14 | }, 15 | "author": "Andres, Mohammed, Luis, Wendy", 16 | "license": "MIT", 17 | "bugs": { 18 | "url": "https://github.com/Jigglypuff36/demo-repository/issues" 19 | }, 20 | "homepage": "https://github.com/Jigglypuff36/demo-repository#readme", 21 | "dependencies": { 22 | "@babel/plugin-transform-async-to-generator": "^7.1.0", 23 | "@babel/runtime": "^7.1.2", 24 | "axios": "^0.24.0", 25 | "cookie-session": "^2.0.0", 26 | "cors": "^2.8.5", 27 | "cross-env": "^5.2.0", 28 | "daisyui": "^2.42.1", 29 | "dotenv": "^16.0.3", 30 | "express": "^4.16.3", 31 | "express-session": "^1.17.3", 32 | "nodemon": "^2.0.20", 33 | "passport": "^0.6.0", 34 | "passport-google-oauth20": "^2.0.0", 35 | "path": "^0.12.7", 36 | "pg": "^8.8.0", 37 | "postcss-loader": "^7.0.2", 38 | "prop-types": "^15.6.2", 39 | "react": "^17.0.2", 40 | "react-daisyui": "^2.4.7", 41 | "react-dom": "^17.0.2", 42 | "react-redux": "^7.2.6", 43 | "react-router-dom": "^6.4.4" 44 | }, 45 | "devDependencies": { 46 | "@babel/core": "^7.1.2", 47 | "@babel/plugin-transform-runtime": "^7.1.0", 48 | "@babel/preset-env": "^7.1.0", 49 | "@babel/preset-react": "^7.0.0", 50 | "@types/bcrypt": "^5.0.0", 51 | "@types/cors": "^2.8.12", 52 | "@types/express-session": "^1.17.5", 53 | "@types/node": "^18.11.9", 54 | "@types/passport": "^1.0.11", 55 | "@types/pg": "^8.6.5", 56 | "@types/react-dom": "^18.0.8", 57 | "autoprefixer": "^10.4.13", 58 | "babel-core": "^7.0.0-bridge.0", 59 | "babel-loader": "^8.0.4", 60 | "bcrypt": "^5.1.0", 61 | "concurrently": "^7.6.0", 62 | "css-loader": "^6.7.2", 63 | "eslint": "^5.6.1", 64 | "eslint-config-airbnb": "^17.1.0", 65 | "eslint-plugin-import": "^2.14.0", 66 | "eslint-plugin-jsx-a11y": "^6.1.2", 67 | "eslint-plugin-react": "^7.11.1", 68 | "html-webpack-plugin": "^5.5.0", 69 | "nodemon": "^2.0.20", 70 | "postcss": "^8.4.19", 71 | "style-loader": "^3.3.1", 72 | "tailwindcss": "^3.2.4", 73 | "ts-loader": "^9.4.1", 74 | "webpack": "^5.62.1", 75 | "webpack-cli": "^4.9.1", 76 | "webpack-dev-server": "^4.11.1" 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /server/controllers/authController.ts: -------------------------------------------------------------------------------- 1 | const passport = require('passport'); 2 | const GoogleStrategy = require('passport-google-oauth20').Strategy; 3 | //need to import models 4 | import { db } from '../models/model' 5 | const dovenv = require('dotenv').config(); 6 | import { RequestHandler } from 'express'; 7 | 8 | //save to config.env before commit 9 | const GOOGLE_CLIENT_ID = '423300255292-6bv81ekcrsb18ghje1iupihj2vgc18jo.apps.googleusercontent.com' 10 | const GOOGLE_CLIENT_SECRET = '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'; 11 | const GOOGLE_CLIENT_URL = 'http://localhost:3000/api/oauth/google/callback'; 12 | 13 | 14 | // const googleUser = { 15 | // googleId: profile.id, 16 | // displayName: profile.displayName, 17 | // firstName: profile.name.givenName, 18 | // lastName: profile.name.familyName, 19 | // email: profile.emails[0].value 20 | // } 21 | 22 | 23 | passport.use(new GoogleStrategy({ 24 | clientID: GOOGLE_CLIENT_ID, 25 | clientSecret: GOOGLE_CLIENT_SECRET, 26 | callbackURL: GOOGLE_CLIENT_URL, 27 | passReqToCallback: true 28 | }, 29 | async (req:any, accessToken:any, refreshToken:any, profile:any, cb:any) => { 30 | 31 | try{ 32 | console.log('profile', profile.id); 33 | console.log(profile.emails[0].value); 34 | const text = `select * from google_user where profile_id = ${profile.id}` 35 | const user = await db.query(text); 36 | // console.log('user', user.rows[0].profile_id); 37 | if(user.rows[0]){ 38 | return cb(null, user); 39 | } else { 40 | //somehow add profile.displayName breaks the code 41 | const text = `insert into google_user (profile_id, email) values (${profile.id}, '${profile.emails[0].value}')` 42 | const insert = await db.query(text); 43 | const findUser = `select * from google_user where profile_id = ${profile.id}` 44 | const user = await db.query(findUser); 45 | console.log('id',user.rows[0].profile_id); 46 | return cb(null, user) 47 | } 48 | } 49 | catch(err) { 50 | console.log(err) 51 | } 52 | } 53 | )); 54 | 55 | //create session token by grabbing the user data (id) and encode it and save it inside a cookie 56 | passport.serializeUser((user:any, cb:any) => { 57 | console.log('serializing user:', user) 58 | cb(null, user.rows[0].profile_id); 59 | }) 60 | 61 | //user id encoded at the session/token 62 | //grab session token and grab the id and check database if this id exist 63 | //and then authenticate them 64 | passport.deserializeUser(async (id:any, cb:any) => { 65 | const text = `select profile_id from google_user where profile_id = '${id}'` 66 | try{ 67 | const userId = await db.query(text); 68 | if(userId) cb(null,userId); 69 | console.log("Deserialized user:", userId) 70 | } 71 | catch(err){ 72 | console.log(err); 73 | cb(err,null); 74 | } 75 | }) 76 | 77 | // export default authController; -------------------------------------------------------------------------------- /client/components/NewAppDetails.tsx: -------------------------------------------------------------------------------- 1 | import React, {useState, useEffect} from 'react'; 2 | import { Button } from 'react-daisyui'; 3 | 4 | const NewAppDetails = ({ addAppFunc, setApp }) => { 5 | //iterate through the resume versions 6 | // arr.push(