Category: javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const router = require("express").Router();
const { body, validationResult } = require("express-validator");
const User = require("../../Model/UserSchema");
const jwt = require("jsonwebtoken");
const bcrypt = require("bcryptjs");

router.post(
  "/login",
  [
    body("email", "Email is required").isEmail(),
    body("password", "At least 6 characters").exists(),
  ],
  async (req, res) => {
    const errors = validationResult(req);

    if (!errors.isEmpty()) {
      return res.status(400).json({ errors: errors.array() });
    }

    const { email, password } = req.body;
    try {
      const existingUser = await User.findOne({ email });

      if (!existingUser)
        return res
          .status(401)
          .json({ errors: [{ msg: "Wrong email or password" }] });

      const passwordCorrect = await bcrypt.compare(
        password,
        existingUser.password
      );

      if (!passwordCorrect) {
        return res.status(401).json({ msg: "Wrong email or password" });
      }

      const token = jwt.sign(
        { user: existingUser._id },
        process.env.JWT_SECRET
      );

      //send cookies in httpOnly

      res.cookie("token", token, {
        httpOnly: true,
        sameSite: "strict",
      }).send;
      res.status(200).send("Login Successful");
    } catch (err) {
      res.status(400).json("Bad Request");
    }
  }
);

module.exports = router;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const jwt = require("jsonwebtoken");

function auth(req, res, next) {
  try {
    const token = req.cookies.token;

    if (!token) {
      return res.status(401).json({ msg: "Unauthorized" });
    }

    const verified = jwt.verify(token, process.env.JWT_SECRET);

    req.user = verified.user;

    next();
  } catch (err) {
    console.log(err);
    res.status(401).res.json({ msg: Unauthorized });
  }
}

<!-- begin snippet: js hide: false console: true babel: false -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const jwt = require("jsonwebtoken");
const router = require("express").Router();

router.get("/auth", (req, res) => {
  try {
    const token = req.cookies.token;

    if (!token) {
      return res.json(false);
    }
    jwt.verify(token, process.env.JWT_SECRET);

    res.send(true);
  } catch (err) {
    res.json(false);
  }
});

module.exports = router;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import axios from "axios";
import { createApi } from "@reduxjs/toolkit/query/react";


const axiosBaseQuery =
  ({ baseUrl } = { baseUrl: "" }) =>
  async ({ url, method, data }) => {
    try {
      const result = await axios({ url: baseUrl + url, method, data });
      return { data: result.data };
    } catch (axiosError) {
      let err = axiosError;
      return {
        error: { status: err.response?.status, data: err.response?.data },
      };
    }
  };


export const fetcherApi = createApi({
  reducerPath: "fetcherApi",
  baseQuery: axiosBaseQuery({
    baseUrl: "http://localhost:5000/",
  }),
  tagTypes: ["User"],
  endpoints(build) {
    return {
      //________Authentication
      registerUser: build.mutation({
        query: (form) => ({
          url: "register",
          method: "post",
          data: form,
        }),
        invalidatesTags: ["User"],
      }),

      loginUser: build.mutation({
        query: (form) => ({
          url: "login",
          method: "post",
          data: form,
        }),
        invalidatesTags: ["User"],
      }),

      getAuth: build.query({
        query: () => ({ url: "auth", method: "get" }),
      }),

      //__________User
      updateUserName: build.mutation({
        query: (...rest) => ({
          url: "update-user",
          method: "put",
          data: rest,
        }),
        invalidatesTags: ["User"],
      }),

      getUser: build.query({
        query: () => ({ url: "user", method: "get" }),
        providesTags: ["User"],
      }),

      //__________Profile
      postProfile: build.mutation({
        query: (form) => ({
          url: "login",
          method: "post",
          data: form,
        }),
      }),

      getAllProfiles: build.query({
        query: () => ({ url: "all-profiles", method: "get" }),
      }),

      getUserProfile: build.query({
        query: () => ({ url: "profile/me", method: "get" }),
      }),

      //___________Car
      postCar: build.mutation({
        query: (form) => ({
          url: "new-car",
          method: "post",
          data: form,
        }),
      }),

      putCar: build.mutation({
        query: ({ id, ...rest }) => ({
          url: `update-car/{id}`,
          method: "put",
          data: { rest },
        }),
      }),

      getAllCars: build.query({
        query: () => ({ url: "all-cars", method: "get" }),
      }),

      getCarById: build.query({
        query: (id) => ({ url: `onecar/${id}`, method: "get" }),
      }),

      getAllUserCars: build.query({
        query: () => ({ url: "my-car", method: "get" }),
      }),
    };
  },
});

