Admin place started

src/App.js

@@ -1,7 +1,7 @@
 import React, {useState} from "react";
 import CurrentScore from "./components/CurrentScore/CurrentScore";
 import Hangman from "./components/Hangman/Hangman";
-import Header from "./components/Header/Header";
+
 //import PuzzleWord from "./components/Hangman/PuzzleWord/PuzzleWord";
 import Victory from "./components/Victory && Defeat/Victory";
 import Defeat from "./components/Victory && Defeat/Defeat";
@@ -27,6 +27,17 @@ import getWidthScreenUser from "./General Scripts/getWidthScreenUser";
 import LetterInput from "./components/Letter Input/LetterInput";
 import introducedLetterSound from './sound/Letter introduced.mp3'
 
+import {
+  BrowserRouter as Router,
+  Switch,
+  Route,
+  Link
+} from "react-router-dom";
+import AppHeader from "./components/AppHeader/AppHeader";
+import AdminHeader from "./components/Admin/Header/AdminHeader";
+import ControlPanel from "./components/Admin/Identify/Identify";
+import Identify from "./components/Admin/Identify/Identify";
+
 function App() {
   const [displayApp, setDisplayApp] = useState(false)
   const [mobileUser, setMobileUser] = useState(false)
@@ -170,71 +181,86 @@ function App() {
   }
 
   return (
-   <>
-    <Header
-      language={language}
-
-      category={category}
-
-      displayCategories={displayCategories}
-      setDisplayCategories={setDisplayCategories}
-    />
     
-    <div className="game-container">
-      
-      {
-        languageIsReady ?
+    <Router>
+      <>
         
-        <div className='categories-container'>
-          <Categories currentScore={currentScore} displayCategories={displayCategories} AppLanguage={language} category={category} setCategory={setCategory} categoryIsReady={categoryIsReady} setLanguage={setLanguage}/>
-        </div>
 
-      :null
-      }
+        <Switch>
 
-      <div className='column-1'>
-        <Hangman
-          hangmanFrame={hangmanFrame}
-          />
-      </div>
-      
-      <div className='column-2'>
-        <CurrentScore
+          <Route path='/identify'>
+            <AdminHeader />
+            <Identify />
+          </Route>
+        
+          <Route path="/">
+            <AppHeader
+              language={language}
 
-          currentScore={currentScore}
-          language={language}
+              category={category}
 
-        />
-
-        <Word
-          selectedWord={selectedWord}
-          correctLetters={correctLetters}
-        />
-
-      </div>
-
-    </div>
-        {
-          mobileUser ?
-            <LetterInput
+              displayCategories={displayCategories}
+              setDisplayCategories={setDisplayCategories}
             />
-          :null
-        }
-        {
-          !displayApp ? <Loading /> : null
-        }
 
-        {endOfGame === 'Victory' ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} language={language}/> : null}
-        {endOfGame === 'Defeat'  ? <Defeat language={language}/> : null}
+            <div className="game-container">
+              
+              {
+                languageIsReady ?
+                
+                <div className='categories-container'>
+                  <Categories currentScore={currentScore} displayCategories={displayCategories} AppLanguage={language} category={category} setCategory={setCategory} categoryIsReady={categoryIsReady} setLanguage={setLanguage}/>
+                </div>
 
-    <LettersRegistered
-          lettersRegistered={lettersRegistered}
-        />
-        
-      <audio className="letterIntroduced-audio-container">
-        <source src={introducedLetterSound} type="audio/mp3" autoPlay="true"></source>
-      </audio>
-   </>
+              :null
+              }
+
+              <div className='column-1'>
+                <Hangman
+                  hangmanFrame={hangmanFrame}
+                  />
+              </div>
+              
+              <div className='column-2'>
+                <CurrentScore
+
+                  currentScore={currentScore}
+                  language={language}
+
+                />
+
+                <Word
+                  selectedWord={selectedWord}
+                  correctLetters={correctLetters}
+                />
+
+              </div>
+
+            </div>
+                {
+                  mobileUser ?
+                    <LetterInput
+                    />
+                  :null
+                }
+                {
+                  !displayApp ? <Loading /> : null
+                }
+
+                {endOfGame === 'Victory' ? <Victory currentScore={currentScore} setCurrentScore={setCurrentScore} language={language}/> : null}
+                {endOfGame === 'Defeat'  ? <Defeat language={language}/> : null}
+
+                <LettersRegistered
+                  lettersRegistered={lettersRegistered}
+                />
+                
+              <audio className="letterIntroduced-audio-container">
+                <source src={introducedLetterSound} type="audio/mp3" autoPlay="true"></source>
+              </audio>
+            </Route>
+        </Switch>
+      </>
+   </Router>
   );
 }
 

src/components/Admin/Header/AdminHeader.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const AdminHeader = () => {
+    return (
+        <header>
+            <h1>Admin Place</h1>
+        </header>
+    )
+}
+
+export default AdminHeader

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

@@ -0,0 +1,41 @@
+import React from 'react'
+
+const Form = () => {
+
+    const [option, setOption] = React.useState('login')
+
+    return (
+        <div className="form-container">
+            <nav className="options-container">
+                <div className={option === 'login' ? "active login" : 'login'} onClick={() => setOption('login')}>
+                    LOGIN
+                </div>
+                <div className={option === 'register' ? "active register" : 'register'} onClick={() => setOption('register')}>
+                    REGISTER
+                </div>
+            </nav>
+
+            {
+                option === 'login' ?
+
+                    <form>
+                        <input type="email" placeholder="Email"/>
+                        <input type="password" placeholder="Password"/>
+                        <input type="submit" value="Login" />
+                    </form>
+
+                : //saasasasasas
+
+                    <form>
+                        <input type="email" placeholder="Email"/>
+                        <input type="password" placeholder="Password"/>
+                        <input type="password" placeholder="Confirm Password" value=""/>
+                        <input type="password" placeholder="Admin Reffer Code"/>
+                        <input type="submit" value="Register"/>
+                    </form>
+            }
+        </div>
+    )
+}
+
+export default Form

src/components/Admin/Identify/Identify.jsx

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

src/components/AppHeader/AppHeader.jsx

@@ -1,6 +1,8 @@
 import React, {useState} from 'react'
+import {withRouter} from "react-router-dom"
 
-const Header = ({language, category, displayCategories, setDisplayCategories}) => {
+
+const AppHeader = ({language, category, displayCategories, setDisplayCategories, history}) => {
 
     const [title, setTitle] = useState('')
     const [categoryText, setCategoryText] = useState('')
@@ -43,8 +45,11 @@ const Header = ({language, category, displayCategories, setDisplayCategories}) =
             >
                 {categoryText}
             </h2>
+            <button className='identify-button' onClick={() => history.push('/identify')}>
+                Admin Place
+            </button>
         </header>
     )
 }
 
-export default Header
+export default withRouter(AppHeader)