Revamp code to include voting without login

.gitignore

@@ -34,4 +34,4 @@ yarn-error.log*
 .vercel
 
 # typescript
-*.tsbuildinfo
+*.tsbuildinfo

components/Login.tsx

@@ -9,6 +9,8 @@ const initialValues = {
     'password': ''
 }
 
+const passRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");
+
 const Login:React.FC = () => {
 
     const [values, setValues] = useState(initialValues); 
@@ -19,24 +21,32 @@ const Login:React.FC = () => {
 
     function handleSubmit(event:React.FormEvent<HTMLFormElement>) {
         event.preventDefault();
-        call('post','api/auth/login',values)
-        .then((data)=>{
-            setNotify({
-                isOpen: true,
-                message: 'Signed In Successfully',
-                type: 'success'
-            })
-            setToken(data.token);
-            router.push('/');
-            handlelogin(true);
-        })
-        .catch((err)=>{
+        if(!passRegex.test(values.password)) {
             setNotify({
                 isOpen: true,
-                message: 'Invalid Username or Password',
+                message: 'Please enter a valid password',
                 type: 'error'
             })
-        })
+        } else {
+            call('post','api/auth/login',values)
+            .then((data)=>{
+                setNotify({
+                    isOpen: true,
+                    message: 'Signed In Successfully',
+                    type: 'success'
+                })
+                setToken(data.token);
+                router.push('/');
+                handlelogin(true, data.id);
+            })
+            .catch((err)=>{
+                setNotify({
+                    isOpen: true,
+                    message: 'Invalid Username or Password',
+                    type: 'error'
+                })
+            })
+        }
     }
 
     function onChange(event: React.ChangeEvent<HTMLInputElement>) {

components/Poll.tsx

@@ -14,8 +14,9 @@ import {
 } from "react-share";
 import { VictoryPie } from "victory";
 import Notification from '../components/Notification';
+import { useAuth } from "../context/AuthContext";
 
-const base = 'localhost:3000'
+const base = process.env.NEXT_PUBLIC_CLIENT
 
 type Option = {
     votes: number,
@@ -40,7 +41,8 @@ const Poll: React.FC<IProps> = (props) => {
   const [answer, setAnswer] = useState(false);
   const [responses, setResponses] = useState<Option[]>([]);
   const [notify, setNotify] = useState({ isOpen: false, message: '', type: '' });
-
+  const {anonId} = useAuth();
+
   useEffect(()=>{
     call('get',`api/polls/${props.poll._id}`)
     .then((data)=>{
@@ -67,7 +69,7 @@ const Poll: React.FC<IProps> = (props) => {
   }
 
   function handleVote(pollId: string,option: string) {
-    call('post',`api/polls/${pollId}`,{answer:option})
+    call('post',`api/polls/${pollId}`,{answer:option, userId: anonId})
     .then((data)=>{
         refresh();
         setNotify({
@@ -77,14 +79,7 @@ const Poll: React.FC<IProps> = (props) => {
         })
     })
     .catch((err)=>{
-        if(err.response.status===401) {
-            setNotify({
-                isOpen: true,
-                message: "Please Login or Register",
-                type: 'error'
-            })
-        }
-        else if(err.response.status===400) {
+        if(err.response.status===400) {
             setNotify({
                 isOpen: true,
                 message: "Already Voted",

components/Register.tsx

@@ -10,6 +10,8 @@ const initialValues = {
     'password': ''
 }
 
+const passRegex = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");
+
 const Register:React.FC = () => {
 
     const [values, setValues] = useState(initialValues);
@@ -20,25 +22,33 @@ const Register:React.FC = () => {
 
     function handleSubmit(event:React.FormEvent<HTMLFormElement>) {
         event.preventDefault();
-        call('post','api/auth/register',values)
-        .then((data)=>{
-            setNotify({
-                isOpen: true,
-                message: 'Registered Successfully',
-                type: 'success'
-            })
-            setToken(data.token);
-            router.push('/');
-            handlelogin(true);
-        })
-        .catch((err)=>{
+        if(!passRegex.test(values.password)) {
             setNotify({
                 isOpen: true,
-                message: 'Invalid Username, Please Sign In',
+                message: 'Please enter a strong password',
                 type: 'error'
             })
-            console.log(err);
-        })
+        } else {
+            call('post','api/auth/register',values)
+            .then((data)=>{
+                setNotify({
+                    isOpen: true,
+                    message: 'Registered Successfully',
+                    type: 'success'
+                })
+                setToken(data.token);
+                router.push('/');
+                handlelogin(true, data.id);
+            })
+            .catch((err)=>{
+                setNotify({
+                    isOpen: true,
+                    message: 'Invalid Username, Please Sign In',
+                    type: 'error'
+                })
+                console.log(err);
+            })
+        }
     }
 
     function onChange(event: React.ChangeEvent<HTMLInputElement>) {

context/AuthContext.tsx

@@ -3,7 +3,8 @@ import {isAuthenticated,setToken} from '../helpers/api'
 
 type authContextType = {
     user: boolean;
-    handlelogin: (_:boolean) => void;
+    anonId: string;
+    handlelogin: (auth :boolean, anonId ?:string) => void;
 };
 
 type Props = {
@@ -12,6 +13,7 @@ type Props = {
 
 const authContextDefaultValues: authContextType = {
     user: false,
+    anonId: "0",
     handlelogin: () => {},
 };
 
@@ -21,24 +23,33 @@ export function useAuth() {
     return useContext(AuthContext);
 }
 
-
-
 export function AuthProvider({ children }: Props) {
 
     const [user, setUser] = useState<boolean>(false);
+    const [anonId, setAnonId] = useState<string>(Math.random().toString(36));
 
     useEffect(() => {
         setUser(isAuthenticated());
         setToken(localStorage.getItem('jwtToken'));
+        const localId = localStorage.getItem('anonId');
+        if(localId)
+            setAnonId(localId)
+        else
+            localStorage.setItem('anonId', anonId)
     }, []);
 
-    const handlelogin = (auth:boolean) => {
+    const handlelogin = (auth:boolean, anonId ?: string) => {
+        if(anonId) {
+            setAnonId(anonId);
+            localStorage.setItem('anonId', anonId)
+        }
         setUser(auth);
     };
 
 
     const value = {
         user,
+        anonId,
         handlelogin,
     };
 

helpers/api.ts

@@ -1,6 +1,6 @@
 import axios,{AxiosResponse} from 'axios';
 
-const host = 'https://secret-falls-21754.herokuapp.com';
+
 
 // call this without token for logout
 export const setToken = (token:string|null) => {
@@ -17,6 +17,7 @@ export const setToken = (token:string|null) => {
 // path -> routes after host as string
 // data -> which you need to send in body
 export const call = async (method:'get'|'patch'|'post'|'delete', path:string, data?:object) => {
+  const host = process.env.NEXT_PUBLIC_HOST;
   const response = await axios[method](`${host}/${path}`, data);
   return response.data;
 };