la-flowerita 0.1.0

package/src/components/LoginModal.js

@@ -0,0 +1,173 @@
+import React, { Component } from "react";
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+import { NavLink } from "react-router-dom";
+import swal from 'sweetalert';
+import {
+  FiLogIn,
+} from "react-icons/fi";
+class LoginModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: false,
+      email: "",
+      password: "",
+      ERROR: "",
+      reloadNavbar: props.reloadNavbar,
+    };
+  }
+
+  handleClose = () => {
+    this.setState({ showModal: false });
+  };
+  handleShow = () => {
+    this.setState({ showModal: true });
+  };
+  async dofetch() {
+    // check inputs
+    var email = this.state.email;
+    var password = this.state.password;
+    if (email == "" || password == "") {
+      this.setState({ ERROR: "Please fill all the fields" });
+      return;
+    }
+    if (!email.includes("@")) {
+      this.setState({ ERROR: "Please fill all the fields correctly" });
+      return;
+    }
+
+    // pass inputs to server
+    let user = { email, password };
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(user),
+    };
+    
+    await fetch("/auth", options)
+    .then(
+      (res) => {
+        console.log(res);
+        if (res.status == 200) {
+          swal("Success!", "You Logged In!", "success");
+          document.location.href = "/";
+        }
+        else if(res.status == 404){
+          this.setState({ ERROR: "Email or password is not correct." });
+          return;
+        }
+        else if(res.status == 400){
+          this.setState({ ERROR: "There was an error. Please try again" });
+          return;
+        }
+      },
+      // Note: it's important to handle errors here
+      // instead of a catch() block so that we don't swallow
+      // exceptions from actual bugs in components.
+      (error) => {
+        this.setState({
+          ERROR: error
+        });
+        return;
+      }
+    )
+    // options = {
+    //   method: "GET",
+    //   headers: { "Content-Type": "application/json" }
+    //   };
+    // await fetch("/getCurrentUser", options).then(res => res.json()).then((res) => {
+    //   sessionStorage.setItem("profileImage", JSON.stringify(res.profileImage));
+    //   sessionStorage.setItem("email", JSON.stringify(res.user.email));
+    //   // alert(res.profileImage);
+    //   this.state.reloadNavbar();
+    //   // document.location.href = "/";
+    // })
+    }
+
+
+  inputsHandler = (e) => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+  render() {
+    return (
+      <div>
+        <Button
+          title="Log In"
+          class="btn btn-primary btn-lg btn-floating" 
+          style={{display: this.props.showButton,"background-color": "#17c0eb"}}
+          onClick={() => this.handleShow()}
+        >
+          {this.props.menuCollapse ? "" :"Login"}<FiLogIn/>
+        </Button>
+        {/* <button style={{"float":"right"}} type="button" id="login"  data-bs-toggle="modal" data-bs-target="#myModal">
+                      Login */}
+
+        <Modal
+          style={{ opacity: 1 }}
+          show={this.state.showModal}
+          onHide={() => this.handleClose()}
+        >
+          <Modal.Header>
+            <Modal.Title>
+              <div className="modal-header">
+                <img src="images\login.png" width="72" height="72" />
+                <h5 className="modal-title" id="exampleModalLabel">
+                  Please sign in
+                </h5>
+              </div>
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <form>
+              <div className="mb-3">
+                <input
+                  type="email"
+                  name="email"
+                  id="email"
+                  className="form-control"
+                  placeholder="Email address"
+                  onChange={this.inputsHandler}
+                  required
+                  autoFocus
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="password"
+                  name="password"
+                  id="password"
+                  className="form-control"
+                  placeholder="Password"
+                  onChange={this.inputsHandler}
+                  required
+                />
+              </div>
+            </form>
+          </Modal.Body>
+          <Modal.Footer>
+            <h5>{this.state.ERROR}</h5>
+            <div className="modal-footer">
+              <button
+                className="btn btn-lg btn-primary btn-block"
+                onClick={() => this.dofetch()}
+                type="submit"
+              >
+                Sign in
+              </button>
+              <NavLink
+                style={{cursor:"pointer"}}
+                onClick={() => this.handleClose()}
+                to="/resetPassword"
+              >
+                forgot pasword ? click here
+              </NavLink>
+            </div>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+export default LoginModal;

package/src/components/NewProductModal.js

@@ -0,0 +1,271 @@
+import React, { Component } from "react";
+import Button from "react-bootstrap/Button";
+import Modal from "react-bootstrap/Modal";
+import { NavLink } from "react-router-dom";
+import { FaPlus } from "react-icons/fa";
+import '../css/newProductModal.css';
+import withAuth from "./Auth.js"
+import swal from 'sweetalert';
+import LoadingIndicator from "./Spinner";
+import { usePromiseTracker, trackPromise } from "react-promise-tracker"; 
+class NewProductModal extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showModal: props.showModal,
+      name: "",
+      price: 0,
+      description: "",
+      color: "#000000",
+      type: "",
+      picture: false,
+      src: false,
+      id: 0,
+      maxAmount:"",
+      ERROR: "",
+    };
+  }
+
+  handleClose = () => {
+    this.setState({ showModal: false });
+  };
+  handleShow = () => {
+    this.setState({ showModal: true });
+  };
+
+  async addProduct() {
+    var name = this.state.name;
+    var price = this.state.price;
+    var description = this.state.description;
+    var color = this.state.color;
+    var type = this.state.type;
+    var picture = this.state.picture;
+    var maxAmount = this.state.maxAmount;
+    if (
+      name == "" ||
+      price == "" ||
+      description == "" ||
+      color == "" ||
+      type == "" ||
+      maxAmount == "" ||
+      !picture
+    ) {
+      this.setState({ ERROR: "Please fill all the fields." });
+      return;
+    }
+    var product = {
+      name: name,
+      color: color,
+      description: description,
+      price: price,
+      type: type,
+      maxAmount: maxAmount
+    };
+
+    var options = {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({product: product}),
+    };
+    var id = 0;
+    trackPromise(
+      fetch("/addNewProduct", options).then(res => res.json()).then(
+      (res) => {
+        console.log(res);
+        if(res.status == 403){
+          swal("No permission","You don't have permission for this option","error");
+          return;
+        }
+        if (res.status == 200) {
+          id = res.id;
+        } else if (res.status == 400) {
+          this.setState({ ERROR: "There was an error. Please try again" });
+        } else if (res.status == 500) {
+          this.setState({ ERROR: "There was an error on our side" });
+        }
+      },
+      (error) => {
+        this.setState({
+          ERROR: error,
+        });
+      }
+    ));
+
+    if(id != 0){
+    var myFormData = new FormData();
+    myFormData.append('file', this.state.picture);
+    myFormData.append('id', id);
+
+    const response = await fetch("/addProductPicture", {
+      method: "POST",
+      body: myFormData,
+    });
+    if (response.status == 200) {
+      swal("Success!", "Product added successfully!", "success");
+    }
+  }else{
+    swal("Error!", "There was an error in uploading image", "error");  }
+  }
+  renderPreview() {
+    if(this.state.src) {
+      return (
+        <img src={this.state.src} style={{"maxWidth": "inherit", "maxHeight": "inherit"}}/>
+      );
+    } else {
+      return (
+        <p>
+          No Preview
+        </p>
+      );
+    }
+  }
+
+  handlePictureSelected(event) {
+    var picture = event.target.files[0];
+    var src     = URL.createObjectURL(picture);
+
+    this.setState({
+      picture: picture,
+      src: src
+    });
+  }
+
+  inputsHandler = (e) => {
+    this.setState({ [e.target.name]: e.target.value });
+  };
+  radioHandler = (e) => {
+    this.setState({
+      [e.target.name]: document.querySelector(
+        `input[name=${e.target.name}]:checked`
+      ).id,
+    });
+  };
+  colorSelected = (e) => {
+    this.setState({
+        color : e.target.value});
+  };
+  render() {
+    return (
+      <div>
+        <br/>
+        <Modal
+          style={{ opacity: 1 }}
+          show={this.state.showModal}
+          onHide={() => this.handleClose()}
+        >
+          <Modal.Header>
+            <Modal.Title>
+              <div className="modal-header">
+                {/* <img src="images\login.png" width="72" height="72" /> */}
+                <h5 className="modal-title" id="exampleModalLabel">
+                  Add new Flower
+                </h5>
+              </div>
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+          <LoadingIndicator/>
+            <form>
+              <div className="mb-3">
+                <input
+                  type="text"
+                  name="name"
+                  id="name"
+                  className="form-control"
+                  placeholder="Name of the flower"
+                  onChange={this.inputsHandler}
+                  required
+                  autoFocus
+                />
+              </div>
+              <div className="mb-3">
+                Pick a color
+                <input onChange={this.colorSelected} type="color" />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="text"
+                  name="description"
+                  id="description"
+                  className="form-control"
+                  placeholder="Description"
+                  onChange={this.inputsHandler}
+                  required
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="number"
+                  step="0.01"
+                  name="price"
+                  id="price"
+                  className="form-control"
+                  placeholder="Price"
+                  onChange={this.inputsHandler}
+                  required
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="number"
+                  name="maxAmount"
+                  id="maxAmount"
+                  className="form-control"
+                  placeholder="Max Amount"
+                  onChange={this.inputsHandler}
+                  required
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="radio"
+                  name="type"
+                  id="Bouquest"
+                  onChange={this.radioHandler}
+                />
+                <label for="rd1">Bouquest</label>
+                <input
+                  type="radio"
+                  name="type"
+                  id="Flower"
+                  onChange={this.radioHandler}
+                />
+                <label for="rd2">Flower</label>
+              </div>
+              <div className="mb-3">
+                <h2>Upload Product Image</h2>
+                <input 
+                  name="file"  
+                  id="file"
+                  type="file"
+                  onChange={this.handlePictureSelected.bind(this)}
+                />
+                <br/>
+                <div style={{"maxWidth": "80%", "maxHeight": "80%"}}>
+                {this.renderPreview()}
+                </div>
+                <hr/>
+              </div>
+            </form>
+          </Modal.Body>
+          <Modal.Footer>
+            <h5>{this.state.ERROR}</h5>
+            <div className="modal-footer">
+              <button
+                className="button-17"
+                role="button"
+                onClick={() => this.addProduct()}
+                type="submit"
+              >
+                Add
+              </button>
+            </div>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+}
+
+// export default withAuth(NewProductModal);
+export default NewProductModal;

package/src/components/NoPermission.js

@@ -0,0 +1,10 @@
+import '../css/noPermission.css';
+export default function NoPermission() {
+return(<div className="center">
+{/* <div className="lock"></div> */}
+<div className="message">
+  <h1>Access to this page is restricted</h1>
+  <p>Please check with the site admin if you believe this is a mistake.</p>
+</div>
+</div>)
+}

package/src/components/OrderedProduct.js

@@ -0,0 +1,104 @@
+import { React, Component } from "react";
+import sampleImage from "../logo.svg";
+import "../css/catalog.css";
+import "../css/orderedProduct.css";
+
+import { FaHeart, FaRegHeart, FaShoppingCart, FaEye } from "react-icons/fa";
+
+import Card from "react-bootstrap/Card";
+import Button from "react-bootstrap/Button";
+import { ButtonGroup, Container } from "react-bootstrap";
+import * as Icon from "react-bootstrap-icons";
+import ReactStars from "react-rating-stars-component";
+
+class OrderedProduct extends Component {
+  constructor(props) {
+    super(props);
+    console.log(props.product);
+    this.state = {
+      isInCart: true,
+      id: props.product.id,
+      name: props.product.name,
+      price: props.product.price,
+      quantity: props.product.quantity,
+      image: props.product.image,
+      subTotal: props.product.price * props.product.quantity,
+    };
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.quantity !== prevState.quantity) {
+      this.setState({ subTotal: this.state.quantity * this.state.price });
+    }
+  }
+
+  arrayBufferToBase64(buffer) {
+    var binary = "";
+    var bytes = [].slice.call(new Uint8Array(buffer.data));
+    bytes.forEach((b) => (binary += String.fromCharCode(b)));
+    return window.btoa(binary);
+  }
+  render() {
+    var path = "";
+    try {
+      path =
+        "data:/" +
+        this.state.image.contentType +
+        ";base64," +
+        this.arrayBufferToBase64(this.state.image.data);
+    } catch (e) {
+      console.log("couldn't find path of profile image");
+    }
+    var currentItem = this.props.product;
+    return (
+      <tr key={currentItem.id}>
+        <td>
+          <img src={path} alt="productImg" />
+        </td>
+        <td>{currentItem.name}</td>
+        <td className="price-new">{currentItem.price}$</td>
+        {this.props.isCart ? (
+          <td>
+            <input
+              type="number"
+              id="quantity"
+              name="quantity"
+              min="1"
+              // max={props.product.maxQuantity}
+              step="1"
+              defaultValue={currentItem.quantity}
+              onChange={(e) => {
+                this.setState({ quantity: Number(e.target.value) });
+                this.props.onUpdate(e, currentItem.id);
+              }}
+            />
+          </td>
+        ) : (
+          <td>
+            <FaShoppingCart
+              onClick={() => this.props.onAdd(currentItem.id)}
+              style={{ cursor: "pointer" }}
+            />
+          </td>
+        )}
+        {this.props.isCart ? (
+          <td className="subTotalShow">{this.state.subTotal}</td>
+        ) : (
+          ""
+        )}
+        <td>
+          <Button
+            variant="dark"
+            size="sm"
+            className="ms-2"
+            onClick={() => this.props.onDelete(currentItem.id)}
+          >
+            <Icon.Trash></Icon.Trash>
+          </Button>
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default OrderedProduct;

package/src/components/PreChat.js

@@ -0,0 +1,51 @@
+import "../css/chat.css";
+import io from "socket.io-client";
+import { useState } from "react";
+import Chat from "./Chat";
+
+
+const socket = io.connect("http://localhost:5000");
+
+
+function PreChat() {
+    const [username, setUsername] = useState("");
+    const [room, setRoom] = useState("");
+    const [showChat, setShowChat] = useState(false);
+
+    const joinRoom = () => {
+        if (username !== "" && room !== "") {
+            socket.emit("join_room", room);
+            setShowChat(true);
+        }
+    };
+
+    return (
+        <div className="PreChat">
+
+            {!showChat ? (
+                <div className="joinChatContainer">
+                    <h3>Join A Chat</h3>
+                    <input
+                        type="text"
+                        placeholder="user name..."
+                        onChange={(event) => {
+                            setUsername(event.target.value);
+                        }}
+                    />
+                    <input
+                        type="text"
+                        placeholder="Room ID..."
+                        onChange={(event) => {
+                            setRoom(event.target.value);
+                        }}
+                    />
+                    <button onClick={joinRoom}>Join A Room</button>
+                </div>
+            ) : (
+                <Chat socket={socket} username={username} room={room} />
+            )}
+        </div>
+    );
+}
+
+export default PreChat;