set up Backend APIS

client/package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.25.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "5.0.0",

client/src/App.jsx

@@ -2,12 +2,13 @@ import React from 'react';
 import { StreamChat } from 'stream-chat';
 import { Chat } from 'stream-chat-react';
 import Cookies from 'universal-cookie';
-import { ChannelListContainer, ChannelContainer } from './components';
+import { ChannelListContainer, ChannelContainer, Auth } from './components';
 import './App.css'
 const apiKey = '8sxnm6cqgmtd';
 const client = StreamChat.getInstance(apiKey);
-
+const authToken = false;
 function App() {
+    if (!authToken) return <Auth />
     return <div className="app__wrapper">
         <Chat client={client} theme="team light">
             <ChannelListContainer />

client/src/components/Auth.jsx

@@ -0,0 +1,151 @@
+import React, { useState } from 'react'
+import Cookies from 'universal-cookie'
+import axios from 'axios'
+import signinImage from '../assets/signup.jpg'
+
+const cookies = new Cookies();
+
+const initialState = {
+    fullName: '',
+    username: '',
+    password: '',
+    confirmPassword: '',
+    phoneNumber: '',
+    avatarURL: '',
+}
+const Auth = () => {
+    const [form, setForm] = useState(initialState);
+
+    const [isSignup, setIsSignup] = useState(false);
+    const handleChange = (e) => {
+        setForm({ ...form, [e.target.name]: e.target.value });
+    }
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        const { username, password, phoneNumber, avatarURL } = form;
+
+        const URL = 'https://localhost:5000/auth';
+        // const URL = 'https://medical-pager.herokuapp.com/auth';
+
+        const { data: { token, userId, hashedPassword, fullName } } = await axios.post(`${URL}/${isSignup ? 'signup' : 'login'}`, {
+            username, password, fullName: form.fullName, phoneNumber, avatarURL,
+        });
+
+        cookies.set('token', token);
+        cookies.set('username', username);
+        cookies.set('fullName', fullName);
+        cookies.set('userId', userId);
+
+        if (isSignup) {
+            cookies.set('phoneNumber', phoneNumber);
+            cookies.set('avatarURL', avatarURL);
+            cookies.set('hashedPassword', hashedPassword);
+        }
+
+        window.location.reload();
+    }
+
+    const switchMode = () => {
+        setIsSignup((prevIsSignup) => !prevIsSignup);
+    }
+    return (
+        <div className="auth__form-container">
+            <div className="auth__form-container_fields">
+                <div className="auth__form-container_fields-content">
+                    <p>{isSignup ? 'Sign Up' : 'Sign In'}</p>
+                    <form onSubmit={handleSubmit}>
+                        {isSignup && (
+                            <div className="auth__form-container_fields-content_input">
+                                <label htmlFor="fullName">Full Name</label>
+                                <input
+                                    name="fullName"
+                                    type="text"
+                                    placeholder="Full Name"
+                                    onChange={handleChange}
+                                    required
+                                />
+                            </div>
+                        )}
+                        <div className="auth__form-container_fields-content_input">
+                            <label htmlFor="username">Username</label>
+                            <input
+                                name="username"
+                                type="text"
+                                placeholder="Username"
+                                onChange={handleChange}
+                                required
+                            />
+                        </div>
+                        {isSignup && (
+                            <div className="auth__form-container_fields-content_input">
+                                <label htmlFor="phoneNumber">Phone Number</label>
+                                <input
+                                    name="phoneNumber"
+                                    type="text"
+                                    placeholder="Phone Number"
+                                    onChange={handleChange}
+                                    required
+                                />
+                            </div>
+                        )}
+                        {isSignup && (
+                            <div className="auth__form-container_fields-content_input">
+                                <label htmlFor="avatarURL">Avatar URL</label>
+                                <input
+                                    name="avatarURL"
+                                    type="text"
+                                    placeholder="Avatar URL"
+                                    onChange={handleChange}
+                                    required
+                                />
+                            </div>
+                        )}
+                        <div className="auth__form-container_fields-content_input">
+                            <label htmlFor="password">Password</label>
+                            <input
+                                name="password"
+                                type="password"
+                                placeholder="Password"
+                                onChange={handleChange}
+                                required
+                            />
+                        </div>
+                        {isSignup && (
+                            <div className="auth__form-container_fields-content_input">
+                                <label htmlFor="confirmPassword">Confirm Password</label>
+                                <input
+                                    name="confirmPassword"
+                                    type="password"
+                                    placeholder="Confirm Password"
+                                    onChange={handleChange}
+                                    required
+                                />
+                            </div>
+                        )}
+                        <div className="auth__form-container_fields-content_button">
+                            <button>{isSignup ? "Sign Up" : "Sign In"}</button>
+                        </div>
+                    </form>
+                    <div className="auth__form-container_fields-account">
+                        <p>
+                            {isSignup
+                                ? "Already have an account?"
+                                : "Don't have an account?"
+                            }
+                            <span onClick={switchMode}>
+                                {isSignup ? 'Sign In' : 'Sign Up'}
+                            </span>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div className="auth__form-container_image">
+                <img src={signinImage} alt="sign in" />
+            </div>
+        </div>
+    )
+}
+
+export default Auth

