confirm password

digital-course-file/package-lock.json

@@ -35,6 +35,7 @@
         "react-router-dom": "^5.2.0",
         "react-scripts": "4.0.2",
         "react-tooltip": "^4.2.17",
+        "sweetalert": "^2.1.2",
         "web-vitals": "^1.1.0"
       }
     },
@@ -6920,6 +6921,11 @@
         "event-emitter": "~0.3.5"
       }
     },
+    "node_modules/es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+    },
     "node_modules/es6-set": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
@@ -18327,6 +18333,20 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/sweetalert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "dependencies": {
+        "es6-object-assign": "^1.1.0",
+        "promise-polyfill": "^6.0.2"
+      }
+    },
+    "node_modules/sweetalert/node_modules/promise-polyfill": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+      "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -27196,6 +27216,11 @@
         "event-emitter": "~0.3.5"
       }
     },
+    "es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha1-wsNYJlYkfDnqEHyx5mUrb58kUjw="
+    },
     "es6-set": {
       "version": "0.1.5",
       "resolved": "https://registry.npmjs.org/es6-set/-/es6-set-0.1.5.tgz",
@@ -36575,6 +36600,22 @@
         "util.promisify": "~1.0.0"
       }
     },
+    "sweetalert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "requires": {
+        "es6-object-assign": "^1.1.0",
+        "promise-polyfill": "^6.0.2"
+      },
+      "dependencies": {
+        "promise-polyfill": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+          "integrity": "sha1-36lpQ+qcEh/KTem1hoyznTRy4Fc="
+        }
+      }
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

digital-course-file/package.json

@@ -31,6 +31,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
     "react-tooltip": "^4.2.17",
+    "sweetalert": "^2.1.2",
     "web-vitals": "^1.1.0"
   },
   "scripts": {

digital-course-file/src/user/Login.js

-import React from 'react'
+import React, { useState } from 'react'
 import GoogleButton from 'react-google-button'
 import GithubButton from 'react-github-login-button'
 import { Link } from 'react-router-dom'
 import ParticlesBg from 'particles-bg'
+import swal from 'sweetalert'
 
 const Login = (props) => {
   const {
@@ -19,11 +20,20 @@ const Login = (props) => {
     googlesignin,
     githubsignin,
   } = props
+  const [confirmPassword, setConfirmPassword] = useState('')
+
+  const checkPassword = () => {
+    if (confirmPassword === password) {
+      handleSignup()
+    } else {
+      swal('Oops!', 'Passwords did not match!', 'error')
+    }
+  }
 
   return (
     <section>
       <div className='loginContainer'>
-        <label>UserName</label>
+        <label>Email</label>
         <input
           name='email'
           type='text'
@@ -41,6 +51,18 @@ const Login = (props) => {
           value={password}
           onChange={(e) => setPassword(e.target.value)}
         />
+        {!hasAccount && (
+          <>
+            <label>Confirm Password</label>
+            <input
+              name='password'
+              type='password'
+              required
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+            />
+          </>
+        )}
         <p className='errorMsg'>{passwordError}</p>
         <div className='btnContainer'>
           {hasAccount ? (
@@ -63,7 +85,7 @@ const Login = (props) => {
             </>
           ) : (
             <>
-              <button name='signup' onClick={handleSignup}>
+              <button name='signup' onClick={checkPassword}>
                 Sign up
               </button>