layout; routing; login

.vscode/launch.json

@@ -4,11 +4,19 @@
     // Weitere Informationen finden Sie unter https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
+
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Chrome mit \"localhost:3000/dog\" starten",
+            "url": "http://localhost:3000/dog",
+            "webRoot": "${workspaceFolder}"
+        },
         {
             "type": "chrome",
             "request": "launch",
             "name": "Chrome mit \"localhost/dog\" starten",
-            "url": "http://localhost:3000/dog",
+            "url": "http://localhost/dog",
             "webRoot": "${workspaceFolder}"
         }
     ]

php/php-dog/AuthMiddleware.php

@@ -1,5 +1,6 @@
 <?php
 //require __DIR__ . '/classes/JwtHandler.php';
+require __DIR__ . '/classes/lib.php';
 
 //class Auth extends JwtHandler
 class Auth
@@ -53,26 +54,17 @@ class Auth
                 isset($data['data']->id) &&
                 $user = $this->fetchUser($data['data']->id)
             ) :
-                return [
+                $retVal = new CMsg(1, 200, "User found", null, $user);
-                    "success" => 1,
+                return $retVal->jsonarray();
-                    "message" => "User found",
-                    "user" => $user
-                ];
             else :
-                return [
+                $retVal = new CMsg(0, 422, $data['message'], null, null);
-                    "success" => 0,
+                return $retVal->jsonarray();
-                    "message" => $data['message'],
-                    "user" => null
-                ];
             endif;
         } 
         else 
         {
-            return [
+            $retVal = new CMsg(0, 422, "User not found in request", null, null);
-                "success" => 0,
+            return $retVal->jsonarray();
-                "message" => "User not found in request",
-                "user" => null
-            ];
         }
     }
 
@@ -86,10 +78,9 @@ class Auth
 
             if ($query_stmt->rowCount()) :
                 $returnVal = $query_stmt->fetch(PDO::FETCH_ASSOC);
-                $returnVal->session = $_SESSION;
                 return $returnVal;
             else :
-                return false;
+                return null;
             endif;
         } catch (PDOException $e) {
             return null;

php/php-dog/getUser.php

@@ -15,5 +15,5 @@ $db_connection = new Database();
 $conn = $db_connection->dbConnection();
 $auth = new Auth($conn, $allHeaders);
 
-echo json_encode($auth->isValid());
+echo $auth->isValid();
 ?>

src/App.css

@@ -4,3 +4,11 @@
 
 }
 
+.neben
+{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+

src/App.tsx

@@ -18,9 +18,10 @@ function App()
           <div className="col middle">
             <BrowserRouter basename='/dog'>
               <Routes>
+                  {user && <Route path="/" element={<Home/>} />}
+                  {!user && <Route path="/" element={<Login/>} />}
                   <Route path="/:qr_id" element={<Dog/>} />
-                  <Route path="/" element={<Home/>} />
+                  {user && <Route path="/d" element={<Dog/>} />}
-                  <Route path="/d" element={<Dog/>} />
                   <Route path="/login" element={<Login/>} />
                   <Route path="/reg" element={<Register/>} />
               </Routes>

src/components/Dog.css

@@ -5,10 +5,7 @@
     margin: 5px;
 }
 
-.neben
+button
 { 
-    display: flex;
+    max-width: 30%;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
 }

src/components/Home.tsx

