Error message component and form logic done

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 */

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"}
+{"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":"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","file":"index.css"}

public/sass/_form.scss

@@ -71,6 +71,10 @@
             }
         }
     }
+
+    .loading {
+        opacity: 70%;
+    }
 }
 
 @media (min-width: 991.98px) {

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;
+    }
+}

public/sass/index.scss

@@ -26,4 +26,5 @@ html, body {
 @import 'loading';
 @import 'letters-registered';
 @import 'letter-input';
-@import 'form';
+@import 'form';
+@import 'message';

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

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

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

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 (
         <div className="form-container">
+            {
+                message ?
+                    <MessageContainer message={message} />
+                : null
+            }
             <nav className="options-container">
-                <div className={option === 'login' ? "active option" : 'option'} onClick={() => setOption('login')}>
+                <div
+                    className={option === 'login' ? "active option" : 'option'}
+                    onClick={() => {
+                        setOption('login')
+                        clearStates()
+                    }}
+                >
+
                     LOGIN
                 </div>
-                <div className={option === 'register' ? "active option" : 'option'} onClick={() => setOption('register')}>
+                
+                <div
+                    className={option === 'register' ? "active option" : 'option'}
+                    onClick={() => {
+                        setOption('register')
+                        clearStates()
+                    }}
+                >
                     REGISTER
                 </div>
             </nav>
-
             {
                 option === 'login' ?
 
-                    <form>
-                        <input type="email" placeholder="Email" id="login-email"/>
-                        <input type="password" placeholder="Password" id="login-password"/>
-                        <input type="submit" value="Login"  id="login-submit"/>
+                    <form
+                        onSubmit={(e) => {
+                            setLoading(true)
+
+                            FormActions(e, [email, password], option, setLoading, setMessage)
+                            clearStates()
+                        }}
+                    >
+                        <input
+                            type="email"
+                            placeholder="Email"
+                            required
+                            onChange={(e) => setEmail(e.target.value)}
+                            value={email} 
+                        />
+                        <input
+                            type="password"
+                            placeholder="Password"
+                            onChange={(e) => setPassword(e.target.value)}
+                            value={password} 
+                        />
+                        <input type="submit" value="Login"/>
                     </form>
 
                 : null
@@ -29,16 +85,51 @@ const Form = () => {
             {
                 option === 'register' ?
 
-                    <form>
-                        <input type="email" placeholder="Email" id="register-email"/>
-                        <input type="password" placeholder="Password" id="register-password"/>
-                        <input type="password" placeholder="Confirm Password" id="register-confirm-password"/>
-                        <input type="password" placeholder="Admin Referred Code" id="register-admin-code"/>
-                        <input type="submit" value="Register" id=""/>
+                    <form
+                        onSubmit={(e) => {
+                            FormActions(e, [email, password, confirmPassword, adminReferredCode], option, setLoading, setMessage)
+                            clearStates()
+                            setLoading(true)
+                        }}
+                    >
+                        <input
+                            type="email"
+                            placeholder="Email"
+                            required
+                            onChange={(e) => setEmail(e.target.value)}
+                            value={email} 
+                        />
+                        <input
+                            type="password"
+                            placeholder="Password"
+                            required
+                            onChange={(e) => setPassword(e.target.value)}
+                            value={password} 
+                        />
+                        <input
+                            type="password"
+                            placeholder="Confirm Password"
+                            required
+                            onChange={(e) => setConfirmPassword(e.target.value)}    
+                            value={confirmPassword} 
+                        />
+                        <input
+                            type="password"
+                            placeholder="Admin Referred Code"
+                            required
+                            onChange={(e) => {setAdminReferredCode(e.target.value)}}
+                            value={adminReferredCode} 
+                        />
+                        <input type="submit" value="Register" />
                     </form>
                     
                 : null
             }
+            {
+                loading ?
+                    <Loading />
+                : null
+            }
         </div>
     )
 }

src/components/Admin/Identify/Form/MessageContainer.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const MessageContainer = (props) => {
+    return (
+        <div className="message-container">
+            <h2>{props.message}</h2>
+        </div>
+    )
+}
+
+export default MessageContainer

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

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