hope/dog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout; routing; login

Browse Source
This commit is contained in:
Peter Hoppe
2022-12-22 00:29:06 +01:00
parent 85d99d8023
commit c894022b31
13 changed files with 116 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
.vscode/launch.json vendored
View File

@ -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}"
}
]

25
php/php-dog/AuthMiddleware.php
View File

@ -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 [
"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;

2
php/php-dog/getUser.php
View File

@ -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();
?>

8
src/App.css
View File

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

5
src/App.tsx
View File

@ -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/>} />
<Route path="/d" element={<Dog/>} />
{user && <Route path="/d" element={<Dog/>} />}
<Route path="/login" element={<Login/>} />
<Route path="/reg" element={<Register/>} />
</Routes>

7
src/components/Dog.css
View File

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

6
src/components/Home.tsx
View File

@ -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>
)

8
src/components/Login.css Normal file
View File

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

35
src/components/Login.tsx
View File

@ -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}>
<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 />
{ 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>
)
}

8
src/components/Register.css Normal file
View File

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

32
src/components/Register.tsx
View File

@ -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>
<h2>Sign Up</h2>
<div className='Register'>
<h2>Register</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 />
<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="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>

11
src/components/logout.php Normal file
View File

@ -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();
?>

4
src/context/UserContext.tsx
View File

@ -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: '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) => {