Video-24-Register-Screen (basir#24)

Author: basir

README.md

@@ -216,75 +216,84 @@ JS AMAZONA
  12. button id message-overlay-close-button OK
  13. add class active to it
  14. add event listener for button to call callback
-24. Register Screen Action
- 1. after_render handle form submit
- 2. create register request in frontend
- 3. create register api in backend
-25. Create Checkout Wizard Header Component
+24. Register Screen
+ 1. create RegisterScreen.js
+ 2. add form elements
+ 3. after_render handle form submit
+ 4. create register request in frontend
+ 5. create register api in backend
+25. User Profile Screen
+ 1. create ProfileScreen.js
+ 2. add form elements
+ 3. after_render handle form submit
+ 4. create profile update request in frontend
+ 5. create profile update api in backend
+ 6. implement sign out
+26. Create Checkout Wizard Header Component
  1. create component
  2. style component
-26. Shipping Screen
+27. Shipping Screen
  1. create ShippingScreen.js
  2. style elements
  3. handle form submit
-27. Payment Screen
+28. Payment Screen
  1. create PaymentScreen.js
  2. style elements
  3. handle form submit
-28. PlaceOrder Screen UI
+29. PlaceOrder Screen UI
  1. create PlaceOrder.js
  2. style elements
-29. PlaceOrder Screen Action
+30. PlaceOrder Screen Action
  1. handle form submit
  2. create backend api to create order
-30. Order Screen
+31. Order Screen
  1. create OrderScreen.js
  2. style elements
-31. PayPal Payment
+32. PayPal Payment
  1. add paypal checkout script
  2. show paypal button
  3. update order after payment
-32. User Profile UI
+33. User Profile UI
  1. create ProfileScreen.js
  2. style elements
-33. User Profile Data
+34. User Profile Data
  1. Create profile info backend api
  2. Create user orders api
  3. Call apis in the backend
-34. Update Profile
+35. Update Profile
  1. handle form submit
  2. send request to backend
  3. create api to update profile
-35. Admin Products UI
+36. Admin Products UI
  1. create Admin Order menu in header
  2. create ProductListScreen.js
  3. show products with edit and delete button
  4. show create product button
  5. implement create product backend
  6. redirect user to edit product screen
-36. Edit Product
+37. Edit Product
  1. create ProductListScreen.js
  2. load product data from backend
  3. handle form submit
  4. save product in backend
-37. Delete Product
+38. Delete Product
  1. update ProductListScreen.js
  2. handle delete button
  3. rerender after deletion
-38. Admin Orders
+39. Admin Orders
  1. create Admin Order menu in header
  2. create AdminOrder.js
  3. load orders from backend
  4. list them in the screen
  5. show delete and edit button
  6. redirect to order details on edit action
-39. Edit Order
+40. Edit Order
  1. if order is payed show deliver button for admin
  2. handle click on deliver button
  3. set state to delivered
-40. Delete Order
+41. Delete Order
  1. update OrderListScreen.js
  2. handle delete button
  3. rerender after deletion
-41. Publish heroku
+42. Publish heroku
  1. publish steps

backend/routers/userRouter.js

@@ -44,4 +44,28 @@ userRouter.post(
  }
  })
 );
+userRouter.post(
+ '/register',
+ expressAsyncHandler(async (req, res) => {
+ const user = new User({
+ name: req.body.name,
+ email: req.body.email,
+ password: req.body.password,
+ });
+ const createdUser = await user.save();
+ if (!createdUser) {
+ res.status(401).send({
+ message: 'Invalid User Data',
+ });
+ } else {
+ res.send({
+ _id: createdUser._id,
+ name: createdUser.name,
+ email: createdUser.email,
+ isAdmin: createdUser.isAdmin,
+ token: generateToken(createdUser),
+ });
+ }
+ })
+);
 export default userRouter;

frontend/src/api.js

@@ -41,3 +41,26 @@ export const signin = async ({ email, password }) => {
  return { error: err.response.data.message || err.message };
  }
 };
+export const register = async ({ name, email, password }) => {
+ try {
+ const response = await axios({
+ url: `${apiUrl}/api/users/register`,
+ method: 'POST',
+ header: {
+ 'Content-Type': 'application/json',
+ },
+ 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

@@ -5,13 +5,15 @@ import Error404Screen from './srceens/Error404Screen';
 import CartScreen from './srceens/CartScreen';
 import SigninScreen from './srceens/SigninScreen';
 import Header from './components/Header';
+import RegisterScreen from './srceens/RegisterScreen';
 
 const routes = {
  '/': HomeScreen,
  '/product/:id': ProductScreen,
  '/cart/:id': CartScreen,
  '/cart': CartScreen,
  '/signin': SigninScreen,
+ '/register': RegisterScreen,
 };
 const router = async () => {
  showLoading();

frontend/src/srceens/RegisterScreen.js

@@ -0,0 +1,68 @@
+import { register } from '../api';
+import { getUserInfo, setUserInfo } from '../localStorage';
+import { showLoading, hideLoading, showMessage } from '../utils';
+
+const RegisterScreen = {
+ after_render: () => {
+ document
+ .getElementById('register-form')
+ .addEventListener('submit', async (e) => {
+ e.preventDefault();
+ showLoading();
+ const data = await register({
+ 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: () => {
+ if (getUserInfo().name) {
+ document.location.hash = '/';
+ }
+ return `
+ <div class="form-container">
+ <form id="register-form">
+ <ul class="form-items">
+ <li>
+ <h1>Create Account</h1>
+ </li>
+ <li>
+ <label for="name">Name</label>
+ <input type="name" name="name" id="name" />
+ </li>
+ <li>
+ <label for="email">Email</label>
+ <input type="email" name="email" id="email" />
+ </li>
+ <li>
+ <label for="password">Password</label>
+ <input type="password" name="password" id="password" />
+ </li>
+ <li>
+ <label for="repassword">Re-Enter Password</label>
+ <input type="password" name="repassword" id="repassword" />
+ </li>
+ <li>
+ <button type="submit" class="primary">Register</button>
+ </li>
+ <li>
+ <div>
+ Already have an account?
+ <a href="/#/signin">Sign-In </a>
+ </div>
+ </li>
+ </ul>
+ </form>
+ </div>
+ `;
+ },
+};
+export default RegisterScreen;