export const {
  // ______Authentication______
  useGetAuthQuery,
  useRegisterUserMutation,
  useLoginUserMutation,
  //_______User_________
  useUpdateUserNameMutation,
  useGetUserQuery,
  //_____Profile_________
  useGetUserProfileQuery,
  useGetAllProfilesQuery,
  usePostProfileMutation,
  //_____Car____________
  usePostCarMutation,
  usePutCarMutation,
  useGetAllCarsQuery,
  useGetCarByIdQuery,
  useGetAllUserCarsQuery,
} = fetcherApi;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import Layout from "@/components/Layout";
import Image from "next/image";
import { FaDollarSign } from "react-icons/fa";
import Link from "next/link";
import { FiEdit } from "react-icons/fi";
import Authorization from "@/HOC/Authorization";
import {
  useGetUserProfileQuery,
  useGetUserQuery,
} from "@/store/ReduxStore/fetcherApi";
import MyCars from "@/components/MyCars";

function Profile() {
  const { data: profileData } = useGetUserProfileQuery();
  const { data: userData } = useGetUserQuery();

  return (
    <Layout>
      <div className="flex items-center justify-center mt-8 mx-auto w-4/5 ">
        {/* Card code block start */}
        <div className="bg-gray-300 shadow rounded-lg">
          <div className="relative ">
            <button className="w-full">
              <div className="coverpicstwo">
                <p className="text-xs text-gray-100">Change Cover Photo</p>
                <div className="ml-2 text-gray-100">
                  <FiEdit />
                </div>
              </div>
              <Image
                className="h-1/6 shadow rounded-t w-full object-cover object-center"
                src="/assets/images/d17.jpg"
                alt="profile"
                width={10000}
                height={2000}
              />
            </button>
            <button className="roundedprofile">
              <Image
                className="w-full h-full z-10 overflow-hidden object-cover rounded-full"
                src="/assets/images/d17.jpg"
                alt="profile-image"
                layout="fill"
              />
            </button>
          </div>
          <div className="px-5 xl:px-10 pb-10 mt-2">
            <div className="flex justify-center xl:justify-end w-full pt-16 xl:pt-5"></div>
            <div className="pt-3 xl:pt-5 flex flex-col xl:flex-row items-start xl:items-center justify-between">
              <div className="xl:pr-16 w-full xl:w-2/ mb-6 ">
                <div className="profileidentity">
                  <h2 className="profilename">{userData?.name}</h2>
                  <div className="profilestatus">
                    {profileData ? (
                      <p>{profileData.businessStatus}</p>
                    ) : (
                      <p>Buyer</p>
                    )}
                  </div>
                </div>
                <div className="profiledescription ">
                  {profileData ? (
                    <p>{profileData.description}</p>
                  ) : (
                    <p>Setup description</p>
                  )}
                </div>
              </div>

              <div className="workingstatusone">
                <div className="workingstatustwo">
                  <Link href="/new-car" passHref>
                    <button className="workingstatusthree">
                      <span>
                        <FaDollarSign className="text-xl mr-1" />
                      </span>
                      Sell
                    </button>
                  </Link>
                  <div className="availablestatus">
                    {profileData ? (
                      <p>{profileData.availability}</p>
                    ) : (
                      <p>Available</p>
                    )}
                  </div>
                </div>
                <div className="profilecontactbutton">
                  <Link
                    href="/profile-setup"
                    onClick={() => {
                      userNameHandler();
                      profileHandler();
                    }}
                    passHref
                  >
                    Contact || Edit Profile
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <MyCars />
    </Layout>
  );
}
export default Authorization(Profile);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import Layout from "@/components/Layout";
import Authorization from "@/HOC/Authorization";
import {
  useGetUserProfileQuery,
  useGetUserQuery,
  useUpdateUserNameMutation,
} from "@/store/ReduxStore/fetcherApi";
import { useState, useEffect } from "react";
import Image from "next/image";
import { FiEdit } from "react-icons/fi";
import PhoneInput from "react-phone-input-2";
import { useRouter } from "next/router";
import { usePostProfileMutation } from "@/store/ReduxStore/fetcherApi";
import Link from "next/link";

