Register account functionality
This commit is contained in:
parent
3b02adbf5c
commit
fa5a40c973
|
@ -1,5 +1,6 @@
|
||||||
from rest_framework.decorators import api_view
|
from rest_framework.decorators import api_view
|
||||||
from django.contrib.auth import get_user_model
|
from django.contrib.auth import get_user_model
|
||||||
|
from django.contrib.auth.forms import UserCreationForm
|
||||||
from django.http import JsonResponse
|
from django.http import JsonResponse
|
||||||
import jwt
|
import jwt
|
||||||
|
|
||||||
|
@ -30,3 +31,23 @@ def login(request):
|
||||||
return JsonResponse({'error': 'Wrong credentials'})
|
return JsonResponse({'error': 'Wrong credentials'})
|
||||||
except User.DoesNotExist:
|
except User.DoesNotExist:
|
||||||
return JsonResponse({'error': 'User does not exist'})
|
return JsonResponse({'error': 'User does not exist'})
|
||||||
|
|
||||||
|
@api_view(['POST'])
|
||||||
|
def register(request):
|
||||||
|
try:
|
||||||
|
email = request.POST.get('email')
|
||||||
|
username = request.POST.get('username')
|
||||||
|
password = request.POST.get('password')
|
||||||
|
|
||||||
|
payload = {
|
||||||
|
"email": email,
|
||||||
|
"username": username,
|
||||||
|
"password": password
|
||||||
|
}
|
||||||
|
|
||||||
|
user = get_user_model().objects.create_user(**payload)
|
||||||
|
print(user)
|
||||||
|
|
||||||
|
return JsonResponse({'code': 'OK'}, safe=False)
|
||||||
|
except Exception as e:
|
||||||
|
return JsonResponse({'error': 'Error while loading the data: ' + e}, safe=False)
|
|
@ -21,6 +21,7 @@ urlpatterns = [
|
||||||
path('books/ratings/count', countRatings),
|
path('books/ratings/count', countRatings),
|
||||||
# path('books/countries', books_per_country),
|
# path('books/countries', books_per_country),
|
||||||
path('auth/login', csrf_exempt(login)),
|
path('auth/login', csrf_exempt(login)),
|
||||||
|
path('auth/register', csrf_exempt(register)),
|
||||||
|
|
||||||
path('books/challenge', getChallengeOfYear),
|
path('books/challenge', getChallengeOfYear),
|
||||||
path('books/challenges', getAllChallenges),
|
path('books/challenges', getAllChallenges),
|
||||||
|
|
|
@ -5,6 +5,7 @@ import Login from "./views/login";
|
||||||
import Books from "./views/bookslist";
|
import Books from "./views/bookslist";
|
||||||
import BooksList from "./views/bookslist";
|
import BooksList from "./views/bookslist";
|
||||||
import Challenges from "./views/challenges";
|
import Challenges from "./views/challenges";
|
||||||
|
import { Register } from "./views/register";
|
||||||
|
|
||||||
const Dashboard = lazy(() => import("./views/dashboard"));
|
const Dashboard = lazy(() => import("./views/dashboard"));
|
||||||
|
|
||||||
|
@ -28,6 +29,7 @@ function App() {
|
||||||
</div>}>
|
</div>}>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route exact path="/" element={localStorage.getItem('token') ? <Dashboard /> : <Login />} />
|
<Route exact path="/" element={localStorage.getItem('token') ? <Dashboard /> : <Login />} />
|
||||||
|
<Route exact path="/register" element={<Register />} />
|
||||||
<Route exact path="/books" element={<BooksList />} />
|
<Route exact path="/books" element={<BooksList />} />
|
||||||
<Route exact path="/challenges" element={<Challenges />} />
|
<Route exact path="/challenges" element={<Challenges />} />
|
||||||
{/* <Route exact path="/login" element={<Login />} /> */}
|
{/* <Route exact path="/login" element={<Login />} /> */}
|
||||||
|
|
|
@ -1,5 +1,16 @@
|
||||||
import { readCookie } from "../Functions";
|
import { readCookie } from "../Functions";
|
||||||
|
|
||||||
|
export const registerUser = (formData) => {
|
||||||
|
return fetch(`/api/auth/register`, {
|
||||||
|
method: 'POST',
|
||||||
|
body: formData
|
||||||
|
})
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
return data;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
export const getAllBooks = () => {
|
export const getAllBooks = () => {
|
||||||
return fetch('/api/books/all', {
|
return fetch('/api/books/all', {
|
||||||
"method": "GET",
|
"method": "GET",
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
const Login = (props) => {
|
const Login = (props) => {
|
||||||
const [username, setUsername] = useState('');
|
const [username, setUsername] = useState('');
|
||||||
|
@ -116,6 +117,7 @@ const Login = (props) => {
|
||||||
<button type="submit" className="btn btn-primary">Inloggen</button>
|
<button type="submit" className="btn btn-primary">Inloggen</button>
|
||||||
<div id='err_msg'></div>
|
<div id='err_msg'></div>
|
||||||
</form>
|
</form>
|
||||||
|
<Link className="btn" to="/register" style={{ width: '100%', marginTop: '15px' }}>Maak een account aan</Link>
|
||||||
</div>
|
</div>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,55 @@
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
export const Register = (props) => {
|
||||||
|
const [isRegistered, setIsRegistered] = useState(false);
|
||||||
|
|
||||||
|
const handleFormSubmit = async (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
var email = event.target.email.value;
|
||||||
|
var username = event.target.username.value;
|
||||||
|
var password = event.target.password.value;
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('email', email);
|
||||||
|
formData.append('username', username);
|
||||||
|
formData.append('password', password);
|
||||||
|
|
||||||
|
const data = await import("../components/Data.js");
|
||||||
|
const register = await data.registerUser(formData);
|
||||||
|
|
||||||
|
if(register.code && register.code === 'OK'){
|
||||||
|
setIsRegistered(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return(
|
||||||
|
<React.Fragment>
|
||||||
|
<div className='login_overlay'></div>
|
||||||
|
<div className='login register'>
|
||||||
|
<img className="logo_text" src="/static/images/logo.png" />
|
||||||
|
|
||||||
|
{isRegistered &&(
|
||||||
|
<div id="ok_msg" class="alert alert-success" style={{ marginTop: '20px' }}>Account aangemaakt! Klik <Link to="/">hier</Link> om in te loggen.</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<form onSubmit={(event) => handleFormSubmit(event)}>
|
||||||
|
<p style={{ textAlign: 'center', marginBottom: '25px' }}>Leuk dat je een account aan gaat maken op NovelMetrix! Vul hieronder de gegevens in en na het aanmaken kun je gelijk inloggen op je nieuwe account.</p>
|
||||||
|
<div className="mb-3">
|
||||||
|
<input type="text" className="form-control" name="email" id="email" placeholder="E-mailadres" required/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<input type="text" className="form-control" name="username" id="username" placeholder="Gebruikersnaam" required/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<input type="password" className="form-control" name="password" id="password" placeholder="Wachtwoord" required/>
|
||||||
|
</div>
|
||||||
|
<button type="submit" className="btn btn-primary">Registreer</button>
|
||||||
|
<div id='err_msg'></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</React.Fragment>
|
||||||
|
)
|
||||||
|
}
|
|
@ -590,7 +590,10 @@ html, body{
|
||||||
-ms-transform: translateX(-50%) translateY(-50%);
|
-ms-transform: translateX(-50%) translateY(-50%);
|
||||||
transform: translateX(-50%) translateY(-50%);
|
transform: translateX(-50%) translateY(-50%);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login.register{
|
||||||
|
width:450px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login form{
|
.login form{
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -10,6 +10,10 @@
|
||||||
!*** ./src/views/login.js ***!
|
!*** ./src/views/login.js ***!
|
||||||
\****************************/
|
\****************************/
|
||||||
|
|
||||||
|
/*!*******************************!*\
|
||||||
|
!*** ./src/views/register.js ***!
|
||||||
|
\*******************************/
|
||||||
|
|
||||||
/*!********************************!*\
|
/*!********************************!*\
|
||||||
!*** ./src/views/bookslist.js ***!
|
!*** ./src/views/bookslist.js ***!
|
||||||
\********************************/
|
\********************************/
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -23,6 +23,7 @@ urlpatterns = [
|
||||||
path('books/', include('frontend.urls')),
|
path('books/', include('frontend.urls')),
|
||||||
path('challenges/', include('frontend.urls')),
|
path('challenges/', include('frontend.urls')),
|
||||||
path('login/', include('frontend.urls')),
|
path('login/', include('frontend.urls')),
|
||||||
|
path('register/', include('frontend.urls')),
|
||||||
path('manage/', include('frontend.urls')),
|
path('manage/', include('frontend.urls')),
|
||||||
path('manage/challenges', include('frontend.urls'))
|
path('manage/challenges', include('frontend.urls'))
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in New Issue