add flow when invalid credentials

media-store/app/src/pages/login/Login.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Form, Input, Button, Checkbox } from "antd";
+import { Form, Input, Button, Checkbox, message } from "antd";
 import { login } from "../../api-service";
 import { useHistory } from "react-router-dom";
 import { useGlobals } from "../../GlobalContext";
@@ -19,8 +19,10 @@ const tailLayout = {
     span: 8,
   },
 };
+const MESSAGE_TIMEOUT = 2;
 
 const Login = () => {
+  const [form] = Form.useForm();
   const history = useHistory();
   const { setLoading, setUser } = useGlobals();
   const { handleError } = useErrors();
@@ -30,7 +32,6 @@ const Login = () => {
     setLoading(true);
     login({ email: values.email, password: values.password })
       .then((response) => {
-        console.log(response.data);
         const { ID, email, level, token, roles } = response.data;
         setUser({
           ID,
@@ -39,10 +40,17 @@ const Login = () => {
           level,
           token,
         });
-        setLoading(false);
         history.push("/");
       })
-      .catch(handleError);
+      .catch((error) => {
+        if (error.response.status === 401) {
+          form.resetFields();
+          message.error("Invalid credentials!", MESSAGE_TIMEOUT);
+        } else {
+          handleError(error);
+        }
+      })
+      .then(() => setLoading(false));
   };
 
   const onFinishFailed = (errorInfo) => {
@@ -51,6 +59,7 @@ const Login = () => {
 
   return (
     <Form
+      form={form}
       {...layout}
       name="basic"
       initialValues={{

media-store/srv/user-service.js

@@ -5,6 +5,18 @@ const bcrypt = require("bcryptjs");
 const { ACCESS_TOKEN_SECRET } = cds.env;
 const ACCESS_TOKEN_EXP_IN = "10m";
 
+const comparePasswords = async (password, hashedPassword) => {
+  return new Promise((resolve, reject) =>
+    bcrypt.compare(password, hashedPassword, (err, res) => {
+      if (err || res === false) {
+        reject(err);
+      } else {
+        resolve(res);
+      }
+    })
+  );
+};
+
 module.exports = async function () {
   const db = await cds.connect.to("db");
   const { Employees, Customers } = db.entities;
@@ -26,16 +38,13 @@ module.exports = async function () {
       userFromDb = await db.run(SELECT.one(Customers).where({ email }));
       roles = ["customer"];
     }
-    const userEqualPassword = await new Promise((resolve, reject) =>
+
-      bcrypt.compare(password, userFromDb.password, (err, res) => {
+    if (!userFromDb) {
-        if (err || res === false) {
+      req.reject(401);
-          reject(err);
+    }
-        } else {
+    try {
-          resolve(res);
+      await comparePasswords(password, userFromDb.password);
-        }
+    } catch (error) {
-      })
-    );
-    if (!userEqualPassword) {
       req.reject(401);
     }