added the config and setup the basic auth

3 files changed, 63 insertions, 18 deletions

diff --git a/src/App.js b/src/App.js
index 3784575..ffc907d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,19 @@
-import logo from './logo.svg';
-import './App.css';
+import React, { useState } from 'react';
+import Login from './components/Login';
+
+const App = () => {
+  const [isAuth, setIsAuth] = useState(false);
 
-function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      {isAuth ? <AdminPanel /> : <Login setAuth={setIsAuth} />}
     </div>
   );
-}
+};
+
+const AdminPanel = () => {
+  // Admin panel logic
+  return <div>Admin Panel</div>;
+};
 
 export default App;
diff --git a/src/components/Login.js b/src/components/Login.js
new file mode 100644
index 0000000..9a67051
--- /dev/null
+++ b/src/components/Login.js
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const Login = ({ setAuth }) => {
+  const [formData, setFormData] = useState({
+    username: '',
+    password: '',
+  });
+
+  const { username, password } = formData;
+
+  const onChange = (e) => setFormData({ ...formData, [e.target.name]: e.target.value });
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await axios.post('/api/auth/login', formData);
+      localStorage.setItem('token', res.data.token);
+      setAuth(true);
+    } catch (err) {
+      console.error(err.response.data);
+    }
+  };
+
+  return (
+    <form onSubmit={onSubmit}>
+      <input type="text" name="username" value={username} onChange={onChange} required />
+      <input type="password" name="password" value={password} onChange={onChange} required />
+      <button type="submit">Login</button>
+    </form>
+  );
+};
+
+export default Login;
diff --git a/src/firebase/firebaseConfig.js b/src/firebase/firebaseConfig.js
new file mode 100644
index 0000000..12f2a35
--- /dev/null
+++ b/src/firebase/firebaseConfig.js
@@ -0,0 +1,17 @@
+import firebase from 'firebase/app';
+import 'firebase/storage';
+
+const firebaseConfig = {
+  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
+  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.REACT_APP_FIREBASE_APP_ID,
+};
+
+firebase.initializeApp(firebaseConfig);
+
+const storage = firebase.storage();
+
+export { storage, firebase as default };