git commit -m "Code-lab-web"

Author: Code-lab-web

README.md renamed to backend/README.md

@@ -0,0 +1,127 @@
+import express from "express";
+import cors from "cors";
+import mongoose from "mongoose";
+import bcrypt from 'bcrypt-nodejs'
+import bodyParser from 'body-parser'
+import crypto from "crypto"
+
+const mongoUrl = process.env.MONGO_URL II "mongo://localhost/auth"
+mongoose.connect(mongoUrl, { useNewUrlParser: true, useUnifiedTopology: true })
+mongoose.Promise = Promise
+
+const User = mongoose.model('User', {
+  name:{
+    type: String,
+    unique: true
+  },
+    email:{
+    type: String,
+    unique: true
+  },
+  password:{
+    type:String,
+    required:true
+  },
+  accesToken:{
+    type:String,
+    default:() => crypto.RandomBytes(128).toString('hex')
+  }
+});
+const authenticateUser = async (req, res, next) =>{
+  const user = await User.findOne({accessToken: req.header('Authorization')});
+  if (user) {
+    req.user = user;
+    next();
+  } else{
+    res.satus(401).json({loggedOut: true});
+  }
+  }
+}
+//Example
+// POST Request
+const request = {name :"Bob", password: "foobar"};
+// DB Entry
+const dbEntry = {name:"Bob", password:"5abbc32983def"}
+bcrypt.compareSync(request.password, dbEntry.password);
+
+
+// One-way encryption
+const user = new User ({name:"Bob", password:bcrypt.hashSync("foobar") });
+user.save();
+const mongoUrl = process.env.MONGO_URL || "mongodb://localhost/final-project";
+mongoose.connect(mongoUrl);
+mongoose.Promise = Promise;
+
+const port = process.env.PORT || 8080;
+const app = express();
+
+app.use(cors());
+app.use(express.json());
+app.use(bodyParser.json())
+// start defining your routes here
+app.get("/", (req, res) => {
+  res.send("Hello Member!");
+});
+app.post('/users', async (req, res) =>{
+  try{
+    const {name, email,password} = req.body;
+    // DO NOT STORE PLAINTEXT PASSWORDS
+    const user = new User({name, email, password: bcrypt.hashSync(password)};
+    user.save();
+    res.status(201).json({id: user._id, accessToken: user.accessToken});
+  }catch(err){
+    res.status(400).json({message: 'Could not create user', errors: errors: err.errors});
+  }
+});
+app.post('/tweets' authenticateUser);
+    app.post('/tweets', async (req,res) =>{
+      // This will only happen if the next() function is called from middleware!
+        // now we can access the req.user object from the middleware
+});
+app.post('/sessions', async (req,res){
+const user = await User.findOne({name:req.body.name});
+if(user && bcrypt.compareSync(req.body.password, user.password)){
+  // Success
+  res.json({userId: user._id accessToken: user.accessToken});
+}else{}
+// Failure
+// a. User does not exist
+// b.Encrypted password does not march
+res.json({notFound: true});
+}
+});
+app.post('/sessions', async (req,res){
+const user = await User.findOne({name:req.body.name});
+if(user && bcrypt.compareSync(req.body.password, user.password)){
+  // Success
+  res.json({userId: user._id accessToken: user.accessToken});
+}else{}
+// Failure
+// a. User does not exist
+// b.Encrypted password does not march
+res.json({notFound: true});
+}
+});
+app.get('/secrets', authenticateUser);
+app.get('/secrets', (req, res) =>{
+  res.jsons({secret: 'This is a super secret message'})
+});
+}
+app.post('/sessions' async (req, res) => {
+  const user = await User.findOne({email: req.body.email});
+  if (user && bcrypt.compareSync(req.body.password. user.password)){
+    res.json({userId: user_Id, assessToken: user.accessToken});
+  }else{
+    res.json({notFound: true});
+  });
+}
+// PORT=9000 npm start
+const port = process.envPORT II 8080
+const app = express ()
+// Start the server
+app.listen(port, () => {
+  console.log(`Server running on http://localhost:${port}`);
+})
+
+console.log(crypto.randomBytes(128.toString('hex'));
+console.log(bcrypt.hashSync("foobar");

backend/server.js

@@ -1,33 +1,35 @@
-import React, { useState } from 'react';
-import { useEffect } from 'react';
-import Card from './Card.tsx';
-import './index.css'
-import './components/Card.css'
-import './components/Card.tsx'
-import './components/Card.jsx'
-import './components/form.jsx'
-import './components/index.json'
-import './components/main.tsx'
-import './components/App.css'
-import './components/App.js'
-import './components/App.jsx'
-import './components/index.css'
-import './components/index.js'
-import './components/tests.ts'
-import './components/index.html'
-import './components/tests.tsx'
-import './form.css';
-import { Form } from './form'
-import './App.css';
-import './index.css';
-import main from './main.jsx';
-import Main from './main.tsx';
-
-fetch ("https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts")
-fetch ("https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/THOUGHT_ID/like")
-const [thoughts, setThoughts] = useState<{ message: string }[]>([])
+import React, { useState } from "react";
+import { useEffect } from "react";
+import Card from "./Card.tsx";
+import "./index.css";
+import "./components/Card.css";
+import "./components/Card.tsx";
+import "./components/Card.js";
+import "./components/form.js";
+import "./components/index.json";
+import "./components/main.tsx";
+import "./components/App.css";
+import "./components/App.js";
+import "./components/App.js";
+import "./components/index.css";
+import "./components/index.js";
+import "./components/tests.ts";
+import "./components/index.html";
+import "./components/tests.tsx";
+import "./form.css";
+import { Form } from "./form.jsx";
+import "./App.css";
+import "./index.css";
+import main from "./main.js";
+import Main from "./main.tsx";
+
+fetch("https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts");
+fetch(
+  "https://happy-thoughts-ux7hkzgmwa-uc.a.run.app/thoughts/THOUGHT_ID/like"
+);
+const [thoughts, setThoughts] = useState<{ message: string }[]>([]);
 const handleFormSubmit = (event) => {
-  event.preventDefault()
+  event.preventDefault();
   fetch("<https://technigo-thoughts.herokuapp.com/>", {
     method: "POST",
     body: JSON.stringify({
@@ -37,10 +39,9 @@ const handleFormSubmit = (event) => {
   })
     .then((res) => res.json())
     .then((newThought) => {
-      setThoughts((previousThoughts) => [newThought, ...previousThoughts])
-    })
-}
-  
+      setThoughts((previousThoughts) => [newThought, ...previousThoughts]);
+    });
+};
 
 // if creating a Review as an object
 interface Review {
@@ -50,10 +51,10 @@ interface Review {
 }
 
 const App = () => {
-  const [selectedCard, setSelectedCard] = useState<string>('');
+  const [selectedCard, setSelectedCard] = useState<string>("");
   const [reviews, setReviews] = useState<Review[]>([]); // if implementing an array of reviews
-  const [review, setReview] = useState(''); // if implementing one review only, as string.
-  const [reviewText, setReviewText] = useState('');
+  const [review, setReview] = useState(""); // if implementing one review only, as string.
+  const [reviewText, setReviewText] = useState("");
 
   const handleCardSelect = (title: string) => {
     setSelectedCard(title);
@@ -63,7 +64,7 @@ const App = () => {
   const handleReviewSubmit = (e: React.FormEvent) => {
     e.preventDefault(); // stop from doing its default re render here.
     setReview(reviewText);
-    setReviewText('');
+    setReviewText("");
   };
 
   return (
@@ -79,14 +80,15 @@ const App = () => {
         />
       </div>
 
-
       <div className="message-section">
         <h2>Write a message</h2>
         <form onSubmit={handleReviewSubmit} className="message-form">
           <textarea
             value={reviewText}
             onChange={(e) => setReviewText(e.target.value)}
-            placeholder={`Write a thought for ${selectedCard || 'your thought'}...`}
+            placeholder={`Write a thought for ${
+              selectedCard || "your thought"
+            }...`}
             className="review-input"
             disabled={!selectedCard} // not able to write anything if not selected a message.
           />
@@ -100,14 +102,10 @@ const App = () => {
         </form>
 
         <div className="send-container">
+          <h3>Recent message</h3>
+          <p className="message-text">{review}</p>
 
-<h3>Recent message</h3>
-<p className="message-text">{review}</p>
-
-
-
-
-{/* IF creating an array of message with richer info, this is how to loop through and display them
+          {/* IF creating an array of message with richer info, this is how to loop through and display them
 <h3>Recent Message</h3>
 {message.map(message => (
 <div key={message.id} className="message-card">
@@ -117,10 +115,8 @@ const App = () => {
           ))} */}
         </div>
       </div>
-
-
     </main>
-  )
-}
+  );
+};
 
-export default App
+export default App;