Added sign up view

Contributors.md

@@ -0,0 +1,3 @@
+# Contributors 
+
+## This project is a result of the hard work of the following volunteers

README.md

@@ -4,6 +4,8 @@ ChitChat is a Python-powered Social Network.
 
 ## Installation
 
+### Backend
+
 1. cd into backend folder
     ```cd backend```
 
@@ -38,6 +40,17 @@ To run this project do the following:
     ```python manage.py runserver```
 
 
+### FrontEnd
+1. cd into the frontend folder
+```cd frontend```
+
+2. Install dependencies
+```npm install```
+
+3. Run the development server
+```npm run dev```
+
+
 
 ## Contributing
 

backend/accounts/admin.py

@@ -21,3 +21,4 @@ class CustomUserAdmin(UserAdmin):
 
 admin.site.register(CustomUser, CustomUserAdmin)
 admin.site.unregister(Group)
+admin.site.register(Profile)

backend/accounts/migrations/0003_alter_profile_follows.py

@@ -0,0 +1,19 @@
+# Generated by Django 4.2.4 on 2024-01-26 20:49
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("accounts", "0002_profile"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="profile",
+            name="follows",
+            field=models.ManyToManyField(
+                blank=True, related_name="followers", to="accounts.profile"
+            ),
+        ),
+    ]

backend/accounts/models.py

@@ -17,3 +17,6 @@ class Profile(models.Model):
 
     def __str__(self):
         return f" {self.user.username} - Profile"
+
+    class Meta:
+        ordering = ["-pk"]

backend/api/serializers.py

@@ -2,21 +2,11 @@
 from rest_framework import serializers
 
 
-class UserSerializer(serializers.HyperlinkedModelSerializer):
-    url = serializers.HyperlinkedIdentityField(
-        view_name="api:user-detail",
-        lookup_field="pk",
-    )
-
+class UserSerializer(serializers.ModelSerializer):
     class Meta:
         model = CustomUser
-        lookup_field = "pk"
-        fields = [
-            "username",
-            "email",
-            "pk",
-            "url",
-        ]
+        # lookup_field = "pk"
+        exclude = ["password", "groups", "user_permissions", "is_staff", "is_active"]
 
 
 class FollowerSerializer(serializers.ModelSerializer):

backend/api/urls.py

@@ -10,6 +10,7 @@
     path("api/users/", views.CustomUserList.as_view(), name="users"),
     path("api/users/<int:pk>/", views.CustomUserDetail.as_view(), name="user-detail"),
     path("api/profiles/", views.ProfileList.as_view(), name="profiles"),
+    path("api/signup", views.SignUpView.as_view(), name="signup-view"),
     path(
         "api/profiles/<int:pk>/", views.ProfileDetail.as_view(), name="profile-detail"
     ),

backend/api/views.py

@@ -116,3 +116,18 @@ def post(self, request, username):
             {"message": f"you're no longer following {profile.user.username}"},
             status=200,
         )
+
+
+class SignUpView(APIView):
+    """
+    username: str
+    email: str
+    password: str
+    """
+
+    def post(self, request):
+        serializer = UserSerializer(data=request.data)
+        if serializer.is_valid():
+            serializer.save()
+            return Response(serializer.data, status=201)
+        return Response(serializer.errors, status=400)

frontend/src/App.jsx

@@ -1,4 +1,5 @@
 import Login from "./pages/auth";
+import SignUpView from "./pages/Signup";
 import UsersList from "./pages/UsersList";
 import { Routes, Route } from "react-router-dom";
 
@@ -7,6 +8,7 @@ function App() {
     <Routes>
       <Route path="/" element={<Login />} />;
       <Route path="/users" element={<UsersList />} />
+      <Route path="/signup" element={<SignUpView />} />
     </Routes>
   );
 }

frontend/src/components/auth/index.jsx

@@ -1,14 +1,23 @@
 import { Button, Card, TextInput, Avatar } from "flowbite-react";
+import { useState } from "react";
 
 export default function Login() {
-  return (
+  const [data, setData] = useState({
+    email: "",
+    password: ""
+  })
+
+  const onChange = (e) => {
+    setData({ ...data, [e.target.id]: e.target.value })
+  }
+  return (<>
     <center style={{ marginTop: "250px" }}>
       <Card className="max-w-md">
         <Avatar img="/user.png" rounded size="xl" />
         <h3 className="text-center text-xl mb-4 mt-4">Welcome to Chit-Chat</h3>
         <form className="flex flex-col gap-4">
           <div>
-            <TextInput id="email" placeholder="Email" required type="email" />
+            <TextInput id="email" placeholder="Email" required type="email" onChange={onChange} />
           </div>
           <div>
             <TextInput
@@ -23,5 +32,6 @@ export default function Login() {
         </form>
       </Card>
     </center>
+  </>
   );
 }

frontend/src/components/registration/index.jsx

@@ -1,3 +1,60 @@
+import { Button, Card, TextInput, Avatar } from "flowbite-react";
+import { useState } from "react";
+import axios from "axios"
+
 export default function Registration() {
-  return <div>Registration</div>;
+  const [data, setData] = useState({
+    email: "",
+    password: "",
+    first_name: "",
+    last_name: "",
+    username: "",
+  })
+
+  const onChange = (e) => {
+    setData({ ...data, [e.target.id]: e.target.value })
+  }
+
+  const onSubmit = () => {
+    if (data.email === "" || data.password === "" || data.first_name === "" || data.last_name === "" || data.username === "") (
+      alert("All fields are required")
+    )
+    axios.post("http://localhost:8000/api/signup", data).then((res) => {
+      alert("Successfully signed up")
+    }).catch((err) => {
+      alert("Failed to submit")
+    })
+  }
+
+  return <center style={{ marginTop: "250px" }}>
+    <Card className="max-w-md">
+      <Avatar img="/user.png" rounded size="xl" />
+      <h3 className="text-center text-xl mb-4 mt-4">Welcome to Chit-Chat</h3>
+      <form className="flex flex-col gap-4">
+        <div>
+          <TextInput id="first_name" placeholder="First Name" required type="text" onChange={onChange} />
+        </div>
+        <div>
+          <TextInput id="last_name" placeholder="Last Name" required type="text" onChange={onChange} />
+        </div>
+        <div>
+          <TextInput id="username" placeholder="Username" required type="text" onChange={onChange} />
+        </div>
+        <div>
+          <TextInput id="email" placeholder="Email" required type="email" onChange={onChange} />
+        </div>
+        <div>
+          <TextInput
+            id="password"
+            required
+            type="password"
+            placeholder="Password"
+            onChange={onChange}
+          />
+        </div>
+
+        <Button onClick={onSubmit}>Register</Button>
+      </form>
+    </Card>
+  </center>
 }

frontend/src/pages/Signup/index.jsx

@@ -0,0 +1,6 @@
+import Registration from "../../components/registration";
+
+
+export default function SignUpView() {
+    return <Registration />
+}