@@ -1,9 +1,13 @@
-import React from 'react'
+import React, { useContext } from 'react'
+import { UserCtx, UserCtxT } from '../context/UserContext';
 
 export default function Home() {
+  const {loginUser, wait, getUser, user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
   return (
     <div>
       <h1>Home</h1>
+        <div>Logged in als:</div>
+        <div>{user?.email}</div>
       
     </div>
   )

src/components/Login.css

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

src/components/Login.tsx

@@ -1,8 +1,10 @@
 import {useState,useContext} from 'react';
 import { Link } from 'react-router-dom';
 import {UserCtx, UserCtxT} from '../context/UserContext';
+import './Login.css'
+
 const Login = () => {
-    const {loginUser, wait, getUser} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
+    const {loginUser, wait, getUser, user} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
     const [redirect, setRedirect] = useState("false");
     const [errMsg, setErrMsg] = useState("false");
     const [formData, setFormData] = useState({
@@ -31,27 +33,40 @@ const Login = () => {
         }
 
         const data = await loginUser(formData);
-        if(data.success){
+        if(data.success)
+        {
             setRedirect('Redirecting...');
+            setErrMsg(data.message);
             await getUser();
-            //e.currentTarget.reset();
+            e.currentTarget.reset();
             return;
         }
         setErrMsg(data.message);
     }
 
     return (
-        <div>
+        <div className='Login'>
             <h2>Login</h2>
-            <form onSubmit={submitForm}>
+            { user &&
+            <>
+            <div>Logged in als:</div>
+            <div>{user?.email}</div>
+            <div className="bottom-link"><Link to="/">Home</Link></div> 
+            </> }
+
+            {!user &&<form onSubmit={submitForm}>
+                <div>
                     <label htmlFor="email">Email:</label>
                     <input type="email" name="email" onChange={onChangeInput} placeholder="Your email" id="email" value={formData.email} required />
+                </div>
+                <div>
                     <label htmlFor="password">Password:</label>
                     <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
+                </div>
                 {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>
+            </form> }
         </div>
     )
 }

src/components/Register.css

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

src/components/Register.tsx

@@ -1,6 +1,7 @@
 import {useContext, useState} from 'react'
 import {Link} from 'react-router-dom'
 import {UserCtx, UserCtxT} from '../context/UserContext';
+import './Register.css';
 
 
 const Register = () => {
@@ -9,7 +10,8 @@ const Register = () => {
     const [successMsg, setSuccessMsg] = useState("false");
     const [formData, setFormData] = useState({
         email:'',
-        password:''
+        password:'',
+        password2:''
     });
 
     const onChangeInput = (e: React.FormEvent<HTMLInputElement> ) => {
@@ -29,6 +31,14 @@ const Register = () => {
             return;
         }
 
+        if(formData.password !== formData.password2)
+        {
+            setSuccessMsg("false");
+            setErrMsg('Bitte 2mal das gleiche Passwort eingeben!');
+            return;
+
+        }
+
         const data = await registerUser(formData);
         if(data.success){
             setSuccessMsg('Erfolgreich Registriert!');
@@ -42,13 +52,21 @@ const Register = () => {
     }
 
     return (
-        <div>
+        <div className='Register'>
-            <h2>Sign Up</h2>
+            <h2>Register</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 />
-                <label htmlFor="password">Password:</label>
+                </div>
+                <div className='neben'>
+                    <label htmlFor="password">Passwort: </label>
                     <input type="password" name="password" onChange={onChangeInput} placeholder="New password" id="password" value={formData.password} required />
+                </div> 
+                <div className='neben'>
+                    <label htmlFor="password2">Passwort wiederholen: </label>
+                    <input type="password" name="password2" onChange={onChangeInput} placeholder="New password" id="password2" value={formData.password2} required />
+                </div>
                 {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
                 {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
                 <button type="submit" disabled={wait}>Register</button>

src/components/logout.php

@@ -0,0 +1,11 @@
+<?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();
+session_destroy();
+session_abort();
+?>

src/context/UserContext.tsx

@@ -74,8 +74,8 @@ export type UserCtxT =
 export const UserCtx = createContext<UserCtxT | null>(null);
 
 export const Axios = axios.create({
- //   baseURL: 'http://localhost/dog/php-dog/',
+    baseURL: 'http://localhost/dog/php-dog/',
-    baseURL: 'https://hope-fly.de/dog/php-dog/',
+//    baseURL: 'https://hope-fly.de/dog/php-dog/',
 });
 
 export const UserCtxProvider = ({children}:TUserContextProviderProps) => {