Error message component and form logic done

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