Jason/apptoweb

package.json

@@ -1,4 +1,7 @@
 {
+  "module": {
+    "type": "commonjs"
+  },
   "name": "prevue",
   "author": "teamprevue <teamprevue@gmail.com> (www.prevue.io)",
   "version": "2.0.0",
@@ -11,8 +14,13 @@
   "license": "MIT",
   "dependencies": {
     "@vitejs/plugin-vue": "^1.6.1",
+    "cookie-parser": "^1.4.6",
+    "express": "^4.18.2",
     "fs-extra": "^7.0.1",
     "localforage": "^1.7.3",
+    "mongodb": "^5.1.0",
+    "mongodb-connection-string-url": "^2.6.0",
+    "mongoose": "^6.10.0",
     "mousetrap": "^1.6.3",
     "sass": "^1.58.3",
     "vite": "^2.5.4",

server/controllers/accountController.js

@@ -0,0 +1,66 @@
+const Users = require('../models/accountModels');
+const accountController = {};
+
+//createUser
+
+accountController.createUser = (req, res, next) => {
+  const { username, password } = req.body;
+  //Making sure username does not exist
+  Users.findOne({ username })
+    .then((data) => {
+      if (!data) {
+        Users.create({ username, password }).then((data) => { //data here is full entry, includes _id key
+          res.locals.id = data._id; // sending ID for cookie auth
+          return next();
+        });
+      } else {
+        return next(err);
+      }
+    })
+    .catch((err) => {
+      next({
+        log: 'account.createUser failed',
+        message: `user already exists!`,
+      });
+    });
+};
+
+accountController.login = (req, res, next) => {
+  const { username, password } = req.body;
+  Users.findOne({ username, password })
+    .then((data) => {
+      if (data) {
+        res.locals.id = data._id; // sending ID for cookie auth
+        return next();
+      } else {
+        return next(err);
+      }
+    })
+    .catch((err) => {
+      next({
+        log: 'accountcontroller login failed',
+        message: `could not log in`,
+      });
+    });
+};
+
+// accountController.verifyUser = (req, res, next) => {
+//   // write code here
+//   const { username, password } = req.body;
+//   Users.findOne({ username, password })
+//     .then((data) => {
+//       res.locals.username = data.username;
+//       return next();
+//     })
+//     .catch((err) => {
+//       // if (err.message === `Username Doesn't Exist`) res.redirect("/signup");
+//       return next({
+//         log: err,
+//         error: `error found in userController.verifyUser`,
+//       });
+//     });
+// };
+
+
+
+module.exports = accountController;

server/controllers/cookieController.js

@@ -0,0 +1,9 @@
+const cookieController = {};
+
+cookieController.setSSIDCookie = (req, res, next) => {
+  // write code here
+  res.cookie('ssid', res.locals.id, { httpOnly: true });
+  return next();
+};
+
+module.exports = cookieController;

server/controllers/oAuthController.js

@@ -0,0 +1 @@
+// require('dotenv').config();

server/controllers/projectController.js

@@ -0,0 +1,23 @@
+const Project = require('../models/projectModels');
+const projectController = {};
+
+projectController.createProject = (req, res, next) => {
+  const { project_id, projectObject, projectOwner } = req.body;
+  Project.create({
+    project_id,
+    projectObject,
+    projectOwner, // res.locals.username,
+  })
+    .then((data) => {
+      res.locals.newProject = data.project_id;
+      return next();
+    })
+    .catch((err) => {
+      next({
+        log: 'account.createUser failed',
+        message: `user already exists!`,
+      });
+    });
+};
+
+module.exports = projectController;

server/controllers/sessionController.js

@@ -0,0 +1,40 @@
+const Session = require('../models/sessionModel');
+const sessionController = {};
+
+// check cookie for res.cookie.ssid
+// query DB for that cookie value
+// if found, user is verified
+sessionController.isLoggedIn = (req, res, next) => {
+  let query = { cookieId: req.cookies.ssid };
+  if ('id' in res.locals) query = { _id: res.locals.id };
+  console.log(query);
+  Session.findOne(query)
+    .then((result) => {
+      console.log(result);
+      next();
+    })
+    .catch((err) =>
+      next({
+        log: err,
+        error: `error found in sessionController.isLoggedIn`,
+      })
+    );
+};
+
+sessionController.startSession = (req, res, next) => {
+  //write code here
+  // Session.create(...)
+  Session.create({ cookieId: res.locals.id }) // findOneAndUpdate()?
+    .then((result) => {
+      console.log('result', result);
+      next();
+    })
+    .catch((err) => {
+      next({
+        log: err,
+        error: `error found in sessionController.startSession`,
+      });
+    });
+};
+
+module.exports = sessionController;

server/models/accountModels.js

@@ -0,0 +1,12 @@
+const mongoose = require('mongoose');
+
+const Schema = mongoose.Schema;
+
+const userSchema = new Schema({
+  username: { type: String, required: true },
+  password: { type: String, required: true },
+  project_ids: { type: Array },
+});
+
+const Users = mongoose.model('Users', userSchema);
+module.exports = Users;

server/models/projectModels.js

@@ -0,0 +1,12 @@
+const mongoose = require('mongoose');
+
+const Schema = mongoose.Schema;
+
+const projectSchema = new Schema({
+  project_id: { type: String, required: true },
+  projectObject: { type: Object, required: true },
+  projectOwner: { type: String, required: true },
+});
+
+const Project = mongoose.model('Project', projectSchema);
+module.exports = Project;

server/models/sessionModel.js

@@ -0,0 +1,17 @@
+const mongoose = require("mongoose");
+
+const Schema = mongoose.Schema;
+
+/**
+ * Check out the `createdAt` field below. This is set up to use Mongo's automatic document
+ * expiration service by giving the Mongoose schema the `expires` property.
+ * After 30 seconds, the session will automatically be removed from the collection!
+ * (actually, Mongo's cleanup service only runs once per minute so the session
+ * could last up to 90 seconds before it's deleted, but still pretty cool!)
+ */
+const sessionSchema = new Schema({
+  cookieId: { type: String, required: true, unique: true },
+  createdAt: { type: Date, expires: 1000000, default: Date.now },
+});
+
+module.exports = mongoose.model("Session", sessionSchema);

server/routes/accountRouter.js

@@ -0,0 +1,30 @@
+const express = require('express');
+const accountController = require('../controllers/accountController');
+const cookieController = require('../controllers/cookieController');
+const sessionController = require('../controllers/sessionController');
+const accountRouter = express.Router();
+
+//signup route
+accountRouter.post(
+  '/createUser',
+  accountController.createUser,
+  cookieController.setSSIDCookie,
+  sessionController.startSession,
+  (req, res) => {
+    console.log('hello from createUser in accountRouter');
+    return res.status(201).json(res.locals.id);
+  }
+);
+
+accountRouter.post(
+  '/login',
+  accountController.login,
+  cookieController.setSSIDCookie,
+  sessionController.startSession,
+  (req, res) => {
+    console.log('hello from accountRouter');
+    return res.status(201).json(res.locals.id);
+  }
+);
+
+module.exports = accountRouter;

server/routes/projectRouter.js

@@ -0,0 +1,22 @@
+const express = require('express');
+const projectController = require('../controllers/projectController');
+const sessionController = require('../controllers/sessionController');
+// const accountController = require('../controllers/accountController/');
+const projectRouter = express.Router();
+
+//signup route
+// endpoint : /projects/createProject
+projectRouter.post(
+  '/createProject',
+  sessionController.isLoggedIn,
+  projectController.createProject,
+  (req, res) => {
+    return res.status(201).json(res.locals.newProject);
+  }
+);
+
+// projectRouter.get('/getProject', (req, res) => {
+//   return res.status(201).json(res.locals);
+// });
+
+module.exports = projectRouter;

server/server.js

@@ -0,0 +1,65 @@
+const path = require('path');
+const express = require('express');
+const cookieParser = require('cookie-parser');
+const app = express();
+const PORT = 8080;
+const accountRouter = require('./routes/accountRouter');
+// const accountController = require('./controllers/accountController');
+const projectRouter = require('./routes/projectRouter');
+// const projectController = require('./controllers/projectController');
+
+// Connecting to MongoDB
+const mongoose = require('mongoose');
+const myURI =
+  'mongodb+srv://prevue:prevue123@pvcluster.msrpd4m.mongodb.net/?retryWrites=true&w=majority';
+const { MongoClient } = require('mongodb');
+mongoose
+  .connect(myURI, {
+    // options for the connect method to parse the URI
+    useNewUrlParser: true,
+    useUnifiedTopology: true,
+    // sets the name of the DB that our collections are part of
+    dbName: 'prevueDB',
+  })
+  .then(() => console.log('Connected to Mongo DB.'))
+  .catch((err) => console.log(err));
+
+// Global Middleware
+app.use(express.json());
+app.use(cookieParser());
+app.use(express.urlencoded({ extended: true }));
+
+// Routers
+app.use('/users', accountRouter);
+app.use('/projects', projectRouter);
+
+// accountRouter.post('/', accountController.createUser, (req, res) => {
+//   return res.status(201).json(res.locals.newUser);
+// });
+
+//to endpoint /project
+// app.use('/project', projectRouter);
+
+app.use((req, res) => res.sendStatus(404));
+
+// Global error handler
+app.use((err, req, res, next) => {
+  const defaultErr = {
+    log: 'Express error handler caught unknown middleware error',
+    status: 400,
+    message: { err: 'An error occurred' },
+  };
+  const errorObj = Object.assign({}, defaultErr, err);
+  console.log(errorObj.log);
+  return res.status(errorObj.status).json(errorObj.message);
+});
+
+app.listen(PORT, () => {
+  console.log(`Server listening on port: ${PORT}`);
+});
+
+module.exports = app;
+
+// module.exports = app.listen(PORT, () =>
+//   console.log(`Listening on port ${PORT}`)
+// );

src/components/Component.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <Vue3DraggableResizable
+      classNameDraggable="draggable"
+      class="component-box"
+      :draggable="true"
+      :resizable="true"
+      :disabledX="false"
+      :disabledY="false"
+      :x="x"
+      :y="y"
+      :w="w"
+      :h="h"
+      @click="onClick(componentData)"
+      @activated="activeComponentData()"
+      @deactivated="onDeactivated(componentData)"
+      @dragging="onDrag"
+      @drag-start="print('drag-end')"
+      @drag-end="print('drag-end')"
+      @resize-start="onResize"
+      @resizing="print('resizing')"
+      @resize-end="print('resize-end')"
+    >
+      <h3>{{ compName }}</h3>
+    </Vue3DraggableResizable>
+  </div>
+</template>
+<script>
+import { mapState, mapActions } from 'vuex';
+import Vue3DraggableResizable from 'vue3-draggable-resizable';
+export default {
+  name: 'Component',
+  components: {
+    Vue3DraggableResizable,
+  },
+  props: {
+    compName: String,
+    children: Array,
+    htmlList: Array,
+    isActive: Boolean,
+  },
+  data() {
+    return {
+      x: 0,
+      y: 0,
+      w: 200,
+      h: 200,
+    };
+  },
+};
+</script>
+<style></style>