franpcode/Hangman-game-with-React
1
0
Fork 0
mirror of https://github.com/FranP-code/Hangman-game-with-React.git synced 2025-10-13 00:42:32 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Pannel control styles done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-22 17:19:10 -03:00
parent 28a85f63ec
commit 2e9a2cee45
25 changed files with 489 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Admin/AdminIdentify/AdminIdentify.jsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react'
import AdminHeader from '../Header/AdminHeader'
import Identify from './Identify/Identify'
const AdminIdentify = () => {
return (
<>
<AdminHeader />
<Identify />
</>
)
}
export default AdminIdentify

20
src/components/Admin/AdminIdentify/Identify/Form/Firebase Querys/BringAdminCode.js Normal file
View File

@@ -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

19
src/components/Admin/AdminIdentify/Identify/Form/Firebase Querys/RegisterNewUser.js Normal file
View File

@@ -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

21
src/components/Admin/AdminIdentify/Identify/Form/Firebase Querys/Sign In.js Normal file
View File

@@ -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

137
src/components/Admin/AdminIdentify/Identify/Form/Form.jsx Normal file
View File

@@ -0,0 +1,137 @@
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] = 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')
clearStates()
}}
>
LOGIN
</div>
<div
className={option === 'register' ? "active option" : 'option'}
onClick={() => {
setOption('register')
clearStates()
}}
>
REGISTER
</div>
</nav>
{
option === 'login' ?
<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
}
{
option === 'register' ?
<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>
)
}
export default Form

11
src/components/Admin/AdminIdentify/Identify/Form/MessageContainer.jsx Normal file
View File

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

20
src/components/Admin/AdminIdentify/Identify/Form/Scripts/FormActions.js Normal file
View File

@@ -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

45
src/components/Admin/AdminIdentify/Identify/Form/Scripts/ValidateRegister.js Normal file
View File

@@ -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

24
src/components/Admin/AdminIdentify/Identify/Identify.jsx Normal file
View File

@@ -0,0 +1,24 @@
import React from 'react'
import { getAuth, onAuthStateChanged } from "firebase/auth";
import Form from './Form/Form'
import {withRouter} from 'react-router'
const Identify = (props) => {
const auth = getAuth()
onAuthStateChanged(auth, (user) => {
if (user) {
props.history.push('/admin-place')
}
})
return (
<Form />
)
}
export default withRouter(Identify)

41
src/components/Admin/Control Panel/Actions/Actions.jsx Normal file
View File

@@ -0,0 +1,41 @@
import React from 'react'
import AddCategory from './AddCategory/AddCategory'
import AddWord from './AddWord/AddWord'
import DeleteCategory from './DeleteCategory/DeleteCategory';
import DeleteWord from './DeleteWord/DeleteWord';
import EditWord from './EditWord/EditWord';
const Actions = ({actualAction}) => {
return (
<>
{
actualAction === 'Add Word(s)' ?
<AddWord action={actualAction} />
: null
}
{
actualAction === 'Add Category' ?
<AddCategory action={actualAction} />
: null
}
{
actualAction === 'Delete Category' ?
<DeleteCategory action={actualAction} />
: null
}
{
actualAction === 'Delete Word' ?
<DeleteWord action={actualAction} />
: null
}
{
actualAction === 'Edit Word' ?
<EditWord action={actualAction} />
: null
}
</>
)
}
export default Actions

14
src/components/Admin/Control Panel/Actions/AddCategory/AddCategory.jsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react'
const AddCategory = () => {
console.log('category');
return (
<div>
</div>
)
}
export default AddCategory

14
src/components/Admin/Control Panel/Actions/AddWord/AddWord.jsx Normal file
View File

@@ -0,0 +1,14 @@
import React from 'react'
const AddWord = () => {
console.log('word');
return (
<div>
</div>
)
}
export default AddWord

11
src/components/Admin/Control Panel/Actions/DeleteCategory/DeleteCategory.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const DeleteCategory = () => {
return (
<div>
</div>
)
}
export default DeleteCategory

11
src/components/Admin/Control Panel/Actions/DeleteWord/DeleteWord.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const DeleteWord = () => {
return (
<div>
</div>
)
}
export default DeleteWord

11
src/components/Admin/Control Panel/Actions/EditWord/EditWord.jsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react'
const EditWord = () => {
return (
<div>
</div>
)
}
export default EditWord

13
src/components/Admin/Control Panel/Actions/Scripts/DefineClassName.js Normal file
View File

@@ -0,0 +1,13 @@
const DefineClassName = (action) => {
let className = action.split(' ')
className = className.map(word => word.toLowerCase())
className = className.join('-')
className = className.replaceAll('(', '')
className = className.replaceAll(')', '')
return className
}
export default DefineClassName

18
src/components/Admin/Control Panel/AdminFunctionButton.jsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
import DefineClassName from './Actions/Scripts/DefineClassName'
const AdminFunctionButton = ({action, setActualAction}) => {
const classButton = DefineClassName(action)
return (
<button
className={classButton}
onClick={() => setActualAction(action)}
>
{action}
</button>
)
}
export default AdminFunctionButton

51
src/components/Admin/Control Panel/ControlPanel.jsx Normal file
View File

@@ -0,0 +1,51 @@
import React from "react";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import AdminFunctionButton from "./AdminFunctionButton";
import {withRouter} from 'react-router'
import Actions from "./Actions/Actions";
import AdminHeader from "../Header/AdminHeader";
const ControlPanel = (props) => {
const [userLogged, setUserLogged] = React.useState(false)
const [actualAction, setActualAction] = React.useState('')
const auth = getAuth()
onAuthStateChanged(auth, (user) => {
if (!user) {
props.history.push('/identify')
} else {
setUserLogged(true)
}
})
return (
<>
<AdminHeader />
<div className="control-panel">
{
userLogged ?
<>
<AdminFunctionButton action={'Add Word(s)'} setActualAction={setActualAction}/>
<AdminFunctionButton action={'Add Category'} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Delete Category'} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Delete Word'} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Edit Word'} setActualAction={setActualAction}/>
</>
: null
}
{
actualAction ?
<Actions actualAction={actualAction}/>
: null
}
</div>
</>
)
}
export default withRouter(ControlPanel)

18
src/components/Admin/Header/AdminHeader.jsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
import {withRouter} from 'react-router'
const AdminHeader = (props) => {
return (
<header>
<h1>Admin Place</h1>
<button
className="redirect-button"
onClick={() => props.history.push('/')}
>
Back to the Game
</button>
</header>
)
}
export default withRouter(AdminHeader)