profil

php/php-dog/updateDog.php

@@ -0,0 +1,103 @@
+<?php
+header("Access-Control-Allow-Origin: *");
+header("Access-Control-Allow-Headers: access");
+header("Access-Control-Allow-Methods: POST");
+header("Content-Type: application/json; charset=UTF-8");
+header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
+
+session_start();
+
+require __DIR__ . '/classes/Database.php';
+require __DIR__ . '/classes/lib.php';
+$db_connection = new Database();
+$conn = $db_connection->dbConnection();
+
+// DATA FORM REQUEST
+$data = json_decode(file_get_contents("php://input"));
+$returnData = new CMsg(0);
+
+if ($_SERVER["REQUEST_METHOD"] != "POST") 
+{
+    $returnData = new CMsg(0, 404, 'Page Not Found! REQUEST_METHOD');
+    echo $returnData->jsonarray();
+    return;
+}
+
+if (!isset($_SESSION["user"])) 
+{
+    $result = new CMsg(0, 401, "not logged in");
+    echo $result->jsonarray();
+    return;
+}
+
+$user = $_SESSION["user"];
+
+if (
+    !isset($data->email)
+    || !isset($data->name)
+    || !isset($data->phone)
+    || empty(trim($data->email))
+    || empty(trim($data->name))
+    || empty(trim($data->phone))
+) 
+{
+
+    $fields = ['fields' => ['email', 'name', 'phone']];
+    $returnData = new CMsg(0, 422, 'Please Fill in all Required Fields!', $fields);
+    echo $returnData->jsonarray();
+    return;
+}
+
+// IF THERE ARE NO EMPTY FIELDS THEN-
+$email = trim($data->email);
+$name = trim($data->name);
+$phone = trim($data->phone);
+
+if (!filter_var($email, FILTER_VALIDATE_EMAIL))
+{
+    $returnData = new CMsg(0, 422, 'Invalid Email Address!');
+    echo $returnData->jsonarray();
+    return;
+}
+
+try 
+{
+    $update_query =    
+"
+UPDATE
+    `dogs`
+SET
+    `email` = :email,
+    `name` = :name,
+    `phone` = :phone
+WHERE
+    `qr_id` = :qr_id";
+
+    $statement = $conn->prepare($update_query);
+    $update = $statement->execute(
+        array(
+            'email' => $email, 
+            'name' => $name, 
+            'phone' => $phone, 
+            'qr_id' => $user["qr_id"]
+        ));
+
+    $count = $statement->rowCount();
+        
+    if ($update && $count > 0) 
+    {
+        $returnData = new CMsg(1, 201, 'Updated');
+    }
+    else
+    {
+        $returnData = new CMsg(0, 304, 'No Update done!');
+    }
+
+} 
+catch (PDOException $e) 
+{
+    $returnData = new CMsg(0, 500, $e->getMessage());
+}
+
+echo $returnData->jsonarray();
+?>

src/App.tsx

@@ -13,6 +13,7 @@ import Footer from './components/Footer';
 import Impressum from './components/Impressum';
 import "bootstrap/dist/css/bootstrap.min.css";
 import FileUpload from './components/FileUpload';
+import Profil from './components/Profil';
 
 
 const App: React.FC = () => 
@@ -34,6 +35,7 @@ const App: React.FC = () =>
                   <Route path="/reg" element={<Register/>} />
                   <Route path="/impressum" element={<Impressum/>} />
                   {user && <Route path="/upload" element={<FileUpload/>} />}
+                  {user && <Route path="/profil" element={<Profil/>} />}
               </Routes>
               <Footer/>
             </BrowserRouter>

src/components/Profil.css

@@ -0,0 +1,8 @@
+.Profil
+form
+{
+    width: 65%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+}

src/components/Profil.tsx

@@ -0,0 +1,92 @@
+import React, { useContext, useState } from 'react'
+import { Axios, ResponseT, UserCtx, UserCtxT } from '../context/UserContext';
+import './Profil.css';
+
+function Profil() 
+{
+    const { user, updateDog, wait } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
+    const [errMsg, setErrMsg] = useState("false");
+    const [successMsg, setSuccessMsg] = useState("false");
+    const [formData, setFormData] = useState({
+        email:'',
+        name:'',
+        phone:''
+    });
+
+    if(user && (dog === undefined || dog.success === undefined))
+    {
+        Axios.post<ResponseT>('getDog.php', 
+        {
+            qr_id: user.qr_id
+        })
+        .then((resDog) =>
+        {
+            setDog(resDog.data);
+            setFormData(
+                { 
+                    email: resDog.data.data.email, 
+                    name: resDog.data.data.name,
+                    phone: resDog.data.data.phone
+                });   
+        })
+        .catch((err) => console.error(err));
+    }
+
+    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 updateDog(formData);
+        if(data.success)
+        {
+            setSuccessMsg('Daten geändert!');
+            setErrMsg("false");
+            e.currentTarget.reset();
+        }
+        else if(!data.success && data.message)
+        {
+            setSuccessMsg("false");
+            setErrMsg(data.message);
+        }
+    }
+
+    return (
+        <div className='Profil'>
+            <h2>Profil</h2>
+            <form onSubmit={submitForm}>
+                <div className='neben'>
+                    <label htmlFor="email">Email: </label>                    
+                    <input type="email" name="email" onChange={onChangeInput} placeholder="Deine email" id="email" value={formData.email} required />
+                </div>
+                <div className='neben'>
+                    <label htmlFor="name">Name: </label>
+                    <input type="text" name="name" onChange={onChangeInput} id="name" value={formData.name} required />
+                </div> 
+                <div className='neben'>
+                    <label htmlFor="phone">Telefon: </label>
+                    <input type="text" name="phone" onChange={onChangeInput} id="password2" value={formData.phone} required />
+                </div>
+                {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
+                {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
+                <button type="submit" disabled={wait}>Update</button>
+            </form>
+        </div>
+  )
+}
+
+export default Profil

src/context/UserContext.tsx

@@ -48,6 +48,12 @@ export type UserCtxT =
         password: string;
     }) => Promise<any>,
     
+    updateDog: ({ email, name, phone }: {
+        email: string;
+        name: string;
+        phone: string;
+    }) => Promise<any>,
+    
     loginUser: (
         { email, password } : 
         {
@@ -104,6 +110,24 @@ export const UserCtxProvider = ({children}:TUserContextProviderProps) => {
         }
     }
 
+    const updateDog = async ({email, name, phone}:
+        {email: string, name: string, phone: string}) => {
+        setWait(true);
+        try{
+            const {data} = await Axios.post('updateDog.php',{
+                email,
+                name,
+                phone 
+            });
+            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);
@@ -212,6 +236,7 @@ export const UserCtxProvider = ({children}:TUserContextProviderProps) => {
         <UserCtx.Provider value={
             {
                 registerUser,
+                updateDog,
                 loginUser,
                 wait, 
                 user,