Register account functionality

ras/api/modules/auth.py

@@ -1,5 +1,6 @@
 from rest_framework.decorators import api_view
 from django.contrib.auth import get_user_model
+from django.contrib.auth.forms import UserCreationForm
 from django.http import JsonResponse
 import jwt
 
@@ -30,3 +31,23 @@ def login(request):
             return JsonResponse({'error': 'Wrong credentials'})
     except User.DoesNotExist:
         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)

ras/api/urls.py

@@ -21,6 +21,7 @@ urlpatterns = [
     path('books/ratings/count', countRatings),
     # path('books/countries', books_per_country),
     path('auth/login', csrf_exempt(login)),
+    path('auth/register', csrf_exempt(register)),
 
     path('books/challenge', getChallengeOfYear),
     path('books/challenges', getAllChallenges),

ras/frontend/src/App.js

@@ -5,6 +5,7 @@ import Login from "./views/login";
 import Books from "./views/bookslist";
 import BooksList from "./views/bookslist";
 import Challenges from "./views/challenges";
+import { Register } from "./views/register";
 
 const Dashboard = lazy(() => import("./views/dashboard"));
 
@@ -28,6 +29,7 @@ function App() {
                 </div>}>
                 <Routes>
                     <Route exact path="/" element={localStorage.getItem('token') ? <Dashboard /> : <Login />} />
+                    <Route exact path="/register" element={<Register />} />
                     <Route exact path="/books" element={<BooksList />} />
                     <Route exact path="/challenges" element={<Challenges />} />
                     {/* <Route exact path="/login" element={<Login />} /> */}

ras/frontend/src/components/Data.js

@@ -1,5 +1,16 @@
 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 = () => {
     return fetch('/api/books/all', {
         "method": "GET",

ras/frontend/src/views/login.js

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { Link } from "react-router-dom";
 
 const Login = (props) => {
     const [username, setUsername] = useState('');
@@ -116,6 +117,7 @@ const Login = (props) => {
                     <button type="submit" className="btn btn-primary">Inloggen</button>
                     <div id='err_msg'></div>
                 </form>
+                <Link className="btn" to="/register" style={{ width: '100%', marginTop: '15px' }}>Maak een account aan</Link>
             </div>
         </React.Fragment>
     );

ras/frontend/src/views/register.js

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

ras/frontend/static/css/style.css

@@ -590,8 +590,11 @@ html, body{
     -ms-transform: translateX(-50%) translateY(-50%);
     transform: translateX(-50%) translateY(-50%);
     border-radius: 5px;
+  }
 
-}
+  .login.register{
+    width:450px;
+  }
 
 .login form{
   background:#ffffff;

ras/frontend/static/js/main.js.LICENSE.txt

@@ -10,6 +10,10 @@
   !*** ./src/views/login.js ***!
   \****************************/
 
+/*!*******************************!*\
+  !*** ./src/views/register.js ***!
+  \*******************************/
+
 /*!********************************!*\
   !*** ./src/views/bookslist.js ***!
   \********************************/

ras/ras/urls.py

@@ -23,6 +23,7 @@ urlpatterns = [
     path('books/', include('frontend.urls')),
     path('challenges/', include('frontend.urls')),
     path('login/', include('frontend.urls')),
+    path('register/', include('frontend.urls')),
     path('manage/', include('frontend.urls')),
     path('manage/challenges', include('frontend.urls'))
 ]