Created Login Page

client/src/App.js

@@ -1,12 +1,16 @@
 import React from 'react'
-import {Route, Routes} from "react-router-dom";
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import ImageUpload from './components/ImageUpload';
+import LoginPage from './pages/LoginPage/LoginPage';
 
 function App() {
   return (
+    <BrowserRouter>
     <Routes>
+      <Route path="/" element={<LoginPage/>} />
       <Route path = "/grading" element = {<ImageUpload/>} />
     </Routes>
+    </BrowserRouter>
   );
 }
 

client/src/pages/LoginPage/LoginPage.css

@@ -0,0 +1,39 @@
+.login__form {
+     background: #7F5AF0;
+     border-radius: 5px;
+     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+     padding: 30px;
+     margin: 0 auto;
+     text-align: center;
+}
+body {
+     background-color: black;
+     display: flex;
+     justify-content: center;
+     align-items: center;
+     height: 100vh;
+   }
+
+
+   /* Define the styles for the input fields */
+   .login_form input {
+     width: 100%;
+     padding: 12px;
+     margin: 8px 0;
+     box-sizing: border-box;
+     border-radius: 5px;
+     border: none;
+     font-size: 1.2em;
+   }
+
+   /* Define the styles for the submit button */
+   .login_form button {
+     width: 100%;
+     background-color: #4CAF50;
+     color: white;
+     padding: 14px 20px;
+     margin: 8px 0;
+     border: none;
+     border-radius: 5px;
+     cursor: pointer;
+   }

client/src/pages/LoginPage/LoginPage.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import './LoginPage.css';
+
+const LoginForm = () => {
+    return(
+        <>
+            <div className="login__form">
+                <form>
+                    <input type="text" placeholder="Username" />
+                    <input type="password" placeholder="Password" />
+                    <button type="submit">Login</button>
+                </form>
+            </div>
+        </>
+    );
+};
+
+const LoginPage = () => {
+    return(
+        <>
+            <div className="login__container">
+                <LoginForm />
+            </div>
+        </>
+    );
+};
+
+export default LoginPage;

server/app/app/settings.py

@@ -37,6 +37,7 @@
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'main_app',
 ]
 
 MIDDLEWARE = [

server/app/app/urls.py

@@ -14,8 +14,9 @@
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
 from django.contrib import admin
-from django.urls import path
+from django.urls import path, include
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+    path('', include('main_app.urls')),
 ]

server/app/main_app/templates/homepage.html

@@ -0,0 +1,2 @@
+<h1>Welcome, {{ user.username }}</h1>
+<a href="{% url 'logout' %}">Logout</a>

server/app/main_app/templates/login.html

@@ -0,0 +1,7 @@
+<form method="post">
+    {% csrf_token %}
+    {% if error %}<p style="color: red">{{ error }}</p>{% endif %}
+    <input type="text" name="username" placeholder="Username">
+    <input type="password" name="password" placeholder="Password">
+    <input type="submit" value="Login">
+</form>

server/app/main_app/urls.py

@@ -0,0 +1,9 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    # ...
+    path('login/', views.login_view, name='login'),
+    path('logout/', views.logout_view, name='logout'),
+    # ...
+]

server/app/main_app/views.py

@@ -1,3 +1,23 @@
-from django.shortcuts import render
+from django.shortcuts import render, redirect, get_list_or_404
+from django.contrib.auth import authenticate, login, logout
+from django.contrib.auth.decorators import login_required
+from django.shortcuts import render, redirect
 
 # Create your views here.
+def login_view(request):
+    if request.method == 'POST':
+        username = request.POST['username']
+        password = request.POST['password']
+        user = authenticate(request, username=username, password=password)
+        if user is not None:
+            login(request, user)
+            return redirect('home')
+        else:
+            return render(request, 'login.html', {'error': 'Invalid login'})
+    else:
+        return render(request, 'login.html')
+
+@login_required
+def logout_view(request):
+    logout(request)
+    return redirect('login')