const ProfileSetup = () => {
  const router = useRouter();
  const [postProfile] = usePostProfileMutation();
  const [updateUserName] = useUpdateUserNameMutation();
  const { data: profile } = useGetUserProfileQuery();
  const { data: user } = useGetUserQuery();

  const [name, setName] = useState(user?.name);
  const [description, setDescription] = useState(profile?.description);
  const [businessStatus, setBusinessStatus] = useState(profile?.businessStatus);
  const [availability, setAvailability] = useState(profile?.availability);
  const [phoneNumber, setPhoneNumber] = useState(profile?.phoneNumber);

  const form = {
    description,
    businessStatus,
    availability,
    phoneNumber,
  };
  const submitProfile = async (e) => {
    e.preventDefault();
    updateUserName(name);
    postProfile(form);
    router.push("/profile");
  };

  return (
    <Layout>
      <form onSubmit={submitProfile}>
        <div className="bg-gray-100 ">
          <div className="profilesetupheader">
            <div className="profilesetupline">
              <div className="flex w-11/12 mx-auto xl:w-full xl:mx-4 items-center">
                <p className="setupheadertext">Profile Setup</p>
              </div>
            </div>
            <div className="mx-auto">
              <div className="xl:w-9/12 w-11/12 mx-auto xl:ml-8">
                <div className="rounded relative mt-8 h-48">
                  <div className="coverpicsone" />
                  <div className="coverpicstwo">
                    <p className="text-xs text-gray-100">Change Cover Photo</p>
                    <div className="ml-2 text-gray-100">
                      <FiEdit />
                    </div>
                  </div>
                  <input
                    className="backgroundprofile"
                    type="file"
                    name="myImage"
                    accept="image/png, image/gif, image/jpeg"
                    // onChange={profileImageBackgroundUpload}
                  />
                  <button className="profilepics">
                    <Image
                      src="/assets/images/d17.jpg"
                      alt="myprof"
                      className=" rounded-full"
                      layout="fill"
                    />
                    <div className="profilepicsoverlay" />
                    <div className="cursor-pointer flex flex-col justify-center items-center z-10 text-gray-100">
                      <FiEdit />
                      <p className="text-xs text-gray-100">Edit Picture</p>
                    </div>
                    <input
                      className="profileimage"
                      type="file"
                      name="myImage"
                      accept="image/png, image/gif, image/jpeg, image/jpg"
                    />
                  </button>
                </div>
                <div className="mt-16 flex flex-col xl:w-2/6 lg:w-1/2 md:w-1/2 w-full">
                  <label htmlFor="name" className="mylabel">
                    Name
                  </label>
                  <input
                    type="text"
                    name="name"
                    className="formname"
                    placeholder="John Doe"
                    onChange={(e) => setName(e.target.value)}
                    value={name}
                    required
                  />
                </div>
                <div className="mt-8 flex flex-col xl:w-3/5 lg:w-1/2 md:w-1/2 w-full">
                  <label htmlFor="description" className="mylabel">
                    Description
                  </label>
                  <textarea
                    type="text"
                    name="description"
                    className="formdescription"
                    placeholder="Let the world know who you are"
                    onChange={(e) => setDescription(e.target.value)}
                    value={description}
                    maxLength="400"
                    required
                  />
                </div>
              </div>
              <div className="ml-10">
                <div className="inline-flex justify-between py-4  space-x-20 ">
                  <div className=" flex flex-col xl:w-2/6 lg:w-1/2 md:w-1/2 w-full">
                    <label htmlFor="Buyer" className="mylabel">
                      Business Status
                    </label>
                    <select
                      name="businessStatus"
                      onChange={(e) => setBusinessStatus(e.target.value)}
                      value={businessStatus}
                      className="bg-gray-200 p-2"
                    >
                      <option>* Select Business Status</option>
                      <option value="buyer">Buyer</option>
                      <option value="seller">Seller</option>
                    </select>
                  </div>
                </div>
                <p className="mylabel">Available</p>
                <select
                  name="availability"
                  value={availability}
                  onChange={(e) => setAvailability(e.target.value)}
                  className="bg-gray-200 p-2 "
                >
                  <option>* Select Availability </option>
                  <option value="yes">Available</option>
                  <option value="no">Unavailable</option>
                </select>
                <div className="mt-6 mb-8 flex flex-col xl:w-2/6 lg:w-1/2 md:w-1/2 w-full pr-8">
                  <label htmlFor="phoneNumber" className="mylabel">
                    Phone Number
                  </label>
                  <PhoneInput
                    country={"us"}
                    name="phoneNumber"
                    onChange={phoneNumberChange}
                    value={phoneNumber}
                  />
                  <p className="w-full text-left text-xs pt-1 text-gray-500 ">
                    You might choose not to include your phone number if this
                    seems like a security concern.
                  </p>
                </div>
              </div>
            </div>
            <div className="ml-10 justify-end">
              <Link href="/profile" passHref>
                <button className="profilecancelbutton">Cancel</button>
              </Link>
              <button
                className="profilesubmitbutton"
                type="submit"
                onClick={submitProfile}
              >
                Save
              </button>
            </div>
          </div>
        </div>
      </form>
    </Layout>
  );
};

export default Authorization(ProfileSetup);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import axios from "axios";
import { useGetAuthQuery } from "@/store/ReduxStore/fetcherApi";
import { setHttpAgentOptions } from "next/dist/server/config";

export default (ChildComponent) => {
  const composeComponent = (props) => {
    const router = useRouter();

    const { data: authData } = useGetAuthQuery();
    const [page, setPage] = useState(undefined);

    useEffect(() => {
      if (authData && authData === false) {
        router.push("/login");
      } else {
        setPage(<ChildComponent {...props} />);
      }
    }, []);

    return <div>{page}</div>;
  };
  return composeComponent;
};