läuft schon

2022-12-17 01:18:54 +01:00
parent 147fd66fff
commit 6c48baac3d
17 changed files with 506 additions and 182 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,4 +1,5 @@
 import React from 'react';
+import {useContext} from 'react'
 import './App.css';
 import { BrowserRouter, Routes, Route, Navigate} from 'react-router-dom';
 import "./App.css";
@ -6,20 +7,12 @@ import Login from './components/Login';
 import Register from './components/Register';
 import Home from './components/Home';
 import Dog from './components/Dog';
+import {UserCtx, UserCtxT} from './context/UserContext';

-type UserT =
-{
-  email: string;
-  password: string;
-}

 function App() 
 {
-  const user : UserT =
-  {
-    email: 'user@user.de',
-    password: 'GrüneWiese'
-  };
+  const {user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;

  return (
    <div className="App">
@ -34,7 +27,9 @@ function App()
                  <Route path="/reg" element={<Register/>} />
                  </>
                )}
-                <Route path="*" element={<Navigate to={user ? '/':'/login'} />} />
+                {/* <Route path="*" element={<Navigate to={user ? '/':'/login'} />} /> */}
+                <Route path="/login" element={<Login/>} />
+                <Route path="/reg" element={<Register/>} />
              </Routes>
            </BrowserRouter>
          </div>
--- a/src/components/Login.tsx
+++ b/src/components/Login.tsx
@ -1,10 +1,58 @@
-import React from 'react'
+import {useState,useContext} from 'react';
+import { Link } from 'react-router-dom';
+import {UserCtx, UserCtxT} from '../context/UserContext';
+const Login = () => {
+    const {loginUser, wait, getUser} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const [redirect, setRedirect] = useState("false");
+    const [errMsg, setErrMsg] = useState("false");
+    const [formData, setFormData] = useState({
+        email:'',
+        password:''
+    });

-export default function Login() 
-{
-  return (
-    <div>
-      <h1>Login</h1>
-    </div>
-  )
+    const onChangeInput = (e: React.FormEvent<HTMLInputElement>) => 
+    {
+        if(e.currentTarget.type === 'email' || e.currentTarget.type === 'password')
+        {
+            setFormData({
+                ...formData,
+                [e.currentTarget.name]:e.currentTarget.value
+            });
+        }
+    }
+
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        if(!Object.values(formData).every(val => val.trim() !== ''))
+        {
+            setErrMsg('Please Fill in all Required Fields!');
+            return;
+        }
+
+        const data = await loginUser(formData);
+        if(data.success){
+            setRedirect('Redirecting...');
+            await getUser();
+            //e.currentTarget.reset();
+            return;
+        }
+        setErrMsg(data.message);
+    }
+
+    return (
+        <div>
+            <h2>Login</h2>
+            <form onSubmit={submitForm}>
+                <label htmlFor="email">Email:</label>
+                <input type="email" name="email" onChange={onChangeInput} placeholder="Your email" id="email" value={formData.email} required />
+                <label htmlFor="password">Password:</label>
+                <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
+                {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
+                {redirect  !== "false" ? redirect : <button type="submit" disabled={wait}>Login</button>}
+                <div className="bottom-link"><Link to="/reg">Register</Link></div>
+            </form>
+        </div>
+    )
 }
+export default Login;
--- a/src/components/Register.tsx
+++ b/src/components/Register.tsx
@ -1,9 +1,60 @@
-import React from 'react'
+import {useContext, useState} from 'react'
+import {Link} from 'react-router-dom'
+import {UserCtx, UserCtxT} from '../context/UserContext';

-export default function Register() {
-  return (
-    <div>
-      <h1>Register</h1>
-    </div>
-  )
+
+const Register = () => {
+    const {registerUser, wait} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const [errMsg, setErrMsg] = useState("false");
+    const [successMsg, setSuccessMsg] = useState("false");
+    const [formData, setFormData] = useState({
+        email:'',
+        password:''
+    });
+
+    const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
+        setFormData({
+            ...formData,
+            [e.currentTarget.name]:e.currentTarget.value
+        })
+    }
+
+    const submitForm = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+
+        if(!Object.values(formData).every(val => val.trim() !== '')){
+            setSuccessMsg("false");
+            setErrMsg('Bitte alle Felder ausfüllen!');
+            return;
+        }
+
+        const data = await registerUser(formData);
+        if(data.success){
+            setSuccessMsg('Erfolgreich Registriert!');
+            setErrMsg("false");
+            e.currentTarget.reset();
+        }
+        else if(!data.success && data.message){
+            setSuccessMsg("false");
+            setErrMsg(data.message);
+        }
+        
+    }
+
+    return (
+        <div>
+            <h2>Sign Up</h2>
+            <form onSubmit={submitForm}>
+                <label htmlFor="email">Email:</label>
+                <input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData.email} required />
+                <label htmlFor="password">Password:</label>
+                <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
+                {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
+                {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
+                <button type="submit" disabled={wait}>Register</button>
+                <div className="bottom-link"><Link to="/login">Login</Link></div>
+            </form>
+        </div>
+    )
 }
+export default Register;
--- a/src/context/UserContext.tsx
+++ b/src/context/UserContext.tsx
@ -0,0 +1,170 @@
+import React from 'react'
+import {createContext, useState, useEffect} from 'react'
+import axios from 'axios'
+
+export type TUserContextProviderProps =
+{
+    children: React.ReactNode
+}
+
+export type TUser =
+{
+    id: number,
+    qr_id: string,
+    email: string,
+    name: string
+}
+
+export type UserCtxT =
+{
+    user: TUser | null,
+    
+    registerUser: ({ email, password }: {
+        email: string;
+        password: string;
+    }) => Promise<any>,
+    
+    loginUser: (
+        { email, password } : 
+        {
+        email: string;
+        password: string;
+        },
+                ) => Promise<{
+        success: number;
+        message?: undefined;
+    } | {
+        success: number;
+        message: any;
+    }>,
+
+    wait: boolean,
+
+    getUser: () => Promise<void>,
+
+    logout: () => void
+}
+
+export const UserCtx = createContext<UserCtxT | null>(null);
+
+export const Axios = axios.create({
+    baseURL: 'http://localhost/dog/php-dog/',
+});
+
+export const UserCtxProvider = ({children}:TUserContextProviderProps) => {
+
+    const [user, setUser] = useState<TUser | null>(null);
+    const [wait, setWait] = useState(false);
+
+    const registerUser = async ({email,password}:
+        {email: string, password: string}) => {
+        setWait(true);
+        try{
+            const {data} = await Axios.post('register.php',{
+                email,
+                password 
+            });
+            setWait(false);
+            return data;
+        }
+        catch(err){
+            setWait(false);
+            return {success:0, message:'Server Error!'};
+        }
+    }
+
+    const loginUser = async ({email,password}:{email: string, password: string}) => 
+    {
+        setWait(true);
+        try
+        {
+            var postReturn:
+            {   
+                data:
+                {
+                    success: number;
+                    message: string;
+                    user: TUser | null;
+                } 
+            } 
+            = { data : {success: 0, message: '', user: null } };
+
+
+
+
+            postReturn = await Axios.post('login.php',{
+                    email,
+                    password 
+                });
+
+            const {data} = postReturn;
+            if(data.success && data.user)
+            {
+                setUser(data.user);
+                setWait(false);
+                return {success:1};
+            }
+            setWait(false);
+            return {success:0, message:data.message};
+        }
+        catch(err){
+            setWait(false);
+            return {success:0, message:'Server Error!'};
+        }
+
+    }
+
+    const getUser = async () => 
+    {
+        if(user)
+        {
+            const {data} = await Axios.get('getUser.php');
+            if(data.success && data.user)
+            {
+                setUser(data.user);
+                return;
+            }
+            setUser(null);
+        }
+        else
+        {
+            const {data} = await Axios.get('session.php');
+            if(data.success && data.user)
+            {
+                setUser(data.user);
+                return;
+            }
+        }
+    }
+
+    useEffect(() => 
+    {
+        async function asyncCall()
+        {
+            await getUser();
+        }
+        asyncCall();
+    },[]);
+
+    const logout = async () => 
+    {
+        await Axios.get('logout.php');
+        setUser(null);
+    }
+
+    return (
+        <UserCtx.Provider value={
+            {
+                registerUser,
+                loginUser,
+                wait, 
+                user, 
+                getUser,
+                logout
+            }}
+        >
+            {children}
+        </UserCtx.Provider>
+    );
+
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -2,12 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { UserCtxProvider } from './context/UserContext';

 const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
 );
 root.render(
  <React.StrictMode>
-    <App />
+    <UserCtxProvider>
+      <App />
+    </UserCtxProvider>
  </React.StrictMode>
 );
+