[
  {
    "path": ".gitattributes",
    "content": "# Auto detect text files and perform LF normalization\n* text=auto\n"
  },
  {
    "path": "README.md",
    "content": "# MERN-BUS-APP\n## MFRP (My First Real Project) assigned by Cognizant during Internship\n\nA Bus ticket booking application made using MERN Stack (MongoDB, Express js, React js, Node js)\n\nThe Bus ticket application is composed of the following Features:\n\n### Front-End\n\n* Sign-In & Sign-Up Pages.\n\n* Uses Token based system, so only registered users can access the website  passport js.\n\n* Password hashing using passport js.\n\n* Has a profile page, which will display all information about the signed in user.\n\n* List of cities for users to choose from (starting city & destination city). \n\n* Getting list of bus's of different companies with various details.\n\n* Seat selection page has a very user friendly environment, which also generates dynamic forms for storing data's of passengers.\n\n* Has a Confirmation page, which gets a debit card data using react-credit-cards. This version of the application does not include handling the payment process. \n\n* Final page has a ticket displaying component, it displays all passenger data and also generates a random number as a transaction ID.\n\n### Back-End\n\n* Uses Express js based application for the backend process.\n\n* Uses MongoDB atlas for storing the collections.\n\n* Uses passport js for authenticating user and token based system.\n\n* Uses passport js for hashing the password before sending the data to the cloud.\n\n* This version does not support dynamic seat data being stored from cloud.\n\n\nThis project also demonstrates:\n\n* a typcial React project layout structure\n\n**Screenshots:**\nLanding Page:\n\n![](documentationResources/bus.gif)\n\nSigning In Page:\n\n![](documentationResources/signin.png)\n\nBus Selection Page:\n\n![](documentationResources/bus-page.png)\n\nSeat Selection Page:\n\n![](documentationResources/seatSelection.gif)\n\nPayment & Confirmation Page:\n![](documentationResources/payment.gif)\n---\n\n## Developed With\n\n* [Visual Studio Code](https://code.visualstudio.com/) - A source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring\n* [Node.js](https://nodejs.org/en/) - Javascript runtime\n* [React](https://reactjs.org/) - A javascript library for building user interfaces\n* [Babel](https://babeljs.io/) - A transpiler for javascript\n* [Webpack](https://webpack.js.org/) - A module bundler\n* [SCSS](http://sass-lang.com/) - A css metalanguage\n* [Bootstrap 4](https://getbootstrap.com/) - Bootstrap is an open source toolkit for developing with HTML, CSS, and JS\n* [Axios](https://github.com/axios/axios) - Promise based HTTP client for the browser and node.js\n* [Express js](http://expressjs.com/) - Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.\n* [MongoDB atlas](https://www.mongodb.com/cloud/atlas) - MongoDB Atlas is the global cloud database service for modern applications.\n* [Passport Js](http://www.passportjs.org/) - Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application.\n---\n\n\n## Getting Started\n\nThese instructions will get you a copy of the project up and running on your local machine for development and testing purposes.\n\n### Prerequisites\n\nThe following software is required to be installed on your system:\n\n* Node 8.x\n* Npm 3.x\n\nType the following commands in the terminal to verify your node and npm versions\n\n```bash\nnode -v\nnpm -v\n```\n\n### Install\n\nFollow the following steps to get development environment running.\n\n* Clone _'MERN-BUS-APP.git'_ repository from GitHub\n\n  ```bash\n  git clone https://github.com/AdityaKumawat97/MERN-BUS-APP.git\n  ```\n\n   _OR USING SSH_\n\n  ```bash\n  git clone git@github.com:AdityaKumawat97/MERN-BUS-APP.git\n  ```\n\n* Install node modules\n\n   ```bash\n   cd MERN-BUS-APP\n   cd frontend\n   npm install\n   cd..\n   cd backend\n   npm install\n   ```\n\n\n### Starting both front end and back end servers\n\n* Build application\n\n  This command will start the mongodb and the front end part.\n\n  ```bash\n  cd frontend\n  npm start\n  cd..\n  cd backend\n  npm run devStart\n  ```\n\n\n---\n\n\n"
  },
  {
    "path": "backend/app.js",
    "content": "var express = require('express');\nvar path = require('path');\nvar cookieParser = require('cookie-parser');\nvar logger = require('morgan');\nvar mongoose = require('mongoose');\nvar passport = require('passport');\nconst cors = require('cors')\n\n\nvar app = express();\n\n\n// Login and Register \nrequire('./auth/auth');\nconst login = require('./routes/login')\nconst loggedInPage = require('./routes/loggedInUser');\n// ----------------------------------------------------\n\nconst bookingRoute = require('./routes/routeSelection')\n\nvar registerRouter = require('./routes/register');\n//--------------------------------------------------------\n\n\n//DB Config\nconst DB_URL = require('./config/keys').MongoURI;\n\n//connect to mongo\n//---------------------------------------------\nmongoose.connect(DB_URL, {\n    useNewUrlParser: true,\n    useUnifiedTopology: true\n})\n    .then(() => {\n        console.log(\"Connected to MongoDB\")\n    })\n    .catch(err => {\n        throw err\n    })\n//---------------------------------------------\n\n\napp.use(logger('dev'));\napp.use(express.json());\napp.use(express.urlencoded({ extended: false }));\napp.use(cookieParser());\napp.use(express.static(path.join(__dirname, 'public')));\napp.use(cors())\napp.use('/', login);\napp.use('/booking', bookingRoute);\napp.use('/register', registerRouter);  // To register page \napp.use('/user', passport.authenticate('jwt', { session: false }), loggedInPage); //To Secure Route\n\nmodule.exports = app;\n"
  },
  {
    "path": "backend/auth/auth.js",
    "content": "\nconst passport = require('passport');\nconst localStrategy = require('passport-local').Strategy;\nconst User = require('../models/User')\nvar bodyParser = require('body-parser')\nconst bcrypt = require('bcrypt');\n\n\n\n//Create a passport middleware to handle User login\npassport.use('login', new localStrategy({\n    usernameField: 'email',\n    passwordField: 'password'\n}, async (email, password, done) => {\n    try {\n\n        //Find the user associated with the email provided by the user\n        const user = await User.findOne({ email });\n        if (user === null) {\n            //If the user isn't found in the database, return a message\n            return done(null, false, { message: 'User not found' });\n        }\n        //Validate password and make sure it matches with the corresponding hash stored in the database\n        //If the passwords match, it returns a value of true.\n        const validate1 = await bcrypt.compare(password, user.password, function (err, result) {\n            if (err) console.log(err);\n            if (result) return done(null, user, { message: 'Logged in Successfully' });\n            else return done(null, false, { message: 'Wrong Password' });\n        });\n    } catch (error) {\n        return done(error);\n    }\n}));\n\nconst JWTstrategy = require('passport-jwt').Strategy;\n//We use this to extract the JWT sent by the user\nconst ExtractJWT = require('passport-jwt').ExtractJwt;\n\n//This verifies that the token sent by the user is valid\npassport.use(new JWTstrategy({\n    //secret we used to sign our JWT\n    secretOrKey: 'top_secret',\n    //we expect the user to send the token as a query parameter with the name 'secret_token'\n    jwtFromRequest: ExtractJWT.fromUrlQueryParameter('secret_token')\n}, async (token, done) => {\n    try {\n        //Pass the user details to the next middleware\n        return done(null, token.user);\n    } catch (error) {\n        done(error);\n    }\n}));"
  },
  {
    "path": "backend/bin/www",
    "content": "#!/usr/bin/env node\n\n/**\n * Module dependencies.\n */\n\nvar app = require('../app');\nvar debug = require('debug')('backend:server');\nvar http = require('http');\n\n/**\n * Get port from environment and store in Express.\n */\n\nvar port = normalizePort(process.env.PORT || '8080');\napp.set('port', port);\nconsole.log(\"Server UP and Running at 8080\")\n\n/**\n * Create HTTP server.\n */\n\nvar server = http.createServer(app);\n\n/**\n * Listen on provided port, on all network interfaces.\n */\n\nserver.listen(port);\nserver.on('error', onError);\nserver.on('listening', onListening);\n\n/**\n * Normalize a port into a number, string, or false.\n */\n\nfunction normalizePort(val) {\n  var port = parseInt(val, 10);\n\n  if (isNaN(port)) {\n    // named pipe\n    return val;\n  }\n\n  if (port >= 0) {\n    // port number\n    return port;\n  }\n\n  return false;\n}\n\n/**\n * Event listener for HTTP server \"error\" event.\n */\n\nfunction onError(error) {\n  if (error.syscall !== 'listen') {\n    throw error;\n  }\n\n  var bind = typeof port === 'string'\n    ? 'Pipe ' + port\n    : 'Port ' + port;\n\n  // handle specific listen errors with friendly messages\n  switch (error.code) {\n    case 'EACCES':\n      console.error(bind + ' requires elevated privileges');\n      process.exit(1);\n      break;\n    case 'EADDRINUSE':\n      console.error(bind + ' is already in use');\n      process.exit(1);\n      break;\n    default:\n      throw error;\n  }\n}\n\n/**\n * Event listener for HTTP server \"listening\" event.\n */\n\nfunction onListening() {\n  var addr = server.address();\n  var bind = typeof addr === 'string'\n    ? 'pipe ' + addr\n    : 'port ' + addr.port;\n  debug('Listening on ' + bind);\n}\n"
  },
  {
    "path": "backend/config/jwtConfig.js",
    "content": "const JWTstrategy = require('passport-jwt').Strategy;\nconst ExtractJWT = require('passport-jwt').ExtractJwt;\nconst passport = require('passport');\n\n\n\npassport.use(new JWTstrategy({\n    secretOrKey: 'top_secret',\n    jwtFromRequest: ExtractJWT.fromUrlQueryParameter('secret_token')\n}, async (token, done) => {\n    try {\n        return done(null, token.user);\n    } catch (error) {\n        done(error);\n    }\n}));\n\n\n"
  },
  {
    "path": "backend/config/keys.js",
    "content": "module.exports = {\n    MongoURI: \"mongodb+srv://AdityaNew:123@cluster0-rsoqu.mongodb.net/test?retryWrites=true&w=majority\"\n}"
  },
  {
    "path": "backend/config/passport.js",
    "content": "const passport = require(\"passport\");\nconst localStrategy = require(\"passport-local\").Strategy;\nconst User = require(\"../models/User\");\n\npassport.use(\n    \"login\",\n    new localStrategy({\n            usernameField: \"email\",\n            passwordField: \"password\",\n        },\n        async(email, password, done) => {\n            try {\n                const user = await User.findOne({ email });\n                if (!user) {\n                    return done(null, false, { message: \"User not found\" });\n                }\n\n                const validate = await user.isValidPassword(password);\n                if (!validate) {\n                    return done(null, false, { message: \"Wrong Password\" });\n                }\n                return done(null, user, { message: \"Logged in Successfully\" });\n            } catch (error) {\n                return done(error);\n            }\n        }\n    )\n);"
  },
  {
    "path": "backend/models/Buses.js",
    "content": "const mongoose = require('mongoose');\nconst Schema = mongoose.Schema;\n\n\nconst BusSchema = new Schema({\n    companyName: {\n        type: String\n    },\n    busType: {\n        type: String\n    },\n    busNumber: {\n        type: String\n    },\n    startCity: {\n        type: String\n    },\n    destination: {\n        type: String\n    },\n    totalSeats: {\n        type: String\n    },\n    availableSeats: {\n        type: String\n    },\n    pricePerSeat: {\n        type: String\n    }\n}, {collection: \"buses\"})\n\nconst bus = mongoose.model('bus', BusSchema)\n\nmodule.exports = bus;"
  },
  {
    "path": "backend/models/User.js",
    "content": "const mongoose = require(\"mongoose\");\nconst Schema = mongoose.Schema;\n\nconst UserSchema = new Schema({\n    name: {\n        type: String,\n        required: true,\n    },\n    email: {\n        type: String,\n        required: true,\n    },\n    password: {\n        type: String,\n        required: true,\n    },\n    mobile: {\n        type: String,\n        required: true,\n    },\n    gender: {\n        type: String,\n        required: true,\n    },\n    dob: {\n        type: Date,\n        required: false,\n    },\n});\n\nconst User = mongoose.model(\"user\", UserSchema);\n\nmodule.exports = User;"
  },
  {
    "path": "backend/package.json",
    "content": "{\n  \"name\": \"backend\",\n  \"version\": \"0.0.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"start\": \"node ./bin/www\",\n    \"devStart\": \"nodemon ./bin/www\"\n  },\n  \"dependencies\": {\n    \"bcrypt\": \"^4.0.1\",\n    \"bcryptjs\": \"^2.4.3\",\n    \"body-parser\": \"^1.19.0\",\n    \"cookie-parser\": \"~1.4.4\",\n    \"cors\": \"^2.8.5\",\n    \"debug\": \"~2.6.9\",\n    \"express\": \"~4.16.1\",\n    \"express-session\": \"^1.17.1\",\n    \"jsonwebtoken\": \"^8.5.1\",\n    \"moment\": \"^2.26.0\",\n    \"mongoose\": \"^5.9.16\",\n    \"morgan\": \"~1.9.1\",\n    \"passport\": \"^0.4.1\",\n    \"passport-jwt\": \"^4.0.0\",\n    \"passport-local\": \"^1.0.0\"\n  }\n}\n"
  },
  {
    "path": "backend/public/index.html",
    "content": "<html>\n\n<head>\n  <title>Express</title>\n  <link rel=\"stylesheet\" href=\"/stylesheets/style.css\">\n</head>\n\n<body>\n  <h1>Express</h1>\n  <p>Welcome to Express</p>\n</body>\n\n</html>\n"
  },
  {
    "path": "backend/public/stylesheets/style.css",
    "content": "body {\n  padding: 50px;\n  font: 14px \"Lucida Grande\", Helvetica, Arial, sans-serif;\n}\n\na {\n  color: #00B7FF;\n}\n"
  },
  {
    "path": "backend/routes/loggedInUser.js",
    "content": "const express = require('express');\n\nconst router = express.Router();\n\n\n//Displays information tailored according to the logged in user\nrouter.get('/profile', (req, res, next) => {\n    res.json({\n        user: req.user,\n        token: req.query.secret_token\n    })\n});\n\nmodule.exports = router;"
  },
  {
    "path": "backend/routes/login.js",
    "content": "const express = require(\"express\");\nconst passport = require(\"passport\");\nconst User = require(\"../models/User\");\nconst jwt = require(\"jsonwebtoken\");\nvar bcrypt = require(\"bcrypt\");\n\nconst router = express.Router();\n\nrouter.post(\"/login\", async(req, res, next) => {\n    const { email, password } = req.body;\n    try {\n        User.findOne({ email: email }, (err, doc) => {\n            console.log(doc);\n            if (err) {} else {\n                if (!doc) {} else {\n                    bcrypt.compare(password, doc.password, function(error, response) {\n                        console.log(response);\n                        const token = jwt.sign({ doc }, \"top_secret\");\n                        res.status(200).json({ token });\n                    });\n                }\n            }\n        });\n    } catch (error) {}\n    // passport.authenticate(\"login\", async(err, user, info) => {\n    //     try {\n    //         if (err || !user) {\n    //             const error = new Error(\"No User Found\");\n    //             console.log(\"Yellow\", err);\n    //             return next(error);\n    //         }\n    //         req.login(user, { session: false }, async(error) => {\n    //             if (error) return next(error);\n    //             const body = {\n    //                 _id: user._id,\n    //                 name: user.name,\n    //                 email: user.email,\n    //                 gender: user.gender,\n    //             };\n    //             const token = jwt.sign({ user: body }, \"top_secret\");\n    //             return res.json({ token });\n    //         });\n    //     } catch (error) {\n    //         return next(error);\n    //     }\n    // })(req, res, next);\n});\n\n// router.get('/Login', (req, res) => {\n//     res.send(\"Login Here\")\n// })\n\nmodule.exports = router;"
  },
  {
    "path": "backend/routes/register.js",
    "content": "var express = require('express');\nvar router = express.Router();\nvar User = require('../models/User')\nvar bcrypt = require('bcrypt');\nvar moment = require('moment');\nvar bodyParser = require('body-parser')\n\n\n\n\nrouter.get('/', (req, res) => {\n    res.send(\"Register Here\")\n});\n\n//Body-Parser\nvar jsonParser = bodyParser.json()\n\nrouter.post('/', jsonParser, async (req, res) => {\n    //Hash Password \n    const hashPassword = await bcrypt.hash(req.body.password, 10)\n\n\n    let user = {\n        name: req.body.name,\n        email: req.body.email,\n        password: hashPassword,\n        mobile: req.body.mobile,\n        gender: req.body.gender,\n        dob: moment(req.body.dob).format('YYYY-MM-DD')\n    }\n    let newUser = new User(user)\n    // console.log(newUser)\n    newUser.save((err, reslut) => {\n        if (err) console.log(err)\n        else res.status(201).json(reslut)\n    })\n\n\n});\n\n\n\nmodule.exports = router;\n"
  },
  {
    "path": "backend/routes/routeSelection.js",
    "content": "var express = require('express');\nvar router = express.Router();\nvar bus = require('../models/Buses');\n\n\n// router.get('/', (req, res) => {\n//     bus.find({ companyName, startCity, totalseats, availableseats }, (err, result) => {\n//         if (err) res.send(err)\n//         else res.json({ result })\n//     })\n// })\n\nrouter.post('/', (req, res) => {\n\n    bus.find({ 'startCity': req.body.startCity, 'destination': req.body.destination }).exec((err, bus) => {\n        if (err) {\n            res.json({ status: false, message: \"error while searching\" })\n        }\n        else res.json({ bus })\n    })\n})\n\nrouter.post('/', (req, res) => {\n\n    bus.findOne({ _id: req.body.bId }, (err, bus) => {\n        if (err) {\n            res.json({ status: false, message: \"error while searching with ID\" })\n        }\n        else\n            res.json({ bus })\n    })\n})\n\n// router.post('/', (req, res) => {\n//     let newBus = new bus(req.body)\n//     newBus.save((err, bus) => {\n//         if (err) console.log(err)\n//         else res.status(201).json(bus)\n//     })\n// })\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nmodule.exports = router;\n"
  },
  {
    "path": "backend/routes.json",
    "content": "[\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Chennai\",\n        \"destination\": \"bangalore\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"ORANGE BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Chennai\",\n        \"destination\": \"bangalore\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Chennai\",\n        \"destination\": \"Hyderabad\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"ORANGE BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Chennai\",\n        \"destination\": \"Hyderabad\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Chennai\",\n        \"destination\": \"Coimbatore\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"ORANGE BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Chennai\",\n        \"destination\": \"Coimbatore\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Chennai\",\n        \"destination\": \"Vishakapatnam\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Chennai\",\n        \"destination\": \"Salem\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Chennai\",\n        \"destination\": \"Tirunelveli\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Bangalore\",\n        \"destination\": \"Chennai\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Bangalore\",\n        \"destination\": \"Salem\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Bangalore\",\n        \"destination\": \"Hyderabad\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Bangalore\",\n        \"destination\": \"Coimbatore\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Bangalore\",\n        \"destination\": \"Vishakapatnam\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Bangalore\",\n        \"destination\": \"Kochi\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Kochi\",\n        \"destination\": \"Bangalore\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Kochi\",\n        \"destination\": \"Vishakapatnam\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Kochi\",\n        \"destination\": \"Chennai\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Kochi\",\n        \"destination\": \"Salem\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Kochi\",\n        \"destination\": \"Coimbatore\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Kochi\",\n        \"destination\": \"OOty\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"RED BUS\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"TN 27 110099\",\n        \"startCity\": \"Kochi\",\n        \"destination\": \"\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/08/2020\"\n    },\n    {\n        \"CompanyName\": \"Santhosh Travels bus\",\n        \"busType\": \"Multi AXLE AC\",\n        \"busNumber\": \"AP 27 110099\",\n        \"startCity\": \"Kakinada\",\n        \"destination\": \"\",\n        \"totalSeats\": \"36\",\n        \"availableSeats\": \"20\",\n        \"pricePerSeat\": \"1000\",\n        \"date\": \"22/04/2021\"\n    }\n]\n"
  },
  {
    "path": "frontend/.gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# production\n/build\n\n# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n"
  },
  {
    "path": "frontend/README.md",
    "content": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `yarn start`\n\nRuns the app in the development mode.<br />\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\nThe page will reload if you make edits.<br />\nYou will also see any lint errors in the console.\n\n### `yarn test`\n\nLaunches the test runner in the interactive watch mode.<br />\nSee the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.\n\n### `yarn build`\n\nBuilds the app for production to the `build` folder.<br />\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.<br />\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.\n\n### `yarn eject`\n\n**Note: this is a one-way operation. Once you `eject`, you can’t go back!**\n\nIf you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.\n\nInstead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.\n\nYou don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.\n\n## Learn More\n\nYou can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n### Code Splitting\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting\n\n### Analyzing the Bundle Size\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size\n\n### Making a Progressive Web App\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app\n\n### Advanced Configuration\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration\n\n### Deployment\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/deployment\n\n### `yarn build` fails to minify\n\nThis section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify\n"
  },
  {
    "path": "frontend/debug.log",
    "content": "[0530/011756.906:ERROR:scoped_process_suspend.cc(31)] NtSuspendProcess: An attempt was made to access an exiting process. (0xc000010a)\n[0530/011757.834:ERROR:process_info.cc(118)] ReadProcessMemory bool __cdecl crashpad::(anonymous namespace)::ReadStruct(HANDLE, crashpad::WinVMAddress, T *) [T = crashpad::process_types::PEB<crashpad::process_types::internal::Traits64>]: Only part of a ReadProcessMemory or WriteProcessMemory request was completed. (0x12B)\n[0530/011757.843:ERROR:process_info.cc(551)] ReadProcessData failed\n"
  },
  {
    "path": "frontend/package.json",
    "content": "{\n  \"name\": \"frontend\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"dependencies\": {\n    \"@testing-library/jest-dom\": \"^4.2.4\",\n    \"@testing-library/react\": \"^9.3.2\",\n    \"@testing-library/user-event\": \"^7.1.2\",\n    \"@types/date-fns\": \"^2.6.0\",\n    \"axios\": \"^0.19.2\",\n    \"bootstrap\": \"^4.5.0\",\n    \"jwt-decode\": \"^2.2.0\",\n    \"react\": \"^16.13.1\",\n    \"react-credit-cards\": \"^0.8.2\",\n    \"react-datepicker\": \"^2.16.0\",\n    \"react-dom\": \"^16.13.1\",\n    \"react-icons\": \"^3.10.0\",\n    \"react-router-dom\": \"^5.2.0\",\n    \"react-scripts\": \"^3.4.1\",\n    \"react-transition-group\": \"^4.4.1\",\n    \"redux\": \"^4.0.5\"\n  },\n  \"scripts\": {\n    \"start\": \"react-scripts start\",\n    \"build\": \"react-scripts build\",\n    \"test\": \"react-scripts test\",\n    \"eject\": \"react-scripts eject\"\n  },\n  \"eslintConfig\": {\n    \"extends\": \"react-app\"\n  },\n  \"browserslist\": {\n    \"production\": [\n      \">0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"development\": [\n      \"last 1 chrome version\",\n      \"last 1 firefox version\",\n      \"last 1 safari version\"\n    ]\n  }\n}\n"
  },
  {
    "path": "frontend/public/index.html",
    "content": "<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n  <meta charset=\"utf-8\" />\n  <link href=\"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-\nawesome.min.css\" rel=\"stylesheet\" integrity=\"sha384-\nwvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN\" crossorigin=\"anonymous\">\n  <link href=\"https://fonts.googleapis.com/css2?family=Lobster&display=swap\" rel=\"stylesheet\">\n  <link rel=\"icon\" href=\"%PUBLIC_URL%/favicon.ico\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n  <meta name=\"theme-color\" content=\"#000000\" />\n  <meta name=\"description\" content=\"Web site created using create-react-app\" />\n  <link rel=\"apple-touch-icon\" href=\"%PUBLIC_URL%/logo192.png\" />\n  <!--\n      manifest.json provides metadata used when your web app is installed on a\n      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/\n    -->\n  <link rel=\"manifest\" href=\"%PUBLIC_URL%/manifest.json\" />\n  <!--\n      Notice the use of %PUBLIC_URL% in the tags above.\n      It will be replaced with the URL of the `public` folder during the build.\n      Only files inside the `public` folder can be referenced from the HTML.\n\n      Unlike \"/favicon.ico\" or \"favicon.ico\", \"%PUBLIC_URL%/favicon.ico\" will\n      work correctly both with client-side routing and a non-root public URL.\n      Learn how to configure a non-root public URL by running `npm run build`.\n    -->\n  <title>Unique Travels</title>\n</head>\n\n<body>\n  <noscript>You need to enable JavaScript to run this app.</noscript>\n  <div id=\"root\"></div>\n  <!--\n      This HTML file is a template.\n      If you open it directly in the browser, you will see an empty page.\n\n      You can add webfonts, meta tags, or analytics to this file.\n      The build step will place the bundled scripts into the <body> tag.\n\n      To begin the development, run `npm start` or `yarn start`.\n      To create a production bundle, use `npm run build` or `yarn build`.\n    -->\n  <script src=\"https://code.jquery.com/jquery-3.2.1.slim.min.js\"\n    integrity=\"sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN\"\n    crossorigin=\"anonymous\"></script>\n  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js\"\n    integrity=\"sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q\"\n    crossorigin=\"anonymous\"></script>\n  <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js\"\n    integrity=\"sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl\"\n    crossorigin=\"anonymous\"></script>\n</body>\n\n</html>"
  },
  {
    "path": "frontend/public/manifest.json",
    "content": "{\n  \"short_name\": \"React App\",\n  \"name\": \"Create React App Sample\",\n  \"icons\": [\n    {\n      \"src\": \"favicon.ico\",\n      \"sizes\": \"64x64 32x32 24x24 16x16\",\n      \"type\": \"image/x-icon\"\n    },\n    {\n      \"src\": \"logo192.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"192x192\"\n    },\n    {\n      \"src\": \"logo512.png\",\n      \"type\": \"image/png\",\n      \"sizes\": \"512x512\"\n    }\n  ],\n  \"start_url\": \".\",\n  \"display\": \"standalone\",\n  \"theme_color\": \"#000000\",\n  \"background_color\": \"#ffffff\"\n}\n"
  },
  {
    "path": "frontend/public/robots.txt",
    "content": "# https://www.robotstxt.org/robotstxt.html\nUser-agent: *\nDisallow:\n"
  },
  {
    "path": "frontend/src/App.css",
    "content": "body {\n    background: url('./bg.jpg');\n    background-repeat: no-repeat;\n    background-position: center center;\n    background-attachment: fixed;\n    background-size: cover;\n    height: 100%;\n    width: 100%;\n}\n\n.page{\n    position: absolute;\n}\n\n\n.fade-appear, .fade-enter {\n    opacity: 0;\n    z-index: 1;\n}\n\n.fade-appear-active, .fade-enter.fade-enter-active {\n    opacity: 1;\n    transition: opacity 300ms linear 150ms;\n}\n\n.fade-exit{\n    opacity: 1;\n}\n\n.fade-exit.fade-exit-active{\n    opacity: 1;\n    transition: opacity 150ms linear;\n\n}"
  },
  {
    "path": "frontend/src/App.js",
    "content": "import React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport 'bootstrap/dist/css/bootstrap.min.css'\nimport Homepage from './components/Homepage/Homepage'\nimport RouteSelection from './components/RouteSelection/RouteSelection'\nimport LogOrsign from './components/Login-Signup/LogOrsign'\nimport Signup from './components/Login-Signup/Signup'\nimport Profile from './components/Profile/Profile'\nimport TicketPage from './components/TicketPage/TicketPage'\nimport './App.css';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <Router>\n        <Switch>\n          <Route path=\"/\" exact render={props => <Homepage {...props} />} />\n          <Route path=\"/login\" render={props => <LogOrsign {...props} />} />\n          <Route path=\"/register\" render={props => <Signup {...props} />} />\n          <Route path=\"/routes\" exact render={props => <RouteSelection {...props} />} />\n          <Route path=\"/profile\" exact render={props => <Profile {...props} />} />\n          <Route path=\"/getTicket\" exact render={props => <TicketPage {...props} />} />\n        </Switch>\n      </Router>\n    </div>\n\n  );\n}\n\nexport default App;\n"
  },
  {
    "path": "frontend/src/App.test.js",
    "content": "import React from 'react';\nimport { render } from '@testing-library/react';\nimport App from './App';\n\ntest('renders learn react link', () => {\n  const { getByText } = render(<App />);\n  const linkElement = getByText(/learn react/i);\n  expect(linkElement).toBeInTheDocument();\n});\n"
  },
  {
    "path": "frontend/src/components/API/api.js",
    "content": "import axios from 'axios'\nexport default axios.create({\n    baseURL: 'http//localhost:8080'\n})\n"
  },
  {
    "path": "frontend/src/components/BusList/BusList.js",
    "content": "import React, { useState, useEffect } from 'react'\nimport { FaAngleDoubleDown } from \"react-icons/fa\";\nimport './busList.css'\nexport default function BusList({ value: dataInp }) {\n\n    const [obj, setObj] = useState('')\n    const [reset, Setreset] = useState(false)\n    const [arrowDown, setArrowDown] = useState(false)\n    const [clas, SetClas] = useState(true)\n\n\n    useEffect(() => {\n        setObj(dataInp)\n    }, [dataInp])\n\n\n    const handleSubmit = bId => {\n        localStorage.setItem(\"selectedBusId\", bId)\n        SetClas(false)\n        setArrowDown(true)\n    }\n\n\n    const handleReset = (e) => {\n        if (clas === false) {\n            Setreset(true)\n            SetClas(true)\n            setArrowDown(false)\n        }\n        localStorage.removeItem(\"selectedBusId\")\n    }\n\n\n    const renderFunction = () => {\n        return dataInp.map((bus, idx) => {\n            // let bId = bus._id\n            return (\n                <div key={idx} className=\"card mt-5 buslist\">\n                    <div class=\"row ml-3\">\n                        <div class=\"col-6 col-sm-3 mt-2 font-weight-bold \">Brand</div>\n                        <div class=\"col-6 col-sm-3 mt-2 font-weight-bold \">From</div>\n                        <div class=\"col-6 col-sm-3 mt-2 font-weight-bold \">To</div>\n                        <div class=\"col-6 col-sm-3 mt-2 font-weight-bold \">Price</div>\n\n                        <div class=\"w-100 d-none d-md-block\"></div>\n\n                        {console.log(bus.seatArray)}\n                        <div class=\"col-6 col-sm-3 mb-4\">{bus.companyName}</div>\n                        <div class=\"col-6 col-sm-3 mb-4\">{bus.startCity}</div>\n                        <div class=\"col-6 col-sm-3 mb-4\">{bus.destination}</div>\n                        <div class=\"col-6 col-sm-3 mb-4\">{bus.pricePerSeat}</div>\n                        <div class=\"col-6 col-sm-4 mb-2 ml-0\">\n                            <button className={clas ? \"btn btn-primary btn-md\" : \"btn btn-primary btn-md disabled\"} onClick={(bId) => { handleSubmit(bus._id) }} >Book Now</button>\n                        </div>\n                        <div class=\"col-6 col-sm-4 mb-2 ml-0\">\n                            <span className={reset ? \"badge badge-danger ml-5\" : \"disabled\"} onClick={e => handleReset(e)}>Reset</span>\n                        </div>\n                    </div>\n                </div >\n            )\n        })\n\n    }\n\n\n    return (\n        <div className=\"\">\n            {renderFunction()}\n            <div className={arrowDown ? \"activeArrow\" : \"nonActive\"}>\n                <FaAngleDoubleDown />\n            </div>\n        </div>\n\n    )\n}\n"
  },
  {
    "path": "frontend/src/components/BusList/busList.css",
    "content": ".buslist {\n    margin-top: 20px;\n    background-color: rgba(240, 248, 255, 0.548);\n}\n\n.row {\n    margin-left: 15px;\n}\n\n.nonActive {\n    display: none;\n}\n\n.activeArrow {\n    color: rgb(0, 63, 0);\n    position: absolute;\n    margin-top: 50px;\n    left: 270px;\n    animation: bounce 0.5s infinite linear;\n}\n\n@-webkit-keyframes bounce {\n    0% {\n        top: 0;\n    }\n    50% {\n        top: -0.2em;\n    }\n    70% {\n        top: -0.3em;\n    }\n    100% {\n        top: 0;\n    }\n}\n\n@-moz-keyframes bounce {\n    0% {\n        top: 0;\n    }\n    50% {\n        top: -0.2em;\n    }\n    70% {\n        top: -0.3em;\n    }\n    100% {\n        top: 0;\n    }\n}\n\n@-o-keyframes bounce {\n    0% {\n        top: 0;\n    }\n    50% {\n        top: -0.2em;\n    }\n    70% {\n        top: -0.3em;\n    }\n    100% {\n        top: 0;\n    }\n}\n\n@-ms-keyframes bounce {\n    0% {\n        top: 0;\n    }\n    50% {\n        top: -0.2em;\n    }\n    70% {\n        top: -0.3em;\n    }\n    100% {\n        top: 0;\n    }\n}\n\n@keyframes bounce {\n    0% {\n        top: 0;\n    }\n    50% {\n        top: -0.2em;\n    }\n    70% {\n        top: -0.3em;\n    }\n    100% {\n        top: 0;\n    }\n}\n\n.nonActive {\n    display: none;\n}"
  },
  {
    "path": "frontend/src/components/Homepage/Homepage.js",
    "content": "import React from 'react'\nimport './homepage.css'\nexport default function Homepage({ history }) {\n    const enterSite = e => {\n        e.preventDefault()\n        history.push('/login')\n    }\n\n    return (\n        <div className='container maint-cnt'>\n            <div className=\"header-nav\">\n                <span className=\"mytext1\"> Unique Travels </span>\n            </div>\n            \n            <div className=\"\">\n            </div>\n\n            <div className=\"container\">\n                <div className=\"slogan\">\n                    <h1>\n                        <span>always Travel</span>\n                        <div className=\"message\">\n                            <div className=\"word1\">Uniquely</div>\n                            <div className=\"word2\">Safely</div>\n                            <div className=\"word3\">with a smile</div>\n                        </div>\n                    </h1>\n                </div>\n\n                <a href=\"/#\" onClick={e => enterSite(e)} className=\"mainBtn\">\n                    <svg width=\"277\" height=\"62\">\n                        <defs>\n                            <linearGradient id=\"grad1\">\n                                <stop offset=\"0%\" stopColor=\"#FF8282\" />\n                                <stop offset=\"100%\" stopColor=\"#E178ED\" />\n                            </linearGradient>\n                        </defs>\n                        <rect x=\"5\" y=\"5\" rx=\"25\" fill=\"none\" stroke=\"url(#grad1)\" width=\"266\" height=\"50\"></rect>\n                    </svg>\n                    <span >Get Started!</span>\n                </a>\n            </div>\n        </div>\n    )\n}\n\n\n"
  },
  {
    "path": "frontend/src/components/Homepage/homepage.css",
    "content": ".header-nav {\n    text-align: center;\n    position: absolute;\n    top: 1%;\n    left: 50%;\n    transform: translate(-50%, -9%);\n    width: 100%;\n    z-index: 1000;\n}\n\n/* .hide-nav-link-bar{\n    z-index: -1;\n} */\n\n.header-nav span {\n    text-transform: uppercase;\n    display: block;\n}\n\n.mytext1 {\n    color: #fff;\n    text-shadow: 0 0 2px rgba(255, 255, 255, 0.425), 0 0 4px rgba(255, 255, 255, 0.425), 0 0 8px rgba(255, 255, 255, 0.425), 0 0 32px rgba(0, 255, 255, 0.425), 0 0 64px rgba(0, 255, 255, 0.425), 0 0 90px rgba(0, 255, 255, 0.425);\n    font-family: 'Piedra', cursive;\n    font-size: 50px;\n    font-weight: 200;\n    letter-spacing: 8px;\n    margin-bottom: 20px;\n    background: #456e976c;\n    border-radius: 5px;\n    position: relative;\n    animation: text 3s 1;\n}\n\n@keyframes text {\n    0% {\n        color: white;\n        margin-bottom: -40px;\n    }\n    30% {\n        letter-spacing: 25px;\n        margin-bottom: -40px;\n    }\n    85% {\n        letter-spacing: 8px;\n        margin-bottom: -40px;\n        color: white\n    }\n}\n\n.mainBtn {\n    position: relative;\n    left: 74%;\n    margin-top: 50%;\n    display: inline-block;\n    width: 277px;\n    height: 50px;\n    font-size: 1em;\n    font-weight: bold;\n    line-height: 60px;\n    text-align: center;\n    text-transform: uppercase;\n    background-color: transparent;\n    cursor: pointer;\n    text-decoration: none;\n    font-family: 'Roboto', sans-serif;\n    font-weight: 900;\n    font-size: 17px;\n    letter-spacing: 0.045em;\n    z-index: 1000;\n}\n\n.mainBtn svg {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n\n.mainBtn svg rect {\n    /* stroke: #EC0033; */\n    stroke-width: 4;\n    stroke-dasharray: 353, 0;\n    stroke-dashoffset: 0;\n    -webkit-transition: all 600ms ease;\n    transition: all 600ms ease;\n}\n\n.mainBtn span {\n    background: rgb(130, 230, 255);\n    background: -moz-linear-gradient(left, rgba(130, 230, 255, 1) 0%, rgb(130, 230, 255) 100%);\n    background: -webkit-linear-gradient(left, rgba(130, 230, 255, 1) 0%, rgba(130, 230, 255, 1) 100%);\n    background: linear-gradient(to right, rgba(130, 230, 255, 1) 0%, rgb(130, 230, 255) 100%);\n    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8282', endColorstr='#e178ed', GradientType=1);\n    -webkit-background-clip: text;\n    -webkit-text-fill-color: transparent;\n}\n\n.mainBtn:hover svg rect {\n    stroke-width: 4;\n    stroke-dasharray: 196, 543;\n    stroke-dashoffset: 437;\n}\n\n.maint-cnt {\n    height: 100%;\n    width: 100%;\n}\n\n* {\n    box-sizing: border-box;\n}\n\nbody {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100vh;\n    width: 100vw;\n    background: black;\n}\n\nh1 {\n    color: #333;\n    font-family: tahoma;\n    font-size: 3rem;\n    font-weight: 100;\n    line-height: 1.5;\n    text-transform: uppercase;\n    white-space: nowrap;\n    overflow: hidden;\n    position: relative;\n    width: 550px;\n}\n\nh1 span {\n    font-size: 30px;\n    margin-left: 15px;\n    color: black;\n}\n\n.message {\n    background-color: rgba(255, 255, 255, 0.062);\n    border-radius:5px;\n    color: #333;\n    display: block;\n    font-weight: 500;\n    overflow: hidden;\n    position: absolute;\n    padding-left: 0.5rem;\n    top: 0.2rem;\n    left: 270px;\n    animation: openclose 5s ease-in-out infinite;\n}\n\n.word1, .word2, .word3 {\n    font-family: tahoma;\n    font-size: 2.9rem;\n}\n\n@keyframes openclose {\n    0% {\n        top: 0.2rem;\n        width: 0;\n    }\n    5% {\n        width: 0;\n    }\n    15% {\n        width: 230px;\n    }\n    30% {\n        top: 0.2rem;\n        width: 230px;\n    }\n    33% {\n        top: 0.2rem;\n        width: 0;\n    }\n    35% {\n        top: 0.2rem;\n        width: 0;\n    }\n    38% {\n        top: -4.5rem;\n    }\n    48% {\n        top: -4.5rem;\n        width: 190px;\n    }\n    62% {\n        top: -4.5rem;\n        width: 190px;\n    }\n    66% {\n        top: -4.5rem;\n        width: 0;\n        text-indent: 0;\n    }\n    71% {\n        top: -9rem;\n        width: 0;\n        text-indent: 5px;\n    }\n    86% {\n        top: -9rem;\n        width: 285px;\n    }\n    95% {\n        top: -9rem;\n        width: 285px;\n    }\n    98% {\n        top: -9rem;\n        width: 0;\n        text-indent: 5px;\n    }\n    100% {\n        top: 0;\n        width: 0;\n        text-indent: 0;\n    }\n}\n\n.word3 {\n    font-size: 2.5rem;\n}\n\n.slogan {\n    position: absolute;\n    top: 170px;\n    left: 645px;\n}"
  },
  {
    "path": "frontend/src/components/Login-Signup/LogOrsign.js",
    "content": "import React, { useState } from 'react'\nimport * as logFunc from './loginFunctions.js'\nimport './logOrsign.css'\nimport { FaFacebookF, FaTwitterSquare } from \"react-icons/fa\";\nexport default function LogOrsign({ history }) {\n\n    let [userData, setUserData] = useState({})\n\n    const getToSignUp = e => {\n        e.preventDefault()\n        history.push('/register')\n    }\n    const handleChangeEvent = (e, title) => {\n        let value = e.target.value\n        setUserData({ ...userData, [title]: value })\n\n    }\n\n    const submitData = e => {\n        e.preventDefault()\n        // console.log(userData)\n        logFunc.logUserIn(userData)\n            .then(response => response.data)\n            .then(data => {\n                let { token } = data\n                sessionStorage.setItem('authToken', token)\n                history.push('/routes')\n            })\n    }\n\n\n\n    return (\n        <div className=\"container\">\n            <section className=\"myform-area\">\n                <div className=\"container\">\n                    <div className=\"row justify-content-center\">\n                        <div className=\"col-lg-8\">\n                            <div className=\"form-area login-form\">\n                                <div className=\"form-content\">\n                                    <h2>Login</h2>\n                                    <p>you chose the right option</p>\n                                    <ul>\n                                        <li><a href=\"/#\" className=\"facebook\"><FaFacebookF /></a></li>\n                                    </ul>\n                                    <ul>\n                                        <li><a href=\"/#\" className=\"twitter\"><FaTwitterSquare /></a></li>\n                                    </ul>\n                                </div>\n                                <div className=\"form-input\">\n                                    <h2>Enter Credentials</h2>\n                                    <form onSubmit={(e) => { submitData(e) }}>\n                                        <div class=\"form-group\">\n                                            <input className=\"loginInfo\" type=\"email\" name=\"name\" required onChange={e => handleChangeEvent(e, 'email')} />\n                                            <label>Email-Id</label>\n                                        </div>\n                                        <div class=\"form-group\">\n                                            <input className=\"loginInfo\" type=\"password\" name=\"password\" required onChange={e => handleChangeEvent(e, 'password')} />\n                                            <label>password</label>\n                                        </div>\n                                        <div class=\"myform-button\">\n                                            <button type=\"submit\" className=\"myform-btn\">Login</button>\n                                        </div>\n                                        <div>\n                                            <small className=\"form-text text-muted signup-text\">Already a User?\n                                            </small>\n                                            <span className=\"signUPtext\"><a href=\"/#\" onClick={(e) => getToSignUp(e)}>Sign-Up</a></span>\n                                        </div>\n                                    </form>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n        </div >\n    )\n}\n"
  },
  {
    "path": "frontend/src/components/Login-Signup/Signup.js",
    "content": "import React, { useState } from \"react\";\nimport * as signupFunc from \"./SignupFunctions\";\nimport { FaFacebookF, FaTwitterSquare } from \"react-icons/fa\";\nimport \"./signup.css\";\nexport default function Signup({ history }) {\n    let [newUser, setnewUser] = useState({});\n    const handleChangeEvent = (e, field) => {\n        let fieldValue = e.target.value;\n        setnewUser({...newUser, [field]: fieldValue });\n        // if (field === 'email') {\n        //     var mailformat = /^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/;\n        //     if (fieldValue.match(mailformat)) {\n        //         setnewUser({ ...newUser, [field]: fieldValue })\n        //         return true\n        //     } else {\n        //         alert(\"You have entered an invalid email address!\");\n        //         return false\n        //     }\n        // } else if (field === 'password') {\n        //     var passwordFormat = /^[A-Za-z]\\w{7,14}$/;\n        //     if (fieldValue.match(passwordFormat)) {\n        //         setnewUser({ ...newUser, [field]: fieldValue })\n        //         return true\n        //     }else{\n        //         alert(\"Input Password and Submit [7 to 15 characters which contain only characters, numeric digits, underscore and first character must be a letter]\")\n        //     }\n    };\n\n    // sign in\n    const getToSignIn = (e) => {\n        e.preventDefault();\n        history.push(\"/login\");\n    };\n\n    // submiting data to backend\n    const submitData = (e) => {\n        e.preventDefault();\n        signupFunc.registerUser(newUser).then((response) => response.data);\n        console.log(newUser);\n        history.push(\"/login\");\n    };\n\n    return ( <\n        div className = \"container\" >\n        <\n        div className = \"flex-container\" >\n        <\n        div className = \"row full\" >\n        <\n        div className = \"col-md-12\" >\n        <\n        div className = \"form-container\" >\n        <\n        div className = \"form-container-in\" > < /div> <\n        div className = \"row sgnUp \" >\n        <\n        div className = \"col-md-6 right-divider pdding\" >\n        <\n        h3 className = \"lead-text mn-txt\" > Join Us with Social < /h3> <\n        div className = \"icon-soc-fb\" >\n        <\n        FaFacebookF / >\n        <\n        /div> <\n        div className = \"icon-soc-tw\" >\n        <\n        FaTwitterSquare / >\n        <\n        /div> <\n        /div> <\n        div className = \"left-divider\" >\n        <\n        div className = \"col-md-6\" >\n        <\n        form onSubmit = {\n            (e) => submitData(e) } >\n        <\n        div className = \"form-group2\" >\n        <\n        label htmlFor = \"name\" > Name: < /label> <\n        input id = \"name\"\n        type = \"text\"\n        className = \"form-control sgnUp\"\n        onChange = {\n            (e) => handleChangeEvent(e, \"name\") }\n        /> <\n        /div> <\n        div class = \"form-group2\" >\n        <\n        label htmlFor = \"email\" > Email - ID: < /label> <\n        input required id = \"email\"\n        type = \"email\"\n        className = \"form-control sgnUp\"\n        onChange = {\n            (e) => handleChangeEvent(e, \"email\") }\n        /> <\n        /div> <\n        div class = \"form-group2\" >\n        <\n        label htmlFor = \"mob-number\" > Mobile - No.: < /label> <\n        input required id = \"mob-number\"\n        type = \"text\"\n        className = \"form-control sgnUp\"\n        onChange = {\n            (e) => handleChangeEvent(e, \"mobile\") }\n        /> <\n        /div> <\n        div class = \"form-check form-check-inline rd\" >\n        <\n        input required class = \"form-check-input\"\n        type = \"radio\"\n        id = \"Male\"\n        name = \"gender\"\n        value = \"Male\"\n        onChange = {\n            (e) => handleChangeEvent(e, \"gender\") }\n        /> <\n        label class = \"form-check-label\"\n        htmlFor = \"Male\" >\n        Male <\n        /label> <\n        /div> <\n        div class = \"form-check form-check-inline rd\" >\n        <\n        input required class = \"form-check-input\"\n        type = \"radio\"\n        id = \"Female\"\n        name = \"gender\"\n        value = \"Female\"\n        onChange = {\n            (e) => handleChangeEvent(e, \"gender\") }\n        /> <\n        label class = \"form-check-label\"\n        htmlFor = \"Female\" >\n        Female <\n        /label> <\n        /div> <\n        div class = \"form-group2\" >\n        <\n        label htmlFor = \"password\" > Password: < /label> <\n        input required id = \"password\"\n        type = \"password\"\n        className = \"form-control sgnUp\"\n        onChange = {\n            (e) => handleChangeEvent(e, \"password\") }\n        /> <\n        /div> <\n        div class = \"form-group2\" >\n        <\n        input required type = \"submit\"\n        value = \"submit\"\n        className = \"btn-primary btnn form-submit sub-btn sgnUp\" /\n        >\n        <\n        /div> <\n        div >\n        <\n        small className = \"form-text text-muted link-text\" >\n        Already a User ?\n        <\n        /small> <\n        span className = \"signuptext\" >\n        <\n        a href = \"/#\"\n        onClick = {\n            (e) => getToSignIn(e) } >\n        Sign - In <\n        /a> <\n        /span> <\n        /div> <\n        /form> <\n        /div> <\n        /div> <\n        /div> <\n        /div> <\n        /div> <\n        /div> <\n        /div> <\n        /div>\n    );\n}"
  },
  {
    "path": "frontend/src/components/Login-Signup/SignupFunctions.js",
    "content": "import axios from 'axios'\n\nexport function registerUser(newUserDetails){\n    let apiUrl = 'http://localhost:8080/register'\n    return axios.post(apiUrl,newUserDetails,{\n        headers:{\n            'Content-Type': 'application/json'\n        }\n    })\n}\n"
  },
  {
    "path": "frontend/src/components/Login-Signup/logOrsign.css",
    "content": "@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');\n* {\n    margin: 0;\n    padding: 0\n}\n\na, a:hover {\n    text-decoration: none;\n}\n\n.myform-area {\n    overflow: hidden;\n    padding: 60px 0;\n    /* background-image: url('../../bg.jpg'); */\n    position: relative;\n    padding-top: 100px;\n    padding-bottom: 100px;\n}\n\n.myform-area .form-area {\n    position: relative;\n    background: rgba(103, 58, 183, 0.7);\n    width: 700px;\n    height: 400px;\n    overflow: hidden;\n    box-shadow: 0 0 40px 0 #0a0a0a;\n}\n\n.myform-area .form-area .form-content, .myform-area .form-area .form-input {\n    position: relative;\n    width: 50%;\n    height: 100%;\n    float: left;\n    box-sizing: border-box;\n}\n\n.myform-area .form-area .form-content {\n    width: 50%;\n    padding: 40px 30px;\n}\n\n.myform-area .form-area .form-content h2 {\n    color: #fff;\n}\n\n.myform-area .form-area .form-content p {\n    color: #fff;\n}\n\n.myform-area .form-area .form-content ul {\n    margin-top: 50px;\n}\n\n.myform-area .form-area .form-content ul li {\n    display: inline-block;\n    margin-right: 10px;\n}\n\n.myform-area .form-area .form-content a i {\n    margin-right: 10px;\n}\n\n.myform-area .form-area .form-content .facebook {\n    display: block;\n    position: relative;\n    top: -39px;\n    padding: 8px 140px;\n    background: #3B579D;\n    color: #fff;\n    font-size: 15px;\n    text-transform: capitalize;\n    border-radius: 4px;\n    border: 1px solid #3B579D;\n    transition: all .5s;\n}\n\n.myform-area .form-area .form-content .facebook:hover, .myform-area .form-area .form-content .facebook:focus {\n    background: transparent;\n}\n\n.myform-area .form-area .form-content .twitter {\n    display: block;\n    position: relative;\n    top: -48px;\n    padding: 8px 140px;\n    background: #00ACED;\n    color: #fff;\n    font-size: 15px;\n    text-transform: capitalize;\n    border-radius: 4px;\n    border: 1px solid #00ACED;\n    -webkit-transition: all .5s;\n    -o-transition: all .5s;\n    transition: all .5s;\n}\n\n.myform-area .form-area .form-content .twitter:hover, .myform-area .form-area .form-content .twitter:focus {\n    background: transparent;\n}\n\n.myform-area .form-area .form-input {\n    background-color: white;\n    position: relative;\n    overflow: hidden;\n    box-shadow: 0 0 40px 0 #e1e1e1;\n}\n\n.myform-area .form-area .form-input {\n    width: 50%;\n    background: #fff;\n    padding: 40px 30px;\n}\n\n.myform-area .form-area .form-input h2 {\n    margin-bottom: 20px;\n    color: #07315B;\n}\n\n.myform-area .form-area .form-input input {\n    position: relative;\n    height: 60px;\n    padding: 20px 0;\n}\n\n.myform-area .form-area .form-input textarea {\n    height: 120px;\n    padding: 20px 0;\n}\n\n.myform-area .form-area .form-input input, .myform-area .form-area .form-input textarea {\n    text-transform: capitalize;\n    width: 100%;\n    box-sizing: border-box;\n    outline: none;\n    border: none;\n    border-bottom: 2px solid #e1e1e1;\n    color: #07315B;\n}\n\n.myform-area .form-area .form-input form .form-group {\n    position: relative;\n}\n\n.myform-area .form-area .form-input form .form-group label {\n    position: absolute;\n    text-transform: capitalize;\n    top: 20px;\n    left: 0;\n    pointer-events: none;\n    font-size: 14px;\n    color: #595959;\n    margin-bottom: 0;\n    transition: all .6s;\n}\n\n.myform-area .form-area .form-input input:focus~label, .myform-area .form-area .form-input textarea:focus~label, .myform-area .form-area .form-input input:valid~label, .myform-area .form-area .form-input textarea:valid~label {\n    top: -5px;\n    opacity: 0;\n    left: 0;\n    color: rgba(103, 58, 183);\n    font-size: 12px;\n    color: #07315B;\n    font-weight: bold;\n}\n\n.myform-area .form-area .form-input input:focus, .myform-area .form-area .form-input textarea:focus, .myform-area .form-area .form-input input:valid, .myform-area .form-area .form-input textarea:valid {\n    border-bottom: 2px solid rgba(103, 58, 183);\n}\n\n.myform-area .form-area .form-text {\n    margin-top: 30px;\n}\n\n.myform-area .form-area .form-text span a {\n    color: rgba(103, 58, 183);\n}\n\n.myform-area .form-area .myform-button {\n    margin-top: 30px;\n}\n\n.myform-area .form-area .myform-button .myform-btn {\n    width: 100%;\n    height: 50px;\n    font-size: 17px;\n    background: rgba(103, 58, 183);\n    border: none;\n    border-radius: 50px;\n    color: #fff;\n    outline: none;\n    cursor: pointer;\n    -webkit-transition: all .5s;\n    -o-transition: all .5s;\n    transition: all .5s;\n}\n\n.myform-area .form-area .myform-button .myform-btn:hover {\n    background: #07315B;\n}\n\n.signup-text {\n    padding-bottom: 5px;\n    padding-left: 18%;\n}\n.signUPtext {\n    color: green;\n    position: relative;\n    left: 50%;\n    top: -27px;\n    padding-right: 10px;\n    cursor: pointer;\n}\n\n.signUPtext:hover {\n    color: rgb(71, 158, 71);\n}\n\n.loginInfo{\n    margin-left:5px;\n}"
  },
  {
    "path": "frontend/src/components/Login-Signup/loginFunctions.js",
    "content": "import axios from 'axios'\n\nexport function logUserIn(userCredentials) {\n    let apiUrl = 'http://localhost:8080/login'\n    return axios.post(apiUrl,userCredentials, {\n        headers: {\n            'Content-Type': 'application/json'\n        }\n    })\n}\n\n\nexport function loadRoutes(){\n    const authToken = sessionStorage.getItem('authToken' || '')\n    let apiUrl = `http://localhost:8080/user/profile?secret_token=${authToken}`\n    return axios.get(apiUrl)\n}\n\nexport function getCurrentUserDetails(authToken){\n    const token =  authToken\n    let apiUrl = `http://localhost:8080/user/profile?secret_token=${token}`\n    return axios.get(apiUrl)\n}"
  },
  {
    "path": "frontend/src/components/Login-Signup/signup.css",
    "content": ".container {\n    width: 100vw;\n    height: 100vh;\n    background-size: cover;\n}\n\n.form-container-in {\n    box-shadow: 0 0 40px 0 #000000;\n}\n\n.form-container-in {\n    position: absolute;\n    background-color: rgba(245, 245, 245, 0.486);\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    opacity: 0.9;\n}\n\n.log-container {\n    text-align: center;\n}\n\n.flex-container {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    /*centers items on the line (the x-axis by default)*/\n    align-items: center;\n}\n\np.lead {\n    padding: 5px 10px;\n    position: relative;\n    z-index: 10;\n}\n\n.row.full {\n    width: 80%;\n}\n\n.right-divider {\n    background: rgba(103, 58, 183, 0.7);\n    padding-top: 30px;\n}\n\n.left-divider {\n    border-left: solid 1px rgb(3, 4, 5);\n    width: 50%;\n    background: white;\n    padding-top: 30px;\n    padding-left: 20px;\n}\n\n.lead-text {\n    text-align: center;\n    padding: 15px 10px;\n    font-weight: 300;\n    font-size: 1.8em;\n    line-height: 15px;\n    letter-spacing: 1px;\n    text-transform: uppercase;\n}\n\n/* social */\n\n#social-media {\n    position: relative;\n    top: 100px;\n    top: 25vh;\n    font-size: 1rem;\n    text-align: center;\n    overflow: hidden;\n}\n\n.btnn {\n    width: 100%;\n    clear: both;\n    white-space: nowrap;\n    font-size: .8em;\n    display: block;\n    border-radius: 5px;\n    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.35);\n    margin: 2px;\n    -webkit-transition: all .5s;\n    -moz-transition: all .5s;\n    transition: all .5s;\n    overflow: hidden\n}\n\n.btnn:hover {\n    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.45);\n}\n\n.btnn:focus {\n    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4);\n}\n\n.btnn>span, .btnn-icon>i {\n    float: left;\n    padding: 13px;\n    -webkit-transition: all .5s;\n    -moz-transition: all .5s;\n    transition: all .5s;\n    line-height: 1em\n}\n\n.btnn>span {\n    padding: 14px 18px 16px;\n    white-space: nowrap;\n    color: #FFF;\n    background: #b8b8b8\n}\n\n.btnn:hover>span {\n    color: #212121;\n    font-weight: 900;\n}\n\n.btnn:focus>span {\n    background: #9a9a9a\n}\n\n.btnn-icon>i {\n    border-radius: 5px 0 0 5px;\n    position: relative;\n    width: 20px;\n    text-align: center;\n    font-size: 1.25em;\n    color: #fff;\n    background: #212121\n}\n\n.btnn-icon>i:after {\n    content: \"\";\n    border: 8px solid;\n    border-color: transparent transparent transparent #222;\n    position: absolute;\n    top: 13px;\n    right: -15px\n}\n\n.btnn-icon:hover>i, .btnn-icon:focus>i {\n    color: #FFF;\n}\n\n.btnn-icon>span {\n    border-radius: 0 5px 5px 0\n}\n\n/*Facebook*/\n\n.icon-soc-fb {\n    display: block;\n    padding: 8px 100px;\n    background: #3B579D;\n    color: #fff;\n    margin-top: 20px;\n    margin-left: 25px;\n    font-size: 20px;\n    text-transform: capitalize;\n    border-radius: 4px;\n    text-align: center;\n    border: 1px solid #3B579D;\n    width: 80%;\n    transition: all .5s;\n}\n\n.icon-soc-fb:hover {\n    background: transparent;\n}\n\n.icon-soc-tw {\n    display: block;\n    padding: 8px 100px;\n    background: rgb(93, 153, 223);\n    color: #fff;\n    margin-top: 20px;\n    margin-left: 25px;\n    font-size: 20px;\n    text-transform: capitalize;\n    border-radius: 4px;\n    text-align: center;\n    border: 1px solid #3B579D;\n    width: 80%;\n    transition: all .5s;\n}\n\n.icon-soc-tw:hover {\n    background: transparent;\n}\n\n.media-container {\n    padding: 5px 20px;\n}\n\ninput.form-submit {\n    padding: 5px 20px;\n    font-size: 1.3em;\n    font-weight: 300;\n    text-transform: capitalize;\n    margin-top: 30px;\n}\n\n.form-group2 {\n    width: 20em;\n    padding-left: 20px;\n}\n\n.rd {\n    padding-left: 20px;\n    padding-bottom: 10px;\n    padding-top: 2px;\n}\n\n.rd>input {\n    padding-left: 20px;\n}\n\n.mn-txt {\n    margin-bottom: 100px;\n    color: white;\n    font-size: 30px;\n}\n\n.link-text {\n    padding-bottom: 5px;\n    padding-left: 50%;\n}\n\n.signuptext {\n    color: green;\n    position: relative;\n    left: 100%;\n    top: -27px;\n    padding-right: 10px;\n    cursor: pointer;\n}\n\n.signuptext:hover {\n    color: rgb(71, 158, 71);\n}\n\n.sub-btn {\n    background: rgba(103, 58, 183);\n    border-color: rgba(103, 58, 183);\n}\n\n.sub-btn:hover {\n    background: #07315B;\n}\n\n.female-radio {\n    padding-left: 20px;\n}\n\n.sgnUp {\n    margin-left: 0;\n}\n.pdding{\n    padding-left:0;\n}"
  },
  {
    "path": "frontend/src/components/PaymentTab/PaymentTab.css",
    "content": ".paym {\n    /* border:1px solid white; */\n    height: auto;\n    background-color: #00abeeb0;\n}\n\n.App-payment {\n    padding: 10px 30px;\n    text-align: center;\n    margin-top: 20px;\n    border: 1px solid white;\n    background-color: rgba(255, 255, 255, 0.603);\n    border-radius: 5px;\n    margin-bottom:20px;\n    padding-bottom:30px;\n}\n\n.credit-form {\n    margin-top: 31px;\n    max-width: 400px;\n    margin-right: 19px;\n}\n\n.actionButton {\n    margin-top: 15px;\n}\n\n.frm-ctrl {\n    border-radius: 5px;\n    width: 80%;\n    height: 38px;\n    padding: 0px 5px;\n    text-align: center;\n}\n\n.cl1 {\n    float: left;\n    width: 60%;\n}\n\n.columnTwo {\n    float: right;\n    width: 54%;\n    padding: 10px;\n    margin: 0;\n    text-align: center;\n    margin-left: 43px;\n    border: 1px solid rgb(255, 255, 255);\n    background-color: rgba(255, 255, 255, 0.603);\n    height: fit-content;\n    margin-top: 20px;\n    border-radius: 5px;\n    margin-bottom:20px;\n}\n\n.btCustom {\n    width: 62%;\n    margin-left: 17px;\n}\n\n.pPayment {\n    text-transform: uppercase;\n    font-weight: 900;\n    font-size: larger;\n}\n\n.cvc {\n    width: 57px;\n    margin-left: 27px;\n    text-align: center;\n}\n\n.pt{\n    padding-left:0;\n}\n.usrName{\n    text-transform: capitalize;\n}\n\n.hdng{\n    font-weight: bold;\n}\n\n.hr1{\n    background-color: black;\n    width:38%;\n    position:absolute;\n    left:51%;\n    top:37%;\n    \n}\n.hr2{\n    background-color: black;\n    width:38%;\n    position:absolute;\n    left:51%;\n    top:55%;\n}\n\n.hr3{\n    background-color: rgba(94, 91, 91, 0.685);\n}"
  },
  {
    "path": "frontend/src/components/PaymentTab/PaymentTab.js",
    "content": "import React from 'react'\nimport Card from 'react-credit-cards'\nimport './PaymentTab.css'\nimport jwt_decode from 'jwt-decode'\n\nimport {\n    formatCreditCardNumber,\n    formatCVC,\n    formatExpirationDate,\n    formatFormData\n} from './utils'\nimport 'react-credit-cards/es/styles-compiled.css'\n\nexport default class App extends React.Component {\n    state = {\n        number: '',\n        name: '',\n        expiry: '',\n        cvc: '',\n        issuer: '',\n        focused: '',\n        formData: '',\n        token: ''\n    }\n\n    componentDidMount() {\n        const tok = sessionStorage.getItem('authToken')\n        const decoded = jwt_decode(tok)\n        this.setState({ token: decoded.user })\n    }\n\n    handleCallback = ({ issuer }, isValid) => {\n        if (isValid) {\n            this.setState({ issuer })\n        }\n    }\n\n    handleInputFocus = ({ target }) => {\n        this.setState({\n            focused: target.name\n        })\n    }\n\n    handleInputChange = ({ target }) => {\n        if (target.name === 'number') {\n            target.value = formatCreditCardNumber(target.value)\n        } else if (target.name === 'expiry') {\n            target.value = formatExpirationDate(target.value)\n        } else if (target.name === 'cvc') {\n            target.value = formatCVC(target.value)\n        }\n\n        this.setState({\n            [target.name]: target.value\n        })\n    }\n\n    handleSubmit = e => {\n        e.preventDefault()\n        const { issuer } = this.state\n        const formData = [...e.target.elements]\n            .filter(d => d.name)\n            .reduce((acc, d) => {\n                acc[d.name] = d.value\n                return acc\n            }, {})\n\n        this.setState({ formData })\n        this.form.reset()\n    }\n\n    moveToTicketPage = e => {\n        e.preventDefault()\n        localStorage.setItem('paymentData', JSON.stringify(this.state.token))\n        window.location.href = '/getTicket'\n    }\n\n    renderNamesOfPassenger = () => {\n        let passArray = localStorage.getItem('nameData')\n        if (passArray) {\n            let nameArray = JSON.parse(passArray)\n            return nameArray.map((name, idx) => {\n                return <p key = { idx } > { name } < /p>\n            })\n        }\n    }\n\n    renderSeatNumbers = () => {\n        let seatArray = localStorage.getItem('reservedSeats')\n        if (seatArray) {\n            let seaArr = JSON.parse(seatArray)\n            return seaArr.map((seat, idx) => {\n                return <p key = { idx } > { seat } < /p>\n            })\n        }\n    }\n\n    getSumTotal = () => {\n        let count = 0\n        let tax = 150\n        let seatArray = localStorage.getItem('reservedSeats')\n        if (seatArray) {\n            let seaArr = JSON.parse(seatArray)\n            for (let i = 0; i < seaArr.length; i++) {\n                count++\n            }\n            return ( <\n                div >\n                <\n                hr className = 'hr3' / >\n                <\n                p > { 1000 * count } < /p> <p> +{tax} </p > < p > { 1000 * count + tax } < /p>{' '} <\n                /div>\n            )\n        }\n    }\n\n    render() {\n        const {\n            name,\n            number,\n            expiry,\n            cvc,\n            focused,\n            issuer,\n            formData,\n            token\n        } = this.state\n\n        return ( <\n            div className = 'paym' >\n            <\n            div className = 'row' >\n            <\n            div key = 'Payment' >\n            <\n            div className = 'App-payment cl-1' >\n            <\n            p className = 'pPayment' > Enter Credit card details < /p>{' '} <\n            Card number = { number }\n            name = { name }\n            expiry = { expiry }\n            cvc = { cvc }\n            focused = { focused }\n            callback = { this.handleCallback }\n            />{' '} <\n            form className = 'credit-form'\n            ref = { c => (this.form = c) }\n            onSubmit = { this.handleSubmit } >\n            <\n            div className = 'form-group' >\n            <\n            input type = 'tel'\n            name = 'number'\n            className = 'frm-ctrl'\n            placeholder = 'Card Number'\n            pattern = '[\\d| ]{16,22}'\n            required onChange = { this.handleInputChange }\n            onFocus = { this.handleInputFocus }\n            />{' '} <\n            /div>{' '} <\n            div className = 'form-group' >\n            <\n            input type = 'text'\n            name = 'name'\n            className = 'frm-ctrl'\n            placeholder = 'Name'\n            required onChange = { this.handleInputChange }\n            onFocus = { this.handleInputFocus }\n            />{' '} <\n            /div>{' '} <\n            div className = 'form-group' >\n            <\n            input type = 'tel'\n            name = 'expiry'\n            className = 'frm-ctrl'\n            placeholder = 'Valid Thru'\n            pattern = '\\d\\d/\\d\\d'\n            required onChange = { this.handleInputChange }\n            onFocus = { this.handleInputFocus }\n            />{' '} <\n            /div>{' '} <\n            div className = 'form-group' >\n            <\n            input type = 'tel'\n            name = 'cvc'\n            className = 'frm-ctrl cvc'\n            placeholder = 'CVC'\n            pattern = '\\d{3,4}'\n            required onChange = { this.handleInputChange }\n            onFocus = { this.handleInputFocus }\n            />{' '} <\n            /div>{' '} <\n            input type = 'hidden'\n            name = 'issuer'\n            value = { issuer }\n            />{' '} <\n            div className = '' >\n            <\n            button onClick = { e => this.moveToTicketPage(e) }\n            className = 'btn btn-light btCustom' >\n            PAY { ' ' } <\n            /button>{' '} <\n            /div>{' '} <\n            /form>{' '} <\n            /div>{' '} <\n            /div>{' '} <\n            div className = 'columnTwo' >\n            <\n            h3 > Unique Travels < /h3>{' '} <\n            div >\n            <\n            p > BOOKING DETAILS < /p>{' '} <\n            div className = 'row' >\n            <\n            div className = 'col-6 pt' >\n            <\n            p className = 'hdng' > Username < /p> <hr className='hr3' / >\n            <\n            p className = 'hdng' > Date < /p> <p className='hdng'> From </p >\n            <\n            p className = 'hdng' > To < /p> <hr className='hr3' / >\n            <\n            p className = 'hdng' > Passengers < /p>{' '} { this.renderNamesOfPassenger() } < hr className = 'hr3' / >\n            <\n            p className = 'hdng' > Ticket price < /p>{' '} <\n            p className = 'hdng' > Tax < /p>{' '} <\n            p className = 'hdng' > Toal Sum < /p>{' '} <\n            /div>{' '} <\n            div className = 'col-6' >\n            <\n            hr className = 'hr3' / >\n            <\n            p className = 'usrName' > { ' ' } { localStorage.getItem('date') } { ' ' } <\n            /p>{' '} <\n            p className = 'usrName' > { localStorage.getItem('start') } < /p>{' '} <\n            p className = 'usrName' > { ' ' } { localStorage.getItem('destination') } { ' ' } <\n            /p>{' '} <\n            hr className = 'hr3' / >\n            <\n            p className = 'hdng' >\n            Seat No { ' ' } <\n            /p> {this.renderSeatNumbers()} <p> {this.getSumTotal()} </p >\n            <\n            /div>{' '} <\n            /div>{' '} <\n            /div>{' '} <\n            /div>{' '} <\n            /div>{' '} <\n            /div>\n        )\n    }\n}"
  },
  {
    "path": "frontend/src/components/PaymentTab/utils.js",
    "content": "import Payment from \"payment\";\n\nfunction clearNumber(value = \"\") {\n    return value.replace(/\\D+/g, \"\");\n}\n\nexport function formatCreditCardNumber(value) {\n    if (!value) {\n        return value;\n    }\n\n    const issuer = Payment.fns.cardType(value);\n    const clearValue = clearNumber(value);\n    let nextValue;\n\n    switch (issuer) {\n        case \"amex\":\n            nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(\n                4,\n                10\n            )} ${clearValue.slice(10, 15)}`;\n            break;\n        case \"dinersclub\":\n            nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(\n                4,\n                10\n            )} ${clearValue.slice(10, 14)}`;\n            break;\n        default:\n            nextValue = `${clearValue.slice(0, 4)} ${clearValue.slice(\n                4,\n                8\n            )} ${clearValue.slice(8, 12)} ${clearValue.slice(12, 19)}`;\n            break;\n    }\n\n    return nextValue.trim();\n}\n\nexport function formatCVC(value, prevValue, allValues = {}) {\n    const clearValue = clearNumber(value);\n    let maxLength = 4;\n\n    if (allValues.number) {\n        const issuer = Payment.fns.cardType(allValues.number);\n        maxLength = issuer === \"amex\" ? 4 : 3;\n    }\n\n    return clearValue.slice(0, maxLength);\n}\n\nexport function formatExpirationDate(value) {\n    const clearValue = clearNumber(value);\n\n    if (clearValue.length >= 3) {\n        return `${clearValue.slice(0, 2)}/${clearValue.slice(2, 4)}`;\n    }\n\n    return clearValue;\n}\n\nexport function formatFormData(data) {\n    return Object.keys(data).map(d => `${d}: ${data[d]}`);\n}\n"
  },
  {
    "path": "frontend/src/components/Profile/Profile.js",
    "content": "import React, { useState, useEffect } from 'react'\nimport './profile.css'\nimport jwt_decode from 'jwt-decode'\n\nexport default function Profile({ history }) {\n    const [token, setToken] = useState({})\n\n    useEffect(() => {\n        const tok = sessionStorage.getItem('authToken')\n        const decoded = jwt_decode(tok)\n        setToken(decoded.user)\n    }, [])\n\n    const goBackToRoutes = e => {\n        e.preventDefault()\n        history.push('/routes')\n    }\n\n    return ( <\n        div className = 'container' >\n        <\n        section className = 'profile' >\n        <\n        header className = 'header' >\n        <\n        div className = 'details' >\n        <\n        img src = 'https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b38c22a46932485790a3f52c61fcbe5a'\n        alt = 'John Doe'\n        className = 'profile-pic' /\n        >\n        <\n        h1 className = 'heading' > { token?.name } < /h1>{' '} <\n        div className = 'location' >\n        <\n        svg class = 'svg-icon'\n        width = '18'\n        height = '18'\n        viewBox = '0 0 24 24'\n        fill = 'currentColor' >\n        <\n        path d = 'M17.388,4.751H2.613c-0.213,0-0.389,0.175-0.389,0.389v9.72c0,0.216,0.175,0.389,0.389,0.389h14.775c0.214,0,0.389-0.173,0.389-0.389v-9.72C17.776,4.926,17.602,4.751,17.388,4.751 M16.448,5.53L10,11.984L3.552,5.53H16.448zM3.002,6.081l3.921,3.925l-3.921,3.925V6.081z M3.56,14.471l3.914-3.916l2.253,2.253c0.153,0.153,0.395,0.153,0.548,0l2.253-2.253l3.913,3.916H3.56z M16.999,13.931l-3.921-3.925l3.921-3.925V13.931z' > { ' ' } <\n        /path>{' '} <\n        /svg>{' '} <\n        p > { token?.email } < /p>{' '} <\n        /div> <\n        div className = 'stats' >\n        <\n        div className = 'col-4' >\n        <\n        h4 > 20 < /h4> <p> Reviews </p > { ' ' } <\n        /div>{' '} <\n        div className = 'col-4' >\n        <\n        h4 > 10 < /h4> <p> Bookings </p > { ' ' } <\n        /div>{' '} <\n        div className = 'col-4' >\n        <\n        h4 > 5 < /h4> <p> 5 - Star </p > { ' ' } <\n        /div>{' '} <\n        /div>{' '} <\n        div className = 'stat2' >\n        <\n        div className = 'col-12' >\n        <\n        button className = 'btn btn-dark bck'\n        onClick = { e => goBackToRoutes(e) } >\n        GO BACK { ' ' } <\n        /button>{' '} <\n        /div>{' '} <\n        /div>{' '} <\n        /div>{' '} <\n        /header>{' '} <\n        /section>{' '} <\n        /div>\n    )\n}"
  },
  {
    "path": "frontend/src/components/Profile/profile.css",
    "content": "@import url(\"https://fonts.googleapis.com/css?family=Lato:400,400i,700\");\nbody {\n    margin: 0;\n    font-family: 'Lato', sans-serif;\n}\n\n.profile {\n    padding: 30px 30px;\n}\n\n.header {\n    min-height: 60vh;\n    background: rgba(36, 132, 192, 0.637);\n    background: linear-gradient(to right, rgba(236, rgba(162, 0, 255, 0.719), 0.658), #009FFF);\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.45);\n}\n\n.details {\n    text-align: center;\n}\n\n.profile-pic {\n    height: 6rem;\n    width: 6rem;\n    object-fit: center;\n    border-radius: 50%;\n    border: 2px solid #fff;\n}\n\n.location p {\n    display: inline-block;\n}\n\n.location svg {\n    vertical-align: middle;\n}\n\n.stats {\n    display: flex;\n}\n\n.stats .col-4 {\n    width: 10rem;\n    text-align: center;\n}\n\n.heading {\n    font-weight: 400;\n    font-size: 1.3rem;\n    margin: 1rem 0;\n    text-transform: uppercase;\n}\n\n.stat2 {\n    display: flex;\n}\n\n.stats .col-12 {\n    width: 10rem;\n    text-align: center;\n}\n\n.bck {\n    background-color: rgba(36, 104, 192, 0.637) !important;\n}"
  },
  {
    "path": "frontend/src/components/RouteSelection/RouteSelection.css",
    "content": ".ic .li a {\n    cursor: pointer;\n}\n\n.routePicker {\n    padding: 30px 18px;\n}\n\n.dropdown>.dropdown-menu {\n    top: 200%;\n    transition: 0.3s all ease-in-out;\n}\n\n.dropdown:hover>.dropdown-menu {\n    display: block;\n    top: 100%;\n}\n\n.dropdown>.dropdown-toggle:active {\n    pointer-events: none;\n}\n"
  },
  {
    "path": "frontend/src/components/RouteSelection/RouteSelection.js",
    "content": "import React from 'react'\nimport RouteSelector from '../routeSelector/Routeselector'\nimport SeatSelection from '../SeatSelection/SeatSelection'\nimport PaymentTab from '../PaymentTab/PaymentTab'\n\nexport default function RouteSelection({ history }) {\n\n    const handleUserIcon = e => {\n        e.preventDefault()\n        history.push('/profile')\n    }\n\n    const handleSignOut = e => {\n        e.preventDefault()\n        sessionStorage.removeItem('authToken')\n        localStorage.removeItem('reservedSeats')\n        localStorage.removeItem('nameData')\n        localStorage.clear()\n        history.push('/')\n    }\n\n    const handleLogoClick = e => {\n        e.preventDefault()\n        history.push('/routes')\n    }\n    \n    return (\n        <div className=\"container\">\n            <div>\n                <nav className=\"mb-4 navbar navbar-expand-lg navbar-dark bg-unique hm-gradient\">\n                    <a href=\"/#\" className=\"navbar-brand Company-Log\" onClick={(e) => handleLogoClick(e)}>UT</a>\n                    <button className=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent-3\" aria-controls=\"navbarSupportedContent-3\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n                        <span className=\"navbar-toggler-icon\"></span>\n                    </button>\n                    <div className=\"collapse navbar-collapse\" id=\"navbarSupportedContent-3\">\n                        <ul className=\"navbar-nav ml-auto nav-flex-icons ic\">\n                            <li className=\"nav-item\">\n                                <a href=\"/#\" className=\"nav-link waves-effect waves-light\" onClick={e => handleUserIcon(e)}><i className=\"fa fa-user user\"></i></a>\n                            </li>\n                            <li className=\"nav-item\">\n                                <a href=\"/#\" className=\"nav-link waves-effect waves-light\" onClick={e => handleSignOut(e)}>Sign-Out</a>\n                            </li>\n                        </ul>\n                    </div>\n                </nav>\n            </div>\n            <div>\n                <ul className=\"nav nav-pills\">\n                    <li className=\"nav-item\">\n                        <a className=\"nav-link active\" data-toggle=\"pill\" href=\"#home\">Select Bus</a>\n                    </li>\n                    <li className=\"nav-item\">\n                        <a className=\"nav-link \" data-toggle=\"pill\" href=\"#menu1\">Select Seat</a>\n                    </li>\n                    <li className=\"nav-item\">\n                        <a className=\"nav-link\" data-toggle=\"pill\" href=\"#menu2\">Payment</a>\n                    </li>\n                </ul>\n\n                <div className=\"tab-content\">\n                    <div className=\"tab-pane container active mn-box\" id=\"home\"><RouteSelector /></div>\n                    <div className=\"tab-pane container fade mn-box\" id=\"menu1\"><SeatSelection /></div>\n                    <div className=\"tab-pane container fade mn-box\" id=\"menu2\"><PaymentTab /></div>\n                </div>\n            </div>\n\n        </div>\n    )\n}\n"
  },
  {
    "path": "frontend/src/components/SeatSelection/SeatSelection.js",
    "content": "import React, { useState } from 'react'\nimport { FaAngleDoubleDown } from \"react-icons/fa\";\nimport './Tab.css'\nexport default function SeatSelection() {\n    const [name, setName] = useState([])\n    const [arrowDown, setArrowDown] = useState(false)\n    const [gender, setGender] = useState([])\n    const [reservedSeat, setReservedSeat] = useState([\"1A\", \"2A\", \"2B\", \"3B\", \"4A\", \"5C\", \"6A\", \"7B\", \"7C\", '8B', \"9B\", \"9C\"])\n    const [seatNumber, setSeatnumber] = useState([])\n    // const [passengers, setPassengers] = useState([])\n    // useEffect(()=>{\n    //     let bId = localStorage.getItem('selectedBusId')\n    //     if(bId){\n    //         getSeatArray(bId)            \n    //     }\n    //     else return\n    // },[localStorage])\n    // const getSeatArray = async bId => {\n    //     const baseURL = \"http://localhost:8080/booking/\"\n    //     await axios.get(baseURL, bId)\n    //     .this(response=>response.data)\n    //     .this(data=>{\n    //         setReservedSeat(data)\n    //         console.log(reservedSeat)\n    //     })\n    // }\n    const getSeatNumber = (e) => {\n        renderPassengerData(seatNumber)\n        let newSeat = e.target.value\n        if (reservedSeat.includes(newSeat)) {\n            e.disabled = true\n            if (seatNumber.includes(newSeat)) {\n                setSeatnumber(seatNumber.filter(seat => seat !== newSeat))\n            }\n        } else {\n            setSeatnumber([...seatNumber, newSeat])\n            setReservedSeat([...reservedSeat, newSeat])\n            console.log(seatNumber)\n        }\n    }\n    const handleGender = (e, seatNo) => {\n        const { value } = e.target\n        setGender(gender.concat(value))\n        // console.log(value)\n        // setPassengers(prevState => ({ ...prevState, SeatNo: seatNo, Gender: value }))\n    }\n    const handlePassengerName = (e, seatNo) => {\n        e.preventDefault()\n        let value = e.target.value\n        // console.log(value)\n        if (!value) {\n            return (setName(\"name is required\"))\n        } else {\n            setName(name.concat(value))\n            // setPassengers(prevState => ({ ...prevState, SeatNo: seatNo, Name: value }))\n        }\n    }\n    const handleSubmitDetails = e => {\n        e.preventDefault()\n        setArrowDown(true)\n        localStorage.setItem(\"reservedSeats\", JSON.stringify(seatNumber))\n        localStorage.setItem(\"nameData\", JSON.stringify(name))\n        console.log(name)\n        console.log(gender)\n    }\n\n    const renderPassengerData = (seatArray) => {\n        return seatArray.map((seat, idx) => {\n            return (\n                <form key={idx} className=\"form seatfrm\">\n                    <p class=\"text-capitalize text-center\">Seat No:{seat}</p>\n                    <input className=\"form-control seatInp\" onBlur={e => handlePassengerName(e, seat)} type=\"text\" name=\"passenger-name\" placeholder=\"Enter Name\" />\n                    <div class=\"form-check form-check-inline\">\n                        <input class=\"form-check-input\" type=\"radio\" name=\"gender\" id=\"male\" value=\"Male\" onClick={e => handleGender(e, seat)} />\n                        <label class=\"form-check-label\" for=\"male\">Male</label>\n                    </div>\n                    <div class=\"form-check form-check-inline\">\n                        <input class=\"form-check-input\" type=\"radio\" name=\"gender\" id=\"female\" value=\"Female\" onClick={e => handleGender(e, seat)} />\n                        <label class=\"form-check-label\" htmlFor=\"female\">Female</label>\n                    </div>\n                </form>)\n\n        })\n    }\n    return (\n        <div className=\"ss\">\n            <div className=\"row\">\n                <div className=\"column1\">\n                    <div className=\"plane\">\n                        <form onChange={e => getSeatNumber(e)}>\n                            <ol className=\"cabin fuselage\">\n                                <li className=\"row row--1\">\n                                    <ol className=\"seats\" type=\"A\">\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"1A\" id=\"1A\" />\n                                            <label htmlFor=\"1A\">1A</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" id=\"1B\" value=\"1B\" />\n                                            <label htmlFor=\"1B\">1B</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"1C\" id=\"1C\" />\n                                            <label htmlFor=\"1C\">1C</label>\n                                        </li>\n                                    </ol>\n                                </li>\n                                <li className=\"row row--2\">\n                                    <ol className=\"seats\" type=\"A\">\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"2A\" id=\"2A\" />\n                                            <label htmlFor=\"2A\">2A</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"2B\" id=\"2B\" />\n                                            <label htmlFor=\"2B\">2B</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"2C\" id=\"2C\" />\n                                            <label htmlFor=\"2C\">2C</label>\n                                        </li>\n\n                                    </ol>\n                                </li>\n                                <li className=\"row row--3\">\n                                    <ol className=\"seats\" type=\"A\">\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"3A\" id=\"3A\" />\n                                            <label htmlFor=\"3A\">3A</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"3B\" id=\"3B\" />\n                                            <label htmlFor=\"3B\">3B</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"3C\" id=\"3C\" />\n                                            <label htmlFor=\"3C\">3C</label>\n                                        </li>\n\n                                    </ol>\n                                </li>\n                                <li className=\"row row--4\">\n                                    <ol className=\"seats\" type=\"A\">\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"4A\" id=\"4A\" />\n                                            <label htmlFor=\"4A\">4A</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"4B\" id=\"4B\" />\n                                            <label htmlFor=\"4B\">4B</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"4C\" id=\"4C\" />\n                                            <label htmlFor=\"4C\">4C</label>\n                                        </li>\n\n                                    </ol>\n                                </li>\n                                <li className=\"row row--5\">\n                                    <ol className=\"seats\" type=\"A\">\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"5A\" id=\"5A\" />\n                                            <label htmlFor=\"5A\">5A</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"5B\" id=\"5B\" />\n                                            <label htmlFor=\"5B\">5B</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"5C\" id=\"5C\" />\n                                            <label htmlFor=\"5C\">5C</label>\n                                        </li>\n\n                                    </ol>\n                                </li>\n                                <li className=\"row row--6\">\n                                    <ol className=\"seats\" type=\"A\">\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"6A\" id=\"6A\" />\n                                            <label htmlFor=\"6A\">6A</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"6B\" id=\"6B\" />\n                                            <label htmlFor=\"6B\">6B</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"6C\" id=\"6C\" />\n                                            <label htmlFor=\"6C\">6C</label>\n                                        </li>\n\n                                    </ol>\n                                </li>\n                                <li className=\"row row--7\">\n                                    <ol className=\"seats\" type=\"A\">\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"7A\" id=\"7A\" />\n                                            <label htmlFor=\"7A\">7A</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"7B\" id=\"7B\" />\n                                            <label htmlFor=\"7B\">7B</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"7C\" id=\"7C\" />\n                                            <label htmlFor=\"7C\">7C</label>\n                                        </li>\n\n                                    </ol>\n                                </li>\n                                <li className=\"row row--8\">\n                                    <ol className=\"seats\" type=\"A\">\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"8A\" id=\"8A\" />\n                                            <label htmlFor=\"8A\">8A</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"8B\" id=\"8B\" />\n                                            <label htmlFor=\"8B\">8B</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"8C\" id=\"8C\" />\n                                            <label htmlFor=\"8C\">8C</label>\n                                        </li>\n\n                                    </ol>\n                                </li>\n                                <li className=\"row row--9\">\n                                    <ol className=\"seats\" type=\"A\">\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"9A\" id=\"9A\" />\n                                            <label htmlFor=\"9A\">9A</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"9B\" id=\"9B\" />\n                                            <label htmlFor=\"9B\">9B</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" disabled value=\"9C\" id=\"9C\" />\n                                            <label htmlFor=\"9C\">9C</label>\n                                        </li>\n\n                                    </ol>\n                                </li>\n                                <li className=\"row row--10\">\n                                    <ol className=\"seats\" type=\"A\">\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"10A\" id=\"10A\" />\n                                            <label htmlFor=\"10A\">10A</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"10B\" id=\"10B\" />\n                                            <label htmlFor=\"10B\">10B</label>\n                                        </li>\n                                        <li className=\"seat\">\n                                            <input type=\"checkbox\" value=\"10C\" id=\"10C\" />\n                                            <label htmlFor=\"10C\">10C</label>\n                                        </li>\n                                    </ol>\n                                </li>\n                            </ol>\n                        </form>\n                    </div>\n                </div>\n                <div className=\"column2\">\n                    <div className=\"seatInfo\">\n                        <form className=\"form-group\">\n                            {renderPassengerData(seatNumber)}\n                        </form>\n                        <div>\n                            <button onClick={e => handleSubmitDetails(e)} className=\"btn btn-info seatBT\">\n                                Confirm Details\n                            </button>\n                        </div>\n                        <div className={arrowDown ? \"activeArrow2\" : \"nonActive\"}>\n                            <FaAngleDoubleDown />\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n        </div>\n\n    )\n}\n"
  },
  {
    "path": "frontend/src/components/SeatSelection/Tab.css",
    "content": "*, *:before, *:after {\n    box-sizing: border-box;\n}\n\nhtml {\n    font-size: 16px;\n}\n\n.plane {\n    margin: 50px 0px;\n    max-width: 300px;\n    background-color: rgba(255, 255, 255, 0.534);\n    border-radius:5px;\n}\n\n.fuselage {\n    border: 1px solid #d8d8d8;\n}\n\nol {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n}\n\n.seats {\n    display: flex;\n    justify-content: space-around;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    width: 800px;\n}\n\n.seat {\n    display: flex;\n    flex: 0 0 14.2857142857%;\n    padding: 5px;\n    position: relative;\n}\n\n.seat:nth-child(3) {\n    margin-right: 14.2857142857%;\n}\n\n.seat input[type=checkbox] {\n    position: absolute;\n    opacity: 0;\n}\n\n.seat input[type=checkbox]:checked+label {\n    background: #bada55;\n    color: black;\n    -webkit-animation-name: rubberBand;\n    animation-name: rubberBand;\n    animation-duration: 300ms;\n    animation-fill-mode: both;\n}\n\n.seat input[type=checkbox]:disabled+label {\n    background: rgb(212, 112, 112);\n    text-indent: -9999px;\n    overflow: hidden;\n}\n\n.seat input[type=checkbox]:disabled+label:after {\n    content: \"X\";\n    text-indent: 0;\n    position: absolute;\n    top: 4px;\n    left: 50%;\n    transform: translate(-50%, 0%);\n}\n\n.seat input[type=checkbox]:disabled+label:hover {\n    box-shadow: none;\n    cursor: not-allowed;\n}\n\n.seat label {\n    display: block;\n    position: relative;\n    width: 100%;\n    text-align: center;\n    font-size: 14px;\n    font-weight: bold;\n    line-height: 1.5rem;\n    padding: 4px 0;\n    background: #00771a;\n    border-radius: 5px;\n    animation-duration: 300ms;\n    animation-fill-mode: both;\n    color: white;\n}\n\n.seat label:before {\n    content: \"\";\n    position: absolute;\n    width: 75%;\n    height: 75%;\n    top: 1px;\n    left: 50%;\n    transform: translate(-50%, 0%);\n    background: rgba(255, 255, 255, 0.4);\n    border-radius: 3px;\n}\n\n.seat label:hover {\n    cursor: pointer;\n    box-shadow: 0 0 0px 2px #7d86eb;\n}\n\n@-webkit-keyframes rubberBand {\n    0% {\n        -webkit-transform: scale3d(1, 1, 1);\n        transform: scale3d(1, 1, 1);\n    }\n    30% {\n        -webkit-transform: scale3d(1.25, 0.75, 1);\n        transform: scale3d(1.25, 0.75, 1);\n    }\n    40% {\n        -webkit-transform: scale3d(0.75, 1.25, 1);\n        transform: scale3d(0.75, 1.25, 1);\n    }\n    50% {\n        -webkit-transform: scale3d(1.15, 0.85, 1);\n        transform: scale3d(1.15, 0.85, 1);\n    }\n    65% {\n        -webkit-transform: scale3d(0.95, 1.05, 1);\n        transform: scale3d(0.95, 1.05, 1);\n    }\n    75% {\n        -webkit-transform: scale3d(1.05, 0.95, 1);\n        transform: scale3d(1.05, 0.95, 1);\n    }\n    100% {\n        -webkit-transform: scale3d(1, 1, 1);\n        transform: scale3d(1, 1, 1);\n    }\n}\n\n@keyframes rubberBand {\n    0% {\n        -webkit-transform: scale3d(1, 1, 1);\n        transform: scale3d(1, 1, 1);\n    }\n    30% {\n        -webkit-transform: scale3d(1.25, 0.75, 1);\n        transform: scale3d(1.25, 0.75, 1);\n    }\n    40% {\n        -webkit-transform: scale3d(0.75, 1.25, 1);\n        transform: scale3d(0.75, 1.25, 1);\n    }\n    50% {\n        -webkit-transform: scale3d(1.15, 0.85, 1);\n        transform: scale3d(1.15, 0.85, 1);\n    }\n    65% {\n        -webkit-transform: scale3d(0.95, 1.05, 1);\n        transform: scale3d(0.95, 1.05, 1);\n    }\n    75% {\n        -webkit-transform: scale3d(1.05, 0.95, 1);\n        transform: scale3d(1.05, 0.95, 1);\n    }\n    100% {\n        -webkit-transform: scale3d(1, 1, 1);\n        transform: scale3d(1, 1, 1);\n    }\n}\n\n.rubberBand {\n    -webkit-animation-name: rubberBand;\n    animation-name: rubberBand;\n}\n\n.column1 {\n    float: left;\n    width: 40%;\n}\n\n.column2 {\n    float: left;\n    width: 55%;\n    padding: 0;\n    margin: 0;\n}\n\n/* Clear floats after the columns */\n\n.row:after {\n    content: \"\";\n    display: table;\n    clear: both;\n}\n\n.ss {\n    /* width: auto; */\n    width: 100%;\n    border: 1px solid #00acee;\n    background-color: #00abeeb0;\n}\n\n.seatInfo {\n    /* position: relative;  */\n    left:-50px;\n    margin-top:49px;\n    border: 1px solid white;\n    height: auto;\n    border-radius: 5px;\n}\n\n.seatfrm{\n    border:1px solid white;\n}\n.seatInp{\n    margin-right:-8px;\n    width:50%;\n}\n\n.form-check{\n    margin-left: 32px;\n    margin-top:5px;\n}\n\n.seatBT{\n    display:block;\n    margin-left:36%;\n}\n\n.hideBT{\n    display:none;\n}\n\n.activeArrow2 {\n    color: rgb(0, 63, 0);\n    position: absolute;\n    margin-top:50px;\n    left: 370px;\n    animation: bounce 0.5s infinite linear;\n}\n\n@-webkit-keyframes bounce {\n    0% {\n        top: 0;\n    }\n    50% {\n        top: -0.2em;\n    }\n    70% {\n        top: -0.3em;\n    }\n    100% {\n        top: 0;\n    }\n}\n\n@-moz-keyframes bounce {\n    0% {\n        top: 0;\n    }\n    50% {\n        top: -0.2em;\n    }\n    70% {\n        top: -0.3em;\n    }\n    100% {\n        top: 0;\n    }\n}\n\n@-o-keyframes bounce {\n    0% {\n        top: 0;\n    }\n    50% {\n        top: -0.2em;\n    }\n    70% {\n        top: -0.3em;\n    }\n    100% {\n        top: 0;\n    }\n}\n\n@-ms-keyframes bounce {\n    0% {\n        top: 0;\n    }\n    50% {\n        top: -0.2em;\n    }\n    70% {\n        top: -0.3em;\n    }\n    100% {\n        top: 0;\n    }\n}\n\n@keyframes bounce {\n    0% {\n        top: 0;\n    }\n    50% {\n        top: -0.2em;\n    }\n    70% {\n        top: -0.3em;\n    }\n    100% {\n        top: 0;\n    }\n}"
  },
  {
    "path": "frontend/src/components/TicketPage/TicketPage.css",
    "content": ".tpMain {\n    width: 100%;\n    padding: 2px 100px;\n    height: 500px;\n    margin-left: 220px;\n}\n\n*, *::after {\n    box-sizing: border-box;\n    margin: 0;\n}\n\nbody {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 100vh;\n    color: #454f54;\n    background-color: #f4f5f6;\n    background-image: linear-gradient(to bottom left, #abb5ba, #d5dadd);\n}\n\n.ticket {\n    display: grid;\n    grid-template-rows: auto 1fr auto;\n    max-width: 24rem;\n}\n\n.ticket__header, .ticket__body, .ticket__footer {\n    padding: 1rem;\n    background-color: #fff;\n    border: 1px solid #abb5ba;\n    box-shadow: 0 2px 4px rgba(41, 54, 61, 0.25);\n}\n\n.ticket__header {\n    font-size: 1.3rem;\n    border-top: 0.25rem solid #dc143c;\n    border-bottom: none;\n    box-shadow: none;\n    padding: 20px 80px;\n}\n\n.ticket__wrapper {\n    box-shadow: 0 2px 4px rgba(41, 54, 61, 0.25);\n    border-radius: 0.375em 0.375em 0 0;\n    overflow: hidden;\n}\n\n.ticket__divider {\n    position: relative;\n    height: 1rem;\n    background-color: #fff;\n    margin-left: 0.5rem;\n    margin-right: 0.5rem;\n}\n\n.ticket__divider::after {\n    content: '';\n    position: absolute;\n    height: 50%;\n    width: 100%;\n    top: 0;\n    border-bottom: 2px dashed #e9ebed;\n}\n\n.ticket__notch {\n    position: absolute;\n    left: -0.5rem;\n    width: 1rem;\n    height: 1rem;\n    overflow: hidden;\n}\n\n.ticket__notch::after {\n    content: '';\n    position: relative;\n    display: block;\n    width: 2rem;\n    height: 2rem;\n    right: 100%;\n    top: -50%;\n    border: 0.5rem solid #fff;\n    border-radius: 50%;\n    box-shadow: inset 0 2px 4px rgba(41, 54, 61, 0.25);\n}\n\n.ticket__notch--right {\n    left: auto;\n    right: -0.5rem;\n}\n\n.ticket__notch--right::after {\n    right: 0;\n}\n\n.ticket__body {\n    border-bottom: none;\n    border-top: none;\n}\n\n.ticket__body>*+* {\n    margin-top: 1.5rem;\n    padding-top: 1.5rem;\n    border-top: 1px solid #e9ebed;\n}\n\n.ticket__section>*+* {\n    margin-top: 0.25rem;\n}\n\n.ticket__section>h3 {\n    font-size: 1.125rem;\n    margin-bottom: 0.5rem;\n}\n\n.ticket__header {\n    font-weight: bold;\n    font-size: 1.25rem;\n}\n\n.ticket__footer {\n    border-top: 2px dashed #e9ebed;\n    border-radius: 0 0 0.325rem 0.325rem;\n    font-size:1.25rem;\n}\n\n.seatNo {\n    display: inline-block;\n}\n\n.names{\n    text-transform: capitalize;\n}\n\n.idData{\n    font-size:15px;\n    text-transform: uppercase;\n}"
  },
  {
    "path": "frontend/src/components/TicketPage/TicketPage.js",
    "content": "import React from 'react'\nimport './TicketPage.css'\nexport default function TicketPage({ history }) {\n\n    const handleSignOut = e => {\n        e.preventDefault()\n        sessionStorage.removeItem('authToken')\n        localStorage.removeItem('reservedSeats')\n        localStorage.removeItem('nameData')\n        localStorage.clear()\n        history.push('/')\n    }\n    const handleBookAgainIcon = e => {\n        e.preventDefault()\n        history.push('/routes')\n    }\n    const getLocationData = () => {\n        let from = localStorage.getItem(\"start\")\n        let to = localStorage.getItem(\"destination\")\n        return (\n            <div>\n                <p>From:  {from}</p>\n                <p>To:  {to}</p>\n            </div>\n        )\n    }\n    const getPassengerName = () => {\n        let nameArray = localStorage.getItem(\"nameData\")\n        let names = JSON.parse(nameArray)\n        return names.map((name, idx) => {\n            return (\n                <div key={idx}>\n                    <p className=\"names\">{name}</p>\n                </div>\n            )\n        })\n    }\n    const getSeatNumbers = () => {\n        let noArray = localStorage.getItem(\"reservedSeats\")\n        let arr = JSON.parse(noArray)\n        return arr.map((element, idx) => {\n            return (\n                <div key={idx}>\n                    <p classsName=\"seatNo\">{element}</p>\n                </div>\n            )\n        })\n    }\n    const getIdNumber = () => {\n        let tokenData = localStorage.getItem(\"selectedBusId\")\n        return (\n            <p className=\"idData\">\n                {tokenData}\n            </p>\n        )\n    }\n    const getDateValue = () => {\n        let dat = localStorage.getItem(\"date\")\n        return <p>On: {dat}, 10 AM (Hourly commute)</p>\n    }\n    return (\n\n        <div className=\"container\">\n            <div>\n                <nav className=\"mb-4 navbar navbar-expand-lg navbar-dark bg-unique hm-gradient\">\n                    <a href=\"/#\" className=\"navbar-brand Company-Log\">UT</a>\n                    <button className=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarSupportedContent-3\" aria-controls=\"navbarSupportedContent-3\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n                        <span className=\"navbar-toggler-icon\"></span>\n                    </button>\n                    <div className=\"collapse navbar-collapse\" id=\"navbarSupportedContent-3\">\n                        <ul className=\"navbar-nav ml-auto nav-flex-icons ic\">\n                            <li className=\"nav-item\">\n                                <a href=\"/#\" className=\"nav-link waves-effect waves-light\" onClick={e => handleBookAgainIcon(e)}>Book Again</a>\n                            </li>\n                            <li className=\"nav-item\">\n                                <a href=\"/#\" className=\"nav-link waves-effect waves-light\" onClick={e => handleSignOut(e)}>Sign-Out</a>\n                            </li>\n                        </ul>\n                    </div>\n                </nav>\n            </div>\n            <div className=\"tpMain\">\n                <article className=\"ticket\">\n                    <header className=\"ticket__wrapper\">\n                        <div className=\"ticket__header\">\n                            1 🎟 UNIQUE TRAVELS\n                        </div>\n                    </header>\n                    <div className=\"ticket__divider\">\n                        <div className=\"ticket__notch\"></div>\n                        <div className=\"ticket__notch ticket__notch--right\"></div>\n                    </div>\n                    <div className=\"ticket__body\">\n                        <section className=\"ticket__section\">\n                            {getLocationData()}\n                            {getSeatNumbers()}\n                            <p>Your seats are together <span>{getDateValue()}</span></p>\n                        </section>\n                        <section className=\"ticket__section\">\n                            <h3>Passenger Names</h3>\n                            {getPassengerName()}\n                        </section>\n                        <section className=\"ticket__section\">\n                            <h3>Payment Method</h3>\n                            <p>Credit Card</p>\n                        </section>\n                    </div>\n                    <footer className=\"ticket__footer\">\n                        <p>Transaction-ID</p>\n                        {getIdNumber()}\n                    </footer>\n                </article>\n            </div>\n\n        </div>\n\n    )\n}\n"
  },
  {
    "path": "frontend/src/components/routeSelector/Routeselector.css",
    "content": ".rdc {\n    margin-left: -15px;\n    height: auto;\n    width: auto;\n    border: 1px solid #00acee;\n    background-color: #00abeeb0;\n}\n\n.dropdown:hover>.dropdown-menu {\n    display: block;\n}\n\n.dropdown>.dropdown-toggle:active {\n    pointer-events: none;\n}\n\n.main-container{\n    height:auto;\n    padding:15px 20px;\n}\n\n.dropdown{\n    display:inline-block\n}\n\n::-webkit-datetime-edit { padding: 4px; }\n\n.date{\n    position: relative;\n    top:2px;\n}\n.getRoute{\n    margin-left: 180px;\n}\nselect.selectpicker {\n    display: inline-block;\n    margin: 0 auto;\n    padding-left: 20px;\n    padding:7px 7px;\n    border-radius:5px;\n    outline:none;\n    border: none;\n}\n.btn-new {\n    background-color: rgb(68, 141, 214);\n}\ninput{\n    margin-right:10px;\n    margin-left:35px;\n}\n\n.margin-left{\n    margin-left: 200px;\n}"
  },
  {
    "path": "frontend/src/components/routeSelector/Routeselector.js",
    "content": "import React, { useState } from 'react'\nimport './Routeselector.css'\nimport * as apiCall from './routeApifunc'\nimport BusList from '../BusList/BusList'\nexport default function Routeselector() {\n    const [dataInp, setData] = useState(\"\")\n    const [startCity, setStartCity] = useState('')\n    const [destination, setDestination] = useState('')\n    const handleToCity = e => {\n        e.preventDefault()\n        setDestination({ destination: e.target.value })\n        localStorage.setItem(\"destination\", e.target.value)\n    }\n    const renderBusList = (dataInp) => {\n        if (Object.keys(dataInp).length > 0) {\n            return (<BusList value={dataInp} />)\n        }\n    }\n    const handleFromCity = e => {\n        e.preventDefault()\n        setStartCity({ startCity: e.target.value })\n        localStorage.setItem(\"start\", e.target.value)\n        // console.log(startCity)\n    }\n\n    const getRoutes = e => {\n        e.preventDefault()\n        // console.log(startCity,destination)\n        apiCall.getRoutesFromApi(startCity.startCity, destination.destination)\n            .then(response => response.data)\n            .then(data => {\n                setData(data.bus)\n            })\n    }\n\n    const handleDate = e => {\n        e.preventDefault()\n        //    console.log(e.target.value)\n        localStorage.setItem(\"date\", e.target.value)\n    }\n    \n    return (\n        <div className=\"rdc\">\n            <div className=\"form-group inline\"></div>\n            <div className=\"main-container\">\n                <form className=\"form-inline\" onSubmit={e => getRoutes(e)}>\n                    <select name=\"ad_account_selected\" data-style=\"btn-new\" class=\"selectpicker\" onChange={e => { handleFromCity(e) }}>\n                        <option>FROM</option>\n                        <option>Chennai</option>\n                        <option>Bangalore</option>\n                    </select>\n                    <select name=\"ad_account_selected\" data-style=\"btn-new\" class=\"selectpicker\" onChange={e => { handleToCity(e) }}>\n                        <option>TO</option>\n                        <option>Hyderabad</option>\n                        <option>Coimbatore</option>\n                        <option>Vishakapatnam</option>\n                        <option>Bangalore</option>\n                        <option>Chenai</option>\n                    </select>\n                    <input onChange={e => { handleDate(e) }} type=\"date\"></input>\n                    <input type=\"submit\" className=\" btn btn-primary btn-md getRoute\" />\n                </form>\n\n                <div>\n                    {renderBusList(dataInp)}\n                </div>\n            </div>\n        </div>\n    )\n}\n"
  },
  {
    "path": "frontend/src/components/routeSelector/routeApifunc.js",
    "content": "import axios from 'axios'\n\nexport async function getRoutesFromApi(startCity, destination) {\n    const baseURL = \"http://localhost:8080/booking/\"\n    let incoming = await axios.post(baseURL, { startCity, destination })\n    return incoming\n}"
  },
  {
    "path": "frontend/src/index.css",
    "content": "body {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n    monospace;\n}\n"
  },
  {
    "path": "frontend/src/index.js",
    "content": "import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport * as serviceWorker from './serviceWorker';\n\nReactDOM.render(\n    <App />\n,\n  document.getElementById('root')\n);\n\n// If you want your app to work offline and load faster, you can change\n// unregister() to register() below. Note this comes with some pitfalls.\n// Learn more about service workers: https://bit.ly/CRA-PWA\nserviceWorker.unregister();\n"
  },
  {
    "path": "frontend/src/serviceWorker.js",
    "content": "// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://bit.ly/CRA-PWA\n\nconst isLocalhost = Boolean(\n  window.location.hostname === 'localhost' ||\n    // [::1] is the IPv6 localhost address.\n    window.location.hostname === '[::1]' ||\n    // 127.0.0.0/8 are considered localhost for IPv4.\n    window.location.hostname.match(\n      /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n    )\n);\n\nexport function register(config) {\n  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n    // The URL constructor is available in all browsers that support SW.\n    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n    if (publicUrl.origin !== window.location.origin) {\n      // Our service worker won't work if PUBLIC_URL is on a different origin\n      // from what our page is served on. This might happen if a CDN is used to\n      // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n      return;\n    }\n\n    window.addEventListener('load', () => {\n      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n      if (isLocalhost) {\n        // This is running on localhost. Let's check if a service worker still exists or not.\n        checkValidServiceWorker(swUrl, config);\n\n        // Add some additional logging to localhost, pointing developers to the\n        // service worker/PWA documentation.\n        navigator.serviceWorker.ready.then(() => {\n          console.log(\n            'This web app is being served cache-first by a service ' +\n              'worker. To learn more, visit https://bit.ly/CRA-PWA'\n          );\n        });\n      } else {\n        // Is not localhost. Just register service worker\n        registerValidSW(swUrl, config);\n      }\n    });\n  }\n}\n\nfunction registerValidSW(swUrl, config) {\n  navigator.serviceWorker\n    .register(swUrl)\n    .then(registration => {\n      registration.onupdatefound = () => {\n        const installingWorker = registration.installing;\n        if (installingWorker == null) {\n          return;\n        }\n        installingWorker.onstatechange = () => {\n          if (installingWorker.state === 'installed') {\n            if (navigator.serviceWorker.controller) {\n              // At this point, the updated precached content has been fetched,\n              // but the previous service worker will still serve the older\n              // content until all client tabs are closed.\n              console.log(\n                'New content is available and will be used when all ' +\n                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'\n              );\n\n              // Execute callback\n              if (config && config.onUpdate) {\n                config.onUpdate(registration);\n              }\n            } else {\n              // At this point, everything has been precached.\n              // It's the perfect time to display a\n              // \"Content is cached for offline use.\" message.\n              console.log('Content is cached for offline use.');\n\n              // Execute callback\n              if (config && config.onSuccess) {\n                config.onSuccess(registration);\n              }\n            }\n          }\n        };\n      };\n    })\n    .catch(error => {\n      console.error('Error during service worker registration:', error);\n    });\n}\n\nfunction checkValidServiceWorker(swUrl, config) {\n  // Check if the service worker can be found. If it can't reload the page.\n  fetch(swUrl, {\n    headers: { 'Service-Worker': 'script' },\n  })\n    .then(response => {\n      // Ensure service worker exists, and that we really are getting a JS file.\n      const contentType = response.headers.get('content-type');\n      if (\n        response.status === 404 ||\n        (contentType != null && contentType.indexOf('javascript') === -1)\n      ) {\n        // No service worker found. Probably a different app. Reload the page.\n        navigator.serviceWorker.ready.then(registration => {\n          registration.unregister().then(() => {\n            window.location.reload();\n          });\n        });\n      } else {\n        // Service worker found. Proceed as normal.\n        registerValidSW(swUrl, config);\n      }\n    })\n    .catch(() => {\n      console.log(\n        'No internet connection found. App is running in offline mode.'\n      );\n    });\n}\n\nexport function unregister() {\n  if ('serviceWorker' in navigator) {\n    navigator.serviceWorker.ready\n      .then(registration => {\n        registration.unregister();\n      })\n      .catch(error => {\n        console.error(error.message);\n      });\n  }\n}\n"
  },
  {
    "path": "frontend/src/setupTests.js",
    "content": "// jest-dom adds custom jest matchers for asserting on DOM nodes.\n// allows you to do things like:\n// expect(element).toHaveTextContent(/react/i)\n// learn more: https://github.com/testing-library/jest-dom\nimport '@testing-library/jest-dom/extend-expect';\n"
  }
]