From 3d09def619a19aa5a7e008228543b2dfd3f398a3 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Fri, 22 Oct 2021 12:15:24 -0300 Subject: [PATCH] Error message component and form logic done --- public/css/index.css | 14 ++ public/css/index.css.map | 2 +- public/sass/_form.scss | 4 + public/sass/_message.scss | 16 +++ public/sass/index.scss | 3 +- .../Form/Firebase Querys/BringAdminCode.js | 20 +++ .../Form/Firebase Querys/RegisterNewUser.js | 19 +++ .../Identify/Form/Firebase Querys/Sign In.js | 21 +++ src/components/Admin/Identify/Form/Form.jsx | 121 +++++++++++++++--- .../Admin/Identify/Form/MessageContainer.jsx | 11 ++ .../Identify/Form/Scripts/FormActions.js | 20 +++ .../Identify/Form/Scripts/ValidateRegister.js | 45 +++++++ 12 files changed, 279 insertions(+), 17 deletions(-) create mode 100644 public/sass/_message.scss create mode 100644 src/components/Admin/Identify/Form/Firebase Querys/BringAdminCode.js create mode 100644 src/components/Admin/Identify/Form/Firebase Querys/RegisterNewUser.js create mode 100644 src/components/Admin/Identify/Form/Firebase Querys/Sign In.js create mode 100644 src/components/Admin/Identify/Form/MessageContainer.jsx create mode 100644 src/components/Admin/Identify/Form/Scripts/FormActions.js create mode 100644 src/components/Admin/Identify/Form/Scripts/ValidateRegister.js diff --git a/public/css/index.css b/public/css/index.css index 27a3e3d..ac99a7a 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -457,11 +457,25 @@ header .redirect-button:hover { border-bottom: 0; border: 1px solid #797979; } +.form-container .loading { + opacity: 70%; +} @media (min-width: 991.98px) { .form-container { margin: 0px 20vw; } } +.message-container { + padding: 4vh 5vw; + display: flex; + justify-content: center; + align-items: center; + background-color: #ff4e4e; +} +.message-container h2 { + color: #fff; + margin: 0; +} /*# sourceMappingURL=index.css.map */ diff --git a/public/css/index.css.map b/public/css/index.css.map index f1f1ac2..c6d8ae6 100644 --- a/public/css/index.css.map +++ b/public/css/index.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss"],"names":[],"mappings":"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","file":"index.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss","../sass/_form.scss","../sass/_message.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;AAGJ;EACI;EACA;EAEA;EACA;EAIA,kBAFkB;EAGlB;EACA;EAEA;EACA;EAEA;EAEA;;AAEA;EACI;EAEA;;;AAMZ;EAIQ;IAEI;IACA;IAEA;IACA;IAEA;;EAEA;IACI;IACA;;;AAMhB;EAIQ;IACI;IACA;;;AClFZ;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;AAIR;EAEI;IAEI;IACA;IACA;;EAEA;IACI;;EAII;IAEI;;EAKZ;IACI;IACA;IAEA;IACA;IACA;;;AAKZ;;AAAA;AClDA;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EAEA;;;AAIR;EAIQ;IAEI;;EAGJ;IACI;;;AAKZ;EAIQ;IAEI;;;AC3DZ;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;;AAKA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;AAMhB;EAIQ;IACI;;EAEA;IAEI;;;AClKhB;EACI;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EAEI;IAEI;IACA;;;ACvCR;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;ACnBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI;;;ACdR;EACI;EAEA;EACA;EACA;;AAEA;EAII,OAFO;EAGP,QAHO;EAKP;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;;ACvBR;EAEI;;AAEA;EAEI;EAGA;EACA;;AAEA;EAGI;EACA,kBAHkB;EAKlB;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EAEI;EACA;EACA;;AAMZ;EAEI;EAEA;EACA;EAEA;EAEA;;AAEA;EAEI;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;;AAEA;EACI;EAEA;EACA;;AAMZ;EACI;;;AAIR;EAEI;IAEI;;;ACnFR;EAEI;EAEA;EACA;EACA;EAEA;;AAEA;EAEI;EACA","file":"index.css"} \ No newline at end of file diff --git a/public/sass/_form.scss b/public/sass/_form.scss index ddfa2d5..4034596 100644 --- a/public/sass/_form.scss +++ b/public/sass/_form.scss @@ -71,6 +71,10 @@ } } } + + .loading { + opacity: 70%; + } } @media (min-width: 991.98px) { diff --git a/public/sass/_message.scss b/public/sass/_message.scss new file mode 100644 index 0000000..98c4d79 --- /dev/null +++ b/public/sass/_message.scss @@ -0,0 +1,16 @@ +.message-container { + + padding: 4vh 5vw; + + display: flex; + justify-content: center; + align-items: center; + + background-color: rgb(255, 78, 78); + + h2 { + + color: #fff; + margin: 0; + } +} \ No newline at end of file diff --git a/public/sass/index.scss b/public/sass/index.scss index 65afeae..45a01ba 100644 --- a/public/sass/index.scss +++ b/public/sass/index.scss @@ -26,4 +26,5 @@ html, body { @import 'loading'; @import 'letters-registered'; @import 'letter-input'; -@import 'form'; \ No newline at end of file +@import 'form'; +@import 'message'; \ No newline at end of file diff --git a/src/components/Admin/Identify/Form/Firebase Querys/BringAdminCode.js b/src/components/Admin/Identify/Form/Firebase Querys/BringAdminCode.js new file mode 100644 index 0000000..0063b38 --- /dev/null +++ b/src/components/Admin/Identify/Form/Firebase Querys/BringAdminCode.js @@ -0,0 +1,20 @@ +import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; +import { firestore } from '../../../../../Firebase/Firebase_Config'; + +const BringAdminCode = async () => { + + try { + + const db = getFirestore(firestore) + const data = await collection(db, 'adminCodes') + const result = await getDocs(data) + + return await result.docs.map(doc => doc.data()) + + } catch (error) { + + console.log(error) + } +} + +export default BringAdminCode diff --git a/src/components/Admin/Identify/Form/Firebase Querys/RegisterNewUser.js b/src/components/Admin/Identify/Form/Firebase Querys/RegisterNewUser.js new file mode 100644 index 0000000..ac4a44e --- /dev/null +++ b/src/components/Admin/Identify/Form/Firebase Querys/RegisterNewUser.js @@ -0,0 +1,19 @@ +import { firestore } from '../../../../../Firebase/Firebase_Config' +import {getAuth, createUserWithEmailAndPassword} from 'firebase/auth' + +const RegisterNewUser = async (email, password, setMessage) => { + + const auth = getAuth() + + try { + + const response = await createUserWithEmailAndPassword(auth, email, password) + console.log(response) + + } catch (error) { + setMessage('There has been an error registering the user. Please try again later') + console.log(error) + } +} + +export default RegisterNewUser diff --git a/src/components/Admin/Identify/Form/Firebase Querys/Sign In.js b/src/components/Admin/Identify/Form/Firebase Querys/Sign In.js new file mode 100644 index 0000000..cb76e85 --- /dev/null +++ b/src/components/Admin/Identify/Form/Firebase Querys/Sign In.js @@ -0,0 +1,21 @@ +import { firestore } from "../../../../../Firebase/Firebase_Config" +import {getAuth, signInWithEmailAndPassword} from 'firebase/auth' + +const SignIn = async (data, setMessage) => { + + const auth = getAuth() + const email = data[0] + const password = data[1] + + try { + + const response = await signInWithEmailAndPassword(auth, email, password) + console.log(response) + + } catch (error) { + console.log(error) + setMessage('User or Password wrong') + } +} + +export default SignIn diff --git a/src/components/Admin/Identify/Form/Form.jsx b/src/components/Admin/Identify/Form/Form.jsx index 183423e..18cd5ed 100644 --- a/src/components/Admin/Identify/Form/Form.jsx +++ b/src/components/Admin/Identify/Form/Form.jsx @@ -1,27 +1,83 @@ -import React from 'react' +import React, {useState} from 'react' +import Loading from '../../../Game/components/Loading/Loading' +import MessageContainer from './MessageContainer' +import FormActions from './Scripts/FormActions' const Form = () => { - const [option, setOption] = React.useState('login') + const [option, setOption] = useState('login') + + const [email, setEmail] = useState('') + const [password, setPassword] = useState('') + const [confirmPassword, setConfirmPassword] = useState('') + const [adminReferredCode, setAdminReferredCode] = useState('') + + const [loading, setLoading] = useState(false) + const [message, setMessage] = useState(false) + + const clearStates = () => { + + setEmail('') + setPassword('') + setConfirmPassword('') + setAdminReferredCode('') + setMessage(false) + } return (
+ { + message ? + + : null + } - { option === 'login' ? -
- - - + { + setLoading(true) + + FormActions(e, [email, password], option, setLoading, setMessage) + clearStates() + }} + > + setEmail(e.target.value)} + value={email} + /> + setPassword(e.target.value)} + value={password} + /> +
: null @@ -29,16 +85,51 @@ const Form = () => { { option === 'register' ? -
- - - - - + { + FormActions(e, [email, password, confirmPassword, adminReferredCode], option, setLoading, setMessage) + clearStates() + setLoading(true) + }} + > + setEmail(e.target.value)} + value={email} + /> + setPassword(e.target.value)} + value={password} + /> + setConfirmPassword(e.target.value)} + value={confirmPassword} + /> + {setAdminReferredCode(e.target.value)}} + value={adminReferredCode} + /> +
: null } + { + loading ? + + : null + }
) } diff --git a/src/components/Admin/Identify/Form/MessageContainer.jsx b/src/components/Admin/Identify/Form/MessageContainer.jsx new file mode 100644 index 0000000..4203f84 --- /dev/null +++ b/src/components/Admin/Identify/Form/MessageContainer.jsx @@ -0,0 +1,11 @@ +import React from 'react' + +const MessageContainer = (props) => { + return ( +
+

{props.message}

+
+ ) +} + +export default MessageContainer diff --git a/src/components/Admin/Identify/Form/Scripts/FormActions.js b/src/components/Admin/Identify/Form/Scripts/FormActions.js new file mode 100644 index 0000000..fdee026 --- /dev/null +++ b/src/components/Admin/Identify/Form/Scripts/FormActions.js @@ -0,0 +1,20 @@ +import SignIn from "../Firebase Querys/Sign In" +import ValidateRegister from "./ValidateRegister" + +const FormActions = async (e, data, option, setLoading, setMessage) => { + + e.preventDefault() + + if (option === 'login') { + await SignIn(data, setMessage) + setLoading(false) + } + + if (option === 'register') { + + await ValidateRegister(data, setMessage) + setLoading(false) + } +} + +export default FormActions diff --git a/src/components/Admin/Identify/Form/Scripts/ValidateRegister.js b/src/components/Admin/Identify/Form/Scripts/ValidateRegister.js new file mode 100644 index 0000000..c882c0e --- /dev/null +++ b/src/components/Admin/Identify/Form/Scripts/ValidateRegister.js @@ -0,0 +1,45 @@ +import React from 'react' +import BringAdminCode from '../Firebase Querys/BringAdminCode' +import RegisterNewUser from '../Firebase Querys/RegisterNewUser' + +const ValidateRegister = async (data, setMessage) => { + + const email = data[0] + const password = data[1] + const confirmPassword = data[2] + const adminRefferCode = data[3] + + if (password.length < 6) { + + console.log('PASSWORD TOO SHORT') + setMessage('Password too short') + return false + } + + if (password !== confirmPassword) { + + console.log('LAS CONTRASEÑAS NO COINCIDEN') + setMessage('The Passwords not match') + return false + } + + const documents = await BringAdminCode() + + let adminRefferCodeIsValid = false + + documents.forEach(document => { + + if (adminRefferCode === document.code) { + + adminRefferCodeIsValid = true + RegisterNewUser(email, password, setMessage) + } + }); + + if (!adminRefferCodeIsValid) { + setMessage('Admin Reffer Code not valid') + } + +} + +export default ValidateRegister