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/docs/dog.sql
+++ b/docs/dog.sql
@ -1,11 +1,11 @@
 -- phpMyAdmin SQL Dump
-- version 5.1.3
+-- version 5.2.0
 -- https://www.phpmyadmin.net/
 --
-- Host: 10.35.232.188:3306
-- Erstellungszeit: 16. Dez 2022 um 10:38
-- Server-Version: 8.0.31
-- PHP-Version: 7.4.32
+-- Host: localhost
+-- Erstellungszeit: 17. Dez 2022 um 00:33
+-- Server-Version: 10.4.27-MariaDB
+-- PHP-Version: 8.1.12

 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
 START TRANSACTION;
@ -29,14 +29,14 @@ SET time_zone = "+00:00";

 CREATE TABLE `dogs` (
  `id` int(11) NOT NULL,
-  `email` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NOT NULL,
-  `qr_id` char(31) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NOT NULL,
-  `name` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NOT NULL,
-  `password` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NOT NULL,
-  `phone` varchar(255) CHARACTER SET utf8mb3 COLLATE utf8mb3_unicode_ci NOT NULL,
-  `qr_code` varchar(255) COLLATE utf8mb3_unicode_ci DEFAULT NULL,
-  `picture` varchar(255) COLLATE utf8mb3_unicode_ci DEFAULT NULL
-) ENGINE=InnoDB DEFAULT CHARSET=utf8mb3 COLLATE=utf8mb3_unicode_ci;
+  `email` varchar(255) NOT NULL,
+  `qr_id` char(31) NOT NULL,
+  `name` varchar(255) NOT NULL DEFAULT '',
+  `password` varchar(255) NOT NULL,
+  `phone` varchar(255) NOT NULL DEFAULT '',
+  `qr_code` varchar(255) DEFAULT NULL,
+  `picture` varchar(255) DEFAULT NULL
+) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

 --
 -- Indizes der exportierten Tabellen
--- a/package-lock.json
+++ b/package-lock.json
@ -15,6 +15,7 @@
        "@types/node": "^16.18.9",
        "@types/react": "^18.0.26",
        "@types/react-dom": "^18.0.9",
+        "axios": "^1.2.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-router-dom": "^6.4.5",
@ -4748,6 +4749,29 @@
        "node": ">=4"
      }
    },
