Video-25-User-Profile-Screen (basir#25)

Author: basir

README.md

@@ -228,7 +228,8 @@ JS AMAZONA
  3. after_render handle form submit
  4. create profile update request in frontend
  5. create profile update api in backend
- 6. implement sign out
+ 6. create isAuth in utils.js and use in update profile
+ 7. implement sign out
 26. Create Checkout Wizard Header Component
  1. create component
  2. style component

backend/routers/userRouter.js

@@ -1,7 +1,7 @@
 import express from 'express';
 import expressAsyncHandler from 'express-async-handler';
 import User from '../models/userModel';
-import { generateToken } from '../utils';
+import { generateToken, isAuth } from '../utils';
 
 const userRouter = express.Router();
 
@@ -68,4 +68,29 @@ userRouter.post(
  }
  })
 );
+userRouter.put(
+ '/:id',
+ isAuth,
+ expressAsyncHandler(async (req, res) => {
+ const user = await User.findById(req.params.id);
+
+ if (!user) {
+ res.status(404).send({
+ message: 'User Not Found',
+ });
+ } else {
+ user.name = req.body.name || user.name;
+ user.email = req.body.email || user.email;
+ user.password = req.body.password || user.password;
+ const updatedUser = await user.save();
+ res.send({
+ _id: updatedUser._id,
+ name: updatedUser.name,
+ email: updatedUser.email,
+ isAdmin: updatedUser.isAdmin,
+ token: generateToken(updatedUser),
+ });
+ }
+ })
+);
 export default userRouter;

backend/utils.js

@@ -12,3 +12,19 @@ export const generateToken = (user) => {
  config.JWT_SECRET
  );
 };
+export const isAuth = (req, res, next) => {
+ const bearerToken = req.headers.authorization;
+ if (!bearerToken) {
+ res.status(401).send({ message: 'Token is not supplied' });
+ } else {
+ const token = bearerToken.slice(7, bearerToken.length);
+ jwt.verify(token, config.JWT_SECRET, (err, data) => {
+ if (err) {
+ res.status(401).send({ message: 'Invalid Token' });
+ } else {
+ req.user = data;
+ next();
+ }
+ });
+ }
+};

frontend/src/api.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { apiUrl } from './config';
+import { getUserInfo } from './localStorage';
 
 export const getProduct = async (id) => {
  try {
@@ -64,3 +65,28 @@ export const register = async ({ name, email, password }) => {
  return { error: err.response.data.message || err.message };
  }
 };
+export const update = async ({ name, email, password }) => {
+ try {
+ const { _id, token } = getUserInfo();
+ const response = await axios({
+ url: `${apiUrl}/api/users/${_id}`,
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${token}`,
+ },
+ data: {
+ name,
+ email,
+ password,
+ },
+ });
+ if (response.statusText !== 'OK') {
+ throw new Error(response.data.message);
+ }
+ return response.data;
+ } catch (err) {
+ console.log(err);
+ return { error: err.response.data.message || err.message };
+ }
+};

frontend/src/index.js

@@ -6,6 +6,7 @@ import CartScreen from './srceens/CartScreen';
 import SigninScreen from './srceens/SigninScreen';
 import Header from './components/Header';
 import RegisterScreen from './srceens/RegisterScreen';
+import ProfileScreen from './srceens/ProfileScreen';
 
 const routes = {
  '/': HomeScreen,
@@ -14,6 +15,7 @@ const routes = {
  '/cart': CartScreen,
  '/signin': SigninScreen,
  '/register': RegisterScreen,
+ '/profile': ProfileScreen,
 };
 const router = async () => {
  showLoading();
@@ -28,7 +30,7 @@ const router = async () => {
  await Header.after_render();
  const main = document.getElementById('main-container');
  main.innerHTML = await screen.render();
- await screen.after_render();
+ if (screen.after_render) await screen.after_render();
  hideLoading();
 };
 window.addEventListener('load', router);

frontend/src/localStorage.js

@@ -27,6 +27,9 @@ export const setUserInfo = ({
  })
  );
 };
+export const clearUser = () => {
+ localStorage.removeItem('userInfo');
+};
 export const getUserInfo = () => {
  return localStorage.getItem('userInfo')
  ? JSON.parse(localStorage.getItem('userInfo'))

frontend/src/srceens/ProfileScreen.js

@@ -0,0 +1,67 @@
+import { update } from '../api';
+import { getUserInfo, setUserInfo, clearUser } from '../localStorage';
+import { showLoading, hideLoading, showMessage } from '../utils';
+
+const ProfileScreen = {
+ after_render: () => {
+ document.getElementById('signout-button').addEventListener('click', () => {
+ clearUser();
+ document.location.hash = '/';
+ });
+ document
+ .getElementById('profile-form')
+ .addEventListener('submit', async (e) => {
+ e.preventDefault();
+ showLoading();
+ const data = await update({
+ name: document.getElementById('name').value,
+ email: document.getElementById('email').value,
+ password: document.getElementById('password').value,
+ });
+ hideLoading();
+ if (data.error) {
+ showMessage(data.error);
+ } else {
+ setUserInfo(data);
+ document.location.hash = '/';
+ }
+ });
+ },
+ render: () => {
+ const { name, email } = getUserInfo();
+ if (!name) {
+ document.location.hash = '/';
+ }
+ return `
+ <div class="form-container">
+ <form id="profile-form">
+ <ul class="form-items">
+ <li>
+ <h1>User Profile</h1>
+ </li>
+ <li>
+ <label for="name">Name</label>
+ <input type="name" name="name" id="name" value="${name}" />
+ </li>
+ <li>
+ <label for="email">Email</label>
+ <input type="email" name="email" id="email" value="${email}" />
+ </li>
+ <li>
+ <label for="password">Password</label>
+ <input type="password" name="password" id="password" />
+ </li>
+ <li>
+ <button type="submit" class="primary">Update</button>
+ </li>
+ <li>
+ <button type="button" id="signout-button" >Sign Out</button>
+ </li>
+ 
+ </ul>
+ </form>
+ </div>
+ `;
+ },
+};
+export default ProfileScreen;