client/src/components/ChannelContainer.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 const ChannelContainer = () => {
-    return <div>
-
-    </div>;
+    return (
+        <h>Channel Container</h>
+    )
 };
 
 export default ChannelContainer;

client/src/components/index.js

@@ -2,4 +2,5 @@ export { default as ChannelContainer } from './ChannelContainer'
 export { default as ChannelListContainer } from './ChannelListContainer'
 export { default as ChannelSearch } from './ChannelSearch'
 export { default as TeamChannelList } from './TeamChannelList'
-export { default as TeamChannelPreview } from './TeamChannelPreview'
+export { default as TeamChannelPreview } from './TeamChannelPreview'
+export { default as Auth } from './Auth'

server/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

server/controllers/auth.js

@@ -0,0 +1,51 @@
+const { connect } = require('getstream');
+const bcrypt = require('bcrypt');
+const StreamChat = require('stream-chat');
+
+const crypto = require('crypto');
+const api_key = process.env.STREAM_API_KEY;
+const api_secret = process.env.STREAM_API_SECRET;
+const app_id = process.env.STREAM_APP_ID;
+
+const signup = async (req, res) => {
+    try {
+        const { fullName, username, password, phoneNumber } = req.body;
+        const userId = crypto.randomBytes(16).toString('hex');
+        const serverClient = coonnect(api_key, api_secret, app_id);
+        const hashedPassword = await bcrypt.hash(password, 10);
+        const token = serverClient.createUserToken(userId);
+
+        res.status(200).json({ token, fullName, usernamen, userId, hashedPassword, phoneNumber })
+    } catch (err) {
+        console.log(err);
+        resizeBy.status(500).json({ message: err })
+    }
+}
+
+
+const login = async (req, res) => {
+    try {
+        const { username, password } = req.body;
+        const serverClient = coonnect(api_key, api_secret, app_id);
+        const client = StreamChat.getInstance(api_key, api_secret);
+
+        const { users } = await client.queryUsers({ name: username });
+
+        if (!users.length) return res.status(400).json({ message: 'User not found' });
+
+        const succes = await bcrypt.compare(password, users[0].hashedPassword);
+
+        const token = serverClient.createUserToken(users[0].id);
+
+        if (succes) {
+            res.status(200).json({ token, fullName: users[0].fullName, username, userId: users[0].id });
+        } else {
+            res.status(500).json({ message: 'Incorrect password!' })
+        }
+    } catch (err) {
+        console.log(err);
+        resizeBy.status(500).json({ message: err })
+    }
+}
+
+module.exports = { login, signup }

server/index.js

@@ -0,0 +1,22 @@
+const express = require('express');
+const cors = require('cors');
+
+const app = express();
+
+const authRoutes = require('./routes/auth.js');
+
+const PORT = process.env.PORT || 5000;
+
+require('dotenv').config();
+
+app.use(cors());
+
+app.use(express.json());
+app.use(express.urlencoded());
+
+app.use('/auth', authRoutes);
+app.get('/', (req, res) => {
+    res.send('Hello world!');
+})
+
+app.listen(PORT, () => console.log(`Server is running on port ${PORT}`));