+    "node_modules/axios": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.1.tgz",
+      "integrity": "sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/axobject-query": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@ -13645,6 +13669,11 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
    "node_modules/psl": {
      "version": "1.9.0",
      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
--- a/package.json
+++ b/package.json
@ -10,6 +10,7 @@
    "@types/node": "^16.18.9",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.9",
+    "axios": "^1.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.5",
--- a/php/php-dog/AuthMiddleware.php
+++ b/php/php-dog/AuthMiddleware.php
@ -79,7 +79,7 @@ class Auth
    protected function fetchUser($user_id)
    {
        try {
-            $fetch_user_by_id = "SELECT id, email, name, qr_id FROM dogs WHERE id=:id";
+            $fetch_user_by_id = "SELECT id, email, qr_id FROM dogs WHERE id=:id";
            $query_stmt = $this->db->prepare($fetch_user_by_id);
            $query_stmt->bindValue(':id', $user_id, PDO::PARAM_INT);
            $query_stmt->execute();
--- a/php/php-dog/classes/Database.php
+++ b/php/php-dog/classes/Database.php
@ -9,7 +9,8 @@ class Database
    private $db_username = 'k200835_user_dog';
    private $db_password = 'X0pEiBsXN3RLazGhQVvP';
    
-    public function dbConnection(){
+    public function dbConnection()
+    {
        
        try
        {
--- a/php/php-dog/classes/lib.php
+++ b/php/php-dog/classes/lib.php
@ -1,12 +1,12 @@
 <?php

-class CMsg
+class  CMsg
 {
-    $success;
-    $status;
-    $message;
-    $fields;
-    $data;
+    var $success;
+    var $status;
+    var $message;
+    var $fields;
+    var $data;

    function __construct($success,$status = null,$message = null,$fields = null,$data = null)
    {
@ -36,17 +36,15 @@ class CMsg

 class CUser
 {
-    $id;
-    $qr_id;
-    $email;
-    $name;
+    var $id;
+    var $qr_id;
+    var $email;

-    function __construct($id,$qr_id,$email,$name)
+    function __construct($id,$qr_id,$email)
    {
        $this->id = $id;
        $this->qr_id = $qr_id;
        $this->email = $email;
-        $this->name = $name;
    }
 }

--- a/php/php-dog/getDog.php
+++ b/php/php-dog/getDog.php
@ -51,12 +51,12 @@ else
        if($query_stmt->rowCount())
        {
            $row = $query_stmt->fetch(PDO::FETCH_ASSOC);
-            $returnData = new CMsg((1,200,'get dog',$fields,$row);
+            $returnData = new CMsg(1,200,'get dog',$fields,$row);
        }
    }
    catch(PDOException $e)
    {
-        $returnData = new CMsg((0,500,$e->getMessage(),$fields);
+        $returnData = new CMsg(0,500,$e->getMessage(),$fields);
    }
 }
 echo $returnData->jsonarray();
--- a/php/php-dog/login.php
+++ b/php/php-dog/login.php
@ -14,90 +14,107 @@ $db_connection = new Database();
 $conn = $db_connection->dbConnection();

 $data = json_decode(file_get_contents("php://input"));
+// $data = json_decode(
+//     '{
+//         "email": "a@a.a",
+//         "password": "qwertzui"
+//     }'
+// );
 $returnData = new CMsg(0);

 // IF REQUEST METHOD IS NOT EQUAL TO POST
-if($_SERVER["REQUEST_METHOD"] != "POST")
-{
-    $returnData = new CMsg(0,404,'Page Not Found!');
-}
+// if($_SERVER["REQUEST_METHOD"] != "POST")
+// {
+//     $returnData = new CMsg(0,404,'Page Not Found!');
+//     echo $returnData->jsonarray();
+//     return;
+// }
+
 // CHECKING EMPTY FIELDS
-elseif(
-    !isset($data->qr_id) 
+if(
+    !isset($data->email) 
    || !isset($data->password)
-    || empty(trim($data->qr_id))
+    || empty(trim($data->email))
    || empty(trim($data->password))
    )
 {
-    $fields = ['fields' => ['qr_id','password']];
+    $fields = ['fields' => ['email','password']];
    $returnData = new CMsg(0,422,'Please Fill in all Required Fields!',$fields);
+    echo $returnData->jsonarray();
+    return;
 }
+
 // IF THERE ARE NO EMPTY FIELDS THEN-
-else
+$email = trim($data->email);
+$password = trim($data->password);
+
+if (!filter_var($email, FILTER_VALIDATE_EMAIL))
 {
-    $qr_id = trim($data->qr_id);
-    $password = trim($data->password);
+    $returnData = new CMsg(0, 422, 'Invalid Email Address!');
+    echo $returnData->jsonarray();
+    return;
+}


-    // IF PASSWORD IS LESS THAN 8 THE SHOW THE ERROR
-    if(strlen($password) < 8)
+// IF PASSWORD IS LESS THAN 8 THE SHOW THE ERROR
+if(strlen($password) < 8)
+{
+    $returnData = new CMsg(0,422,'Your password must be at least 8 characters long!');
+    echo $returnData->jsonarray();
+    return;
+}
+
+// THE USER IS ABLE TO PERFORM THE LOGIN ACTION
+
+try
+{
+    $fetch_user_by_email = "SELECT id, qr_id, email, password FROM `dogs` WHERE `email`=:email";
+    $query_stmt = $conn->prepare($fetch_user_by_email);
+    $query_stmt->bindValue(':email', $email,PDO::PARAM_STR);
+    $query_stmt->execute();
+
+    // IF THE USER IS FOUNDED BY EMAIL
+    if($query_stmt->rowCount())
    {
-        $returnData = new CMsg(0,422,'Your password must be at least 8 characters long!');
+        $row = $query_stmt->fetch(PDO::FETCH_ASSOC);
+        $check_password = password_verify($password, $row['password']);
+//        $check_password = $password == $row['password'];
+
+        // VERIFYING THE PASSWORD (IS CORRECT OR NOT?)
+        // IF PASSWORD IS CORRECT THEN SEND THE LOGIN TOKEN
+        if ($check_password)
+        {
+            //                    $jwt = new JwtHandler();
+            $user = new CUser(  $row['id'], 
+                                $row['qr_id'],    
+                                $row['email']
+            );
+            $_SESSION['user'] = $user;
+            
+            $returnData = new CMsg( 
+                1, 
+                200, 
+                'You have successfully logged in.', 
+                $fields, 
+                $user);
+        }
+        // IF INVALID PASSWORD
+        else
+        {
+            $returnData = new CMsg(0,422,'Invalid Password!');
+        }
+
+    // IF THE USER IS NOT FOUNDED BY EMAIL THEN SHOW THE FOLLOWING ERROR
    }
-    // THE USER IS ABLE TO PERFORM THE LOGIN ACTION
    else
    {
-        try{
-            
-            $fetch_user_by_qrid = "SELECT id, name, qr_id, email FROM `dogs` WHERE `qr_id`=:qr_id";
-            $query_stmt = $conn->prepare($fetch_user_by_qrid);
-            $query_stmt->bindValue(':qr_id', $qr_id,PDO::PARAM_STR);
-            $query_stmt->execute();
-
-            // IF THE USER IS FOUNDED BY EMAIL
-            if($query_stmt->rowCount())
-            {
-                $row = $query_stmt->fetch(PDO::FETCH_ASSOC);
-                $check_password = password_verify($password, $row['password']);
-
-                // VERIFYING THE PASSWORD (IS CORRECT OR NOT?)
-                // IF PASSWORD IS CORRECT THEN SEND THE LOGIN TOKEN
-                if ($check_password)
-                {
-                    //                    $jwt = new JwtHandler();
-                    $user = new CUser(  $row['id'], 
-                                        $row['qr_id'],    
-                                        $row['email'],
-                                        $row['name']
-                    );
-                    $_SESSION['user'] = $user;
-                    
-                    $returnData = new CMsg( 
-                        1, 
-                        200, 
-                        'You have successfully logged in.', 
-                        $fields, 
-                        $user);
-                }
-                // IF INVALID PASSWORD
-                else
-                {
-                    $returnData = new CMsg(0,422,'Invalid Password!');
-                }
-
-            // IF THE USER IS NOT FOUNDED BY EMAIL THEN SHOW THE FOLLOWING ERROR
-            }
-            else
-            {
-                $returnData = new CMsg(0,422,'Invalid Email Address!');
-            }
-        }
-        catch(PDOException $e)
-        {
-            $returnData = new CMsg(0,500,$e->getMessage());
-        }
+        $returnData = new CMsg(0,422,'Invalid Email Address!');
    }
 }
+catch(PDOException $e)
+{
+    $returnData = new CMsg(0,500,$e->getMessage());
+}

 echo $returnData->jsonarray();
 ?>
--- a/php/php-dog/register.php
+++ b/php/php-dog/register.php
@ -19,69 +19,90 @@ $returnData = new CMsg(0);
 if ($_SERVER["REQUEST_METHOD"] != "POST") 
 {
    $returnData = new CMsg(0, 404, 'Page Not Found!');
+    echo $returnData->jsonarray();
+    return;
 }
-elseif (
-    !isset($data->qr_id)
-    || !isset($data->nachname)
-    || !isset($data->email)
+
+if (
+    !isset($data->email)
    || !isset($data->password)
-    || empty(trim($data->vorname))
-    || empty(trim($data->nachname))
    || empty(trim($data->email))
    || empty(trim($data->password))
-) :
+) 
+{

-    $fields = ['fields' => ['vorname', 'nachname', 'email', 'password']];
+    $fields = ['fields' => ['email', 'password']];
    $returnData = new CMsg(0, 422, 'Please Fill in all Required Fields!', $fields);
+    echo $returnData->jsonarray();
+    return;
+}

 // IF THERE ARE NO EMPTY FIELDS THEN-
-else :
+$email = trim($data->email);
+$password = trim($data->password);

-    $vorname = trim($data->vorname);
-    $nachname = trim($data->nachname);
-    $email = trim($data->email);
-    $password = trim($data->password);
-    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) :
-        $returnData = msg(0, 422, 'Invalid Email Address!');
+if (!filter_var($email, FILTER_VALIDATE_EMAIL))
+{
+    $returnData = new CMsg(0, 422, 'Invalid Email Address!');
+    echo $returnData->jsonarray();
+    return;
+}

-    elseif (strlen($password) < 8) :
-        $returnData = new CMsg(0, 422, 'Your password must be at least 8 characters long!');
+if (strlen($password) < 8)
+{
+    $returnData = new CMsg(0, 422, 'Your password must be at least 8 characters long!');
+    echo $returnData->jsonarray();
+    return;
+} 

-    elseif (strlen($nachname) < 3) :
-        $returnData = new CMsg(0, 422, 'Your name must be at least 3 characters long!');
+try 
+{
+    $maxtries = 100000; // prevent endless loop, most unlikely 
+    $tries = 0;

-    else :
-        try {
+    $qr_id = random_str(6);
+    $count = 1;
+    while($count >= 1 && $tries < $maxtries)
+    {
+        $qr_id = random_str(6);

-            $check_email = "SELECT `email` FROM `users` WHERE `email`=:email";
-            $check_email_stmt = $conn->prepare($check_email);
-            $check_email_stmt->bindValue(':email', $email, PDO::PARAM_STR);
-            $check_email_stmt->execute();
+        $check_qr_id = "SELECT `qr_id` FROM `dogs` WHERE `qr_id`=:qr_id";
+        $check_qr_id_stmt = $conn->prepare($check_qr_id);
+        $check_qr_id_stmt->bindValue(':qr_id', $qr_id, PDO::PARAM_STR);
+        $check_qr_id_stmt->execute();

-            if ($check_email_stmt->rowCount()) :
-                $returnData = new CMsg(0, 422, 'This E-mail already in use!');
+        $count = $check_qr_id_stmt->rowCount();
+        ++$tries;
+    }
+    if ($tries >= $maxtries) 
+    {
+        $result = new CMsg(
+            0, 
+            507, 
+            'Too many users registered on the server, try it again later'); 
+    }
+    else
+    {
+        $insert_query = "INSERT INTO `dogs`(`qr_id`,`email`,`password`) VALUES(:qr_id,:email,:password)";

-            else :
-                $insert_query = "INSERT INTO `users`(`vorname`,`nachname`,`email`,`password`) VALUES(:vorname,:nachname,:email,:password)";
+        $insert_stmt = $conn->prepare($insert_query);

-                $insert_stmt = $conn->prepare($insert_query);
+        // DATA BINDING
+        $insert_stmt->bindValue(':qr_id', htmlspecialchars(strip_tags($qr_id)), PDO::PARAM_STR);
+        $insert_stmt->bindValue(':email', $email, PDO::PARAM_STR);
+//        $insert_stmt->bindValue(':password', $password, PDO::PARAM_STR);
+        $insert_stmt->bindValue(':password', password_hash($password, PASSWORD_DEFAULT), PDO::PARAM_STR);

-                // DATA BINDING
-                $insert_stmt->bindValue(':vorname', htmlspecialchars(strip_tags($vorname)), PDO::PARAM_STR);
-                $insert_stmt->bindValue(':nachname', htmlspecialchars(strip_tags($nachname)), PDO::PARAM_STR);
-                $insert_stmt->bindValue(':email', $email, PDO::PARAM_STR);
-                $insert_stmt->bindValue(':password', password_hash($password, PASSWORD_DEFAULT), PDO::PARAM_STR);
+        $insert_stmt->execute();

-                $insert_stmt->execute();
+        $returnData = new CMsg(1, 201, 'You have successfully registered.');
+    }

-                $returnData = new CMsg(1, 201, 'You have successfully registered.');
-
-            endif;
-        } catch (PDOException $e) {
-            $returnData = new CMsg(0, 500, $e->getMessage());
-        }
-    endif;
-endif;
+} 
+catch (PDOException $e) 
+{
+    $returnData = new CMsg(0, 500, $e->getMessage());
+}

 echo $returnData->jsonarray();
 ?>
--- a/php/php-dog/upload.php
+++ b/php/php-dog/upload.php
@ -41,7 +41,7 @@ if(!in_array($fileType, $allowTypes))
 }

 $newFilename = getNewFilename($targetDir, $fileType, 20);
-if($newFilename.strlen() == 0)
+if(strlen($newFilename) == 0)
 {
    $result = new CMsg(
        0, 
--- a/public/index.html
+++ b/public/index.html
@ -9,7 +9,6 @@
      name="description"
      content="Web site created using create-react-app"
    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--- a/public/manifest.json
+++ b/public/manifest.json
@ -6,19 +6,9 @@
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
    }
  ],
-  "start_url": ".",
+  "start_url": "./dog",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
--- 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>
 );
+