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

9
src/components/Dog.css
View File

@ -5,10 +5,7 @@
margin: 5px;
}
.neben
{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
button
{
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();
?>