feat : chat ui and login , signup and list of friends

Author: Faizgeeky

client/package-lock.json

@@ -6,6 +6,7 @@
  "@testing-library/jest-dom": "^5.17.0",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
+ "axios": "^1.7.2",
  "bootstrap": "^5.3.3",
  "react": "^18.3.1",
  "react-bootstrap": "^2.10.4",

client/package.json

@@ -5,15 +5,18 @@ import './index.css';
 import reportWebVitals from './reportWebVitals';
 import Login from './pages/login';
 import Signup from './pages/signup';
+import Chat from './pages/chat';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 export default function App() {
  return (
  <BrowserRouter>
  <Routes>
  <Route path="/">
- <Route index element={<Login />} />
+ <Route path='login' element={<Login />} />
  <Route path="signup" element={<Signup />} />
+ <Route path="chat" element={<Chat />} />
+
 
  </Route>
  </Routes>

client/src/index.js

@@ -0,0 +1,145 @@
+import React from 'react'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import AuthGuard from '../services/AuthGuard';
+import { useEffect } from 'react';
+import axios from 'axios';
+import { useState } from 'react';
+
+function Chat() {
+
+ const [users , setUsers] = useState([])
+
+ useEffect(() => {
+ const fetchData = async () => {
+ const accessToken = localStorage.user.access;
+ console.log(accessToken);
+ try {
+ const response = await axios.get(
+ 'http://127.0.0.1:8000/api/users/',
+ {},
+ {
+ headers: {
+ Authorization: `Bearer ${accessToken}`,
+ },
+ }
+ );
+ setUsers(response.data)
+ console.log("response is here?",response.data); // Handle the response data here
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ // Handle error
+ }
+ };
+
+ fetchData();
+ }, []); 
+
+ return (
+ <div>
+ <div class="container py-5">
+
+ <div class="row">
+
+ <div class="col-md-6 col-lg-5 col-xl-4 mb-4 mb-md-0">
+
+ <h5 class="font-weight-bold mb-3 text-center text-lg-start">Member</h5>
+ 
+ {users.map((user) => (
+ <div className="card" key={user.id}>
+ <div className="card-body">
+ <ul className="list-unstyled mb-0">
+ <li className="p-2 border-bottom bg-body-tertiary">
+ <a href="#!" className="d-flex justify-content-between">
+ <div className="d-flex flex-row">
+ {/* <img
+ src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-8.webp"
+ alt="avatar"
+ className="rounded-circle d-flex align-self-center me-3 shadow-1-strong"
+ width="60"
+ /> */}
+ <div className="pt-1">
+ <p className="fw-bold mb-0">{user.username}</p>
+ <p className="small text-muted">{user.email}</p>
+ </div>
+ </div>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ ))}
+
+ 
+
+ </div>
+
+ <div class="col-md-6 col-lg-7 col-xl-8">
+
+ <ul class="list-unstyled">
+ <li class="d-flex justify-content-between mb-4">
+ <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="avatar"
+ class="rounded-circle d-flex align-self-start me-3 shadow-1-strong" width="60"/>
+ <div class="card">
+ <div class="card-header d-flex justify-content-between p-3">
+ <p class="fw-bold mb-0">Brad Pitt</p>
+ <p class="text-muted small mb-0"><i class="far fa-clock"></i> 12 mins ago</p>
+ </div>
+ <div class="card-body">
+ <p class="mb-0">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua.
+ </p>
+ </div>
+ </div>
+ </li>
+ <li class="d-flex justify-content-between mb-4">
+ <div class="card w-100">
+ <div class="card-header d-flex justify-content-between p-3">
+ <p class="fw-bold mb-0">Lara Croft</p>
+ <p class="text-muted small mb-0"><i class="far fa-clock"></i> 13 mins ago</p>
+ </div>
+ <div class="card-body">
+ <p class="mb-0">
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
+ laudantium.
+ </p>
+ </div>
+ </div>
+ <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp" alt="avatar"
+ class="rounded-circle d-flex align-self-start ms-3 shadow-1-strong" width="60"/>
+ </li>
+ <li class="d-flex justify-content-between mb-4">
+ <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="avatar"
+ class="rounded-circle d-flex align-self-start me-3 shadow-1-strong" width="60"/>
+ <div class="card">
+ <div class="card-header d-flex justify-content-between p-3">
+ <p class="fw-bold mb-0">Brad Pitt</p>
+ <p class="text-muted small mb-0"><i class="far fa-clock"></i> 10 mins ago</p>
+ </div>
+ <div class="card-body">
+ <p class="mb-0">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+ labore et dolore magna aliqua.
+ </p>
+ </div>
+ </div>
+ </li>
+ <li class="bg-white mb-3">
+ <div data-mdb-input-init class="form-outline">
+ <textarea class="form-control bg-body-tertiary" id="textAreaExample2" rows="4"></textarea>
+ <label class="form-label" for="textAreaExample2">Message</label>
+ </div>
+ </li>
+ <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-info btn-rounded float-end">Send</button>
+ </ul>
+
+ </div>
+
+ </div>
+
+ </div>
+ </div>
+ )
+}
+
+export default AuthGuard(Chat)

client/src/pages/chat.jsx

@@ -1,5 +1,31 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
+import axios from 'axios';
+import AuthService from '../services/auth.service'
+import { useState } from 'react';
+import { useNavigate } from "react-router-dom";
 function Login() {
+ const [username, setUsername] = useState("");
+ const [password, setPassword] = useState("");
+ const navigate = useNavigate();
+
+ const handleLogin = async (e) => {
+ e.preventDefault();
+ try {
+ await AuthService.login(username, password).then(
+ () => {
+ console.log(localStorage.user);
+ navigate("/chat");
+ window.location.reload();
+ },
+ (error) => {
+ console.log(error);
+ }
+ );
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
  return (
  <div className="App">
  <section class="vh-100" styleclass="background-color: #eee;">
@@ -13,25 +39,25 @@ function Login() {
 
  <p class="text-center h1 fw-bold mb-5 mx-1 mx-md-4 mt-4">Login</p>
 
- <form class="mx-1 mx-md-4">
+ <form class="mx-1 mx-md-4" onSubmit={handleLogin}>
 
  <div class="d-flex flex-row align-items-center mb-4">
  <i class="fas fa-user fa-lg me-3 fa-fw"></i>
  <div data-mdb-input-init class="form-outline flex-fill mb-0">
- <input type="text" id="form3Example1c" class="form-control" />
+ <input type="text" id="form3Example1c" class="form-control" onChange={(e) => setUsername(e.target.value)} />
  <label class="form-label" for="form3Example1c">Username</label>
  </div>
  </div>
 
  <div class="d-flex flex-row align-items-center mb-4">
  <i class="fas fa-lock fa-lg me-3 fa-fw"></i>
  <div data-mdb-input-init class="form-outline flex-fill mb-0">
- <input type="password" id="form3Example4c" class="form-control" />
+ <input type="password" id="form3Example4c" class="form-control" onChange={(e) => setPassword(e.target.value)} />
  <label class="form-label" for="form3Example4c">Password</label>
  </div>
  </div>
  <div class="d-flex justify-content-center mx-4 mb-3 mb-lg-4">
- <button type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg">Register</button>
+ <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary btn-lg">Register</button>
  </div>
 
  </form>

client/src/pages/login.jsx

@@ -1,5 +1,15 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 function Signup() {
+
+ const user = JSON.parse(localStorage.getItem("user"));
+ console.log(user)
+ // if (user && user.accessToken) {
+ // // return { Authorization: 'Bearer ' + user.accessToken };
+ // return { "x-auth-token": user.accessToken };
+ // } else {
+ // return {};
+ // }
+
  return (
  <div className="Signup">
  <section class="vh-100" styleclass="background-color: #eee;">

client/src/pages/signup.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+
+const AuthGuard = (Component) => {
+ return (props) => {
+ const user = JSON.parse(localStorage.getItem('user'));
+ if (!user || !user.access) {
+ return <Navigate to="/login" />;
+ }
+ return <Component {...props} />;
+ };
+};
+
+export default AuthGuard;

client/src/services/AuthGuard.js

@@ -0,0 +1,52 @@
+import axios from "axios";
+
+const API_URL = "http://127.0.0.1:8000/api";
+
+const signup = (email, password) => {
+ return axios
+ .post(API_URL + "/signup", {
+ email,
+ password,
+ })
+ .then((response) => {
+ if (response.data.accessToken) {
+ localStorage.setItem("user", JSON.stringify(response.data));
+ }
+
+ return response.data;
+ });
+};
+
+const login = (username, password) => {
+ return axios
+ .post(API_URL + "/login/", {
+ username,
+ password,
+ })
+ .then((response) => {
+ if (response.data.access) {
+ // console.log("Data is here?", response.data)
+
+ localStorage.setItem("user", JSON.stringify(response.data));
+ }
+ // console.log(response.data.access )
+ return response.data;
+ });
+};
+
+const logout = () => {
+ localStorage.removeItem("user");
+};
+
+const getCurrentUser = () => {
+ return JSON.parse(localStorage.getItem("user"));
+};
+
+const authService = {
+ signup,
+ login,
+ logout,
+ getCurrentUser,
+};
+
+export default authService;