diff --git a/digital-course-file/package-lock.json b/digital-course-file/package-lock.json index adb35ddcd49d5eff57080ae5243eb62ff4654e81..75d00494c8e84ed9196139f864246dfbc9d767cf 100644 --- a/digital-course-file/package-lock.json +++ b/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", diff --git a/digital-course-file/package.json b/digital-course-file/package.json index f0a04ea83bb8336066ddafc6105c329ffa68544c..d7f6e499e3dcb4263a1c8569cf23962ac1b31058 100644 --- a/digital-course-file/package.json +++ b/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": { diff --git a/digital-course-file/src/user/Login.js b/digital-course-file/src/user/Login.js index ea16038df9b667d4a832ca21ead8ee19e96f2cc5..9d7e274b50d80026ec22a3c0187215df5e3a1dc8 100644 --- a/digital-course-file/src/user/Login.js +++ b/digital-course-file/src/user/Login.js @@ -1,8 +1,9 @@ -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>