From c894022b31eb690537a479416c937ea496b3759f Mon Sep 17 00:00:00 2001 From: Peter Hoppe Date: Thu, 22 Dec 2022 00:29:06 +0100 Subject: [PATCH] layout; routing; login --- .vscode/launch.json | 10 +++++++++- php/php-dog/AuthMiddleware.php | 25 ++++++++---------------- php/php-dog/getUser.php | 2 +- src/App.css | 8 ++++++++ src/App.tsx | 5 +++-- src/components/Dog.css | 9 +++------ src/components/Home.tsx | 6 +++++- src/components/Login.css | 8 ++++++++ src/components/Login.tsx | 35 ++++++++++++++++++++++++---------- src/components/Register.css | 8 ++++++++ src/components/Register.tsx | 32 ++++++++++++++++++++++++------- src/components/logout.php | 11 +++++++++++ src/context/UserContext.tsx | 4 ++-- 13 files changed, 116 insertions(+), 47 deletions(-) create mode 100644 src/components/Login.css create mode 100644 src/components/Register.css create mode 100644 src/components/logout.php diff --git a/.vscode/launch.json b/.vscode/launch.json index 3519a95..c24d1da 100644 --- a/.vscode/launch.json +++ b/.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}" } ] diff --git a/php/php-dog/AuthMiddleware.php b/php/php-dog/AuthMiddleware.php index 6fd807f..0a3c4bb 100644 --- a/php/php-dog/AuthMiddleware.php +++ b/php/php-dog/AuthMiddleware.php @@ -1,5 +1,6 @@ id) && $user = $this->fetchUser($data['data']->id) ) : - return [ - "success" => 1, - "message" => "User found", - "user" => $user - ]; + $retVal = new CMsg(1, 200, "User found", null, $user); + return $retVal->jsonarray(); else : - return [ - "success" => 0, - "message" => $data['message'], - "user" => null - ]; + $retVal = new CMsg(0, 422, $data['message'], null, null); + return $retVal->jsonarray(); endif; } else { - return [ - "success" => 0, - "message" => "User not found in request", - "user" => null - ]; + $retVal = new CMsg(0, 422, "User not found in request", null, null); + return $retVal->jsonarray(); } } @@ -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; diff --git a/php/php-dog/getUser.php b/php/php-dog/getUser.php index 2b9bc2e..856e5c6 100644 --- a/php/php-dog/getUser.php +++ b/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(); ?> \ No newline at end of file diff --git a/src/App.css b/src/App.css index f327146..99aecc8 100644 --- a/src/App.css +++ b/src/App.css @@ -4,3 +4,11 @@ } +.neben +{ + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; +} + diff --git a/src/App.tsx b/src/App.tsx index 6b51e7b..6987dbc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,9 +18,10 @@ function App()
+ {user && } />} + {!user && } />} } /> - } /> - } /> + {user && } />} } /> } /> diff --git a/src/components/Dog.css b/src/components/Dog.css index 1ad8c37..cb1c1d1 100644 --- a/src/components/Dog.css +++ b/src/components/Dog.css @@ -5,10 +5,7 @@ margin: 5px; } -.neben -{ - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; +button +{ + max-width: 30%; } \ No newline at end of file diff --git a/src/components/Home.tsx b/src/components/Home.tsx index a7d6df8..b6332e7 100644 --- a/src/components/Home.tsx +++ b/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(UserCtx) as UserCtxT; return (

Home

+
Logged in als:
+
{user?.email}
) diff --git a/src/components/Login.css b/src/components/Login.css new file mode 100644 index 0000000..c7ce66b --- /dev/null +++ b/src/components/Login.css @@ -0,0 +1,8 @@ +.Login +form +{ + width: 65%; + display: flex; + flex-direction: column; + align-items: flex-end; +} diff --git a/src/components/Login.tsx b/src/components/Login.tsx index e91870c..53d2ceb 100644 --- a/src/components/Login.tsx +++ b/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(UserCtx) as UserCtxT; + const {loginUser, wait, getUser, user} = useContext(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 ( -
+

Login

-
- - - - + { user && + <> +
Logged in als:
+
{user?.email}
+
Home
+ } + + {!user && +
+ + +
+
+ + +
{errMsg !== "false" &&
{errMsg}
} {redirect !== "false" ? redirect : }
Register
-
+ }
) } diff --git a/src/components/Register.css b/src/components/Register.css new file mode 100644 index 0000000..c3f62e5 --- /dev/null +++ b/src/components/Register.css @@ -0,0 +1,8 @@ +.Register +form +{ + width: 65%; + display: flex; + flex-direction: column; + align-items: flex-end; +} diff --git a/src/components/Register.tsx b/src/components/Register.tsx index cdfc8be..f2e2f01 100644 --- a/src/components/Register.tsx +++ b/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 ) => { @@ -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 ( -
-

Sign Up

+
+

Register

- - - - +
+ + +
+
+ + +
+
+ + +
{successMsg !== "false" &&
{successMsg}
} {errMsg !== "false" &&
{errMsg}
} diff --git a/src/components/logout.php b/src/components/logout.php new file mode 100644 index 0000000..db82b7b --- /dev/null +++ b/src/components/logout.php @@ -0,0 +1,11 @@ + diff --git a/src/context/UserContext.tsx b/src/context/UserContext.tsx index 0790b5a..d4b2c4b 100644 --- a/src/context/UserContext.tsx +++ b/src/context/UserContext.tsx @@ -74,8 +74,8 @@ export type UserCtxT = export const UserCtx = createContext(null); export const Axios = axios.create({ - // baseURL: 'http://localhost/dog/php-dog/', - baseURL: 'https://hope-fly.de/dog/php-dog/', + baseURL: 'http://localhost/dog/php-dog/', +// baseURL: 'https://hope-fly.de/dog/php-dog/', }); export const UserCtxProvider = ({children}:TUserContextProviderProps) => {