anonymous login

functions/src/helpers.ts

@@ -1,3 +1,5 @@
+
+
 export function logBase(x: number, b: number) {
     return Math.log(x) / Math.log(b);
 }

public/i18n/ar.json

@@ -78,6 +78,7 @@
     "Room": "غرفة",
     "Rooms": "الغرف",
     "Room Allocation": "تخصيص الغرف",
+    "Send a link to anonymous users": "إرسال رابط للمستخدمين المجهولين",
     "Settings": "الإعدادات",
     "Show division into rooms": "إظهار التقسيم إلى الغرف",
     "So you can communicate": "حتى تتمكن من التواصل",

public/i18n/de.json

@@ -78,6 +78,7 @@
     "Room": "Raum",
     "Rooms": "Räume",
     "Room Allocation": "Raumzuweisung",
+    "Send a link to anonymous users": "Link an anonyme Benutzer senden",
     "Settings": "Einstellungen",
     "Show": "Anzeigen",
     "Show division into rooms": "Raumaufteilung anzeigen",

public/i18n/en.json

@@ -78,6 +78,7 @@
     "Room": "Room",
     "Rooms": "Rooms",
     "Room Allocation": "Room Allocation",
+    "Send a link to anonymous users": "Send a link to anonymous users",
     "Settings": "Settings",
     "Show": "Show",
     "Show division into rooms": "Show division into rooms",

public/i18n/es.json

@@ -77,6 +77,7 @@
     "Room": "Sala",
     "Rooms": "Salas",
     "Room Allocation": "Asignación de Sala",
+    "Send a link to anonymous users": "Enviar un enlace a usuarios anónimos",
     "Settings": "Configuraciones",
     "Show": "Mostrar",
     "Show division into rooms": "Mostrar división en salas",

public/i18n/he.json

@@ -78,6 +78,7 @@
     "Room": "חדר",
     "Rooms": "חדרים",
     "Room Allocation": "חלוקה לחדרים",
+    "Send a link to anonymous users": "שליחת קישור למשתמשים אנונימיים",
     "Settings": "הגדרות",
     "Show division into rooms": "הציג/י  חלוקה לחדרים",
     "Show": "הצג ",

public/i18n/nl.json

@@ -77,6 +77,7 @@
     "Room": "Kamer",
     "Rooms": "Kamers",
     "Room Allocation": "Kamerindeling",
+    "Send a link to anonymous users": "Stuur een link naar anonieme gebruikers",
     "Settings": "Instellingen",
     "Show": "Weergeven",
     "Show division into rooms": "Toon verdeling in kamers",

src/App.tsx

@@ -2,7 +2,7 @@
 
 // Third party imports
 import { useTranslation } from "react-i18next";
-import { Outlet, useNavigate } from "react-router-dom";
+import { Outlet, useNavigate, useParams } from "react-router-dom";
 import { t } from "i18next";
 
 // Firebase functions
@@ -38,10 +38,13 @@
     const dispatch = useDispatch();
     const { i18n } = useTranslation();
     const user = useAppSelector(userSelector);
+    const {anonymous} = useParams();
+
+
 
     const [showSignAgreement, setShowSignAgreement] = useState(false);
     const [agreement, setAgreement] = useState<string>("");
-    const [visualViewportHeight] = useState(window.visualViewport?.height || 0);
+    const [visualViewportHeight, setVisualViewportHeight] = useState(window.visualViewport?.height || 0);
 
     function updateUserToStore(user: User | null) {
         dispatch(setUser(user));
@@ -51,9 +54,7 @@
         dispatch(setFontSize(fontSize));
     }
 
-    function navigateToInitialLocationCB(pathname: string) {
-        navigate(pathname);
-    }
+
 
     function resetStoreCB() {
         dispatch(resetStatements());
@@ -76,9 +77,10 @@
 
     useEffect(() => {
         const usub: Unsubscribe = listenToAuth(
+            anonymous === "true" ? true : false,
             updateUserToStore,
             updateFonSize,
-            navigateToInitialLocationCB,
+            navigate,
             resetStoreCB,
         );
 
@@ -88,31 +90,31 @@
     }, []);
 
     // TODO: Check if this is needed. If not, remove it.
-    // useEffect(() => {
-    //     window.visualViewport?.addEventListener("resize", (event: any) => {
-    //         setVisualViewportHeight(event.target?.height || 0);
-    //         document.body.style.height = `${event.target?.height}px`;
-
-    //         //change html height to visualViewportHeight state
-    //         const html = document.querySelector("html");
-    //         if (html) {
-    //             const html = document.querySelector("html") as HTMLElement;
-    //             html.style.height = `${event.target?.height}px`;
-    //         }
-
-    //         //chage height of .page class to visualViewportHeight state
-    //         const page = document.querySelector(".page");
-    //         if (page) {
-    //             const page = document.querySelector(".page") as HTMLElement;
-    //             page.style.height = `${event.target?.height}px`;
-    //         }
-    //     });
-
-    //     return () => {
-    //         window.removeEventListener("resize", () => {console.log("window.removeEventListener");});
-    //         window.visualViewport?.addEventListener("resize", () => {});
-    //     };
-    // }, []);
+    useEffect(() => {
+        window.visualViewport?.addEventListener("resize", (event: any) => {
+            setVisualViewportHeight(event.target?.height || 0);
+            document.body.style.height = `${event.target?.height}px`;
+
+            //change html height to visualViewportHeight state
+            const html = document.querySelector("html");
+            if (html) {
+                const html = document.querySelector("html") as HTMLElement;
+                html.style.height = `${event.target?.height}px`;
+            }
+
+            //chage height of .page class to visualViewportHeight state
+            const page = document.querySelector(".page");
+            if (page) {
+                const page = document.querySelector(".page") as HTMLElement;
+                page.style.height = `${event.target?.height}px`;
+            }
+        });
+
+        return () => {
+            window.removeEventListener("resize", () => {});
+            window.visualViewport?.addEventListener("resize", () => {});
+        };
+    }, []);
 
     useEffect(() => {
         if (!user) {

src/functions/db/auth.ts

@@ -14,6 +14,7 @@ import {
     getIntialLocationSessionStorage,
     setIntialLocationSessionStorage,
 } from "../general/helpers";
+import { NavigateFunction } from "react-router-dom";
 
 const provider = new GoogleAuthProvider();
 
@@ -49,21 +50,29 @@ export function googleLogin() {
         });
 }
 export function listenToAuth(
+    isAnonymous: boolean,
     cb: (user: User | null) => void,
     fontSizeCB: (fontSize: number) => void,
-    navigationCB: (path: string) => void,
+    navigate: NavigateFunction,
     resetCB: () => void,
 ): Unsubscribe {
     return onAuthStateChanged(auth, async (userFB) => {
         try {
-            if (!userFB) navigationCB("/");
+            if (!userFB && isAnonymous !== true) {
+                navigate("/");
+            }
+            if (isAnonymous && !userFB){
+
+                signAnonymously();
+            }
             if (userFB) {
                 // User is signed in
                 const user = { ...userFB };
                 if (!user.displayName)
                     user.displayName =
-                        localStorage.getItem("displayName") || "anonymous";
+                        localStorage.getItem("displayName") || `Anonymous ${Math.floor(Math.random() * 10000)}`;
                 const _user = parseUserFromFirebase(user);
+
 
                 // console.info("User is signed in")
                 if (!_user) throw new Error("user is undefined");
@@ -82,7 +91,7 @@ export function listenToAuth(
                 const initialLocation = getIntialLocationSessionStorage();
 
                 //navigate to initial location
-                if (initialLocation) navigationCB(initialLocation);
+                if (initialLocation) navigate(initialLocation);
             } else {
                 // User is signed out
                 console.info("User is signed out");

src/functions/db/statements/setStatments.ts

@@ -112,8 +112,6 @@ export const setStatmentToDB = async ({
                 ),
             );
 
-            // statementPromises.push(getUserPermissionToNotifications());
-
             // const [, , canGetNotifications] =
             await Promise.all(statementPromises);
 

src/functions/general/helpers.ts

@@ -289,3 +289,4 @@ export function parseScreensCheckBoxes(dataObj: dataObj): Screen[] {
         return [Screen.CHAT, Screen.OPTIONS, Screen.VOTE];
     }
 }
+

src/router.tsx

@@ -59,6 +59,18 @@ export const router = createBrowserRouter([
                     },
                 ],
             },
+            {
+                path: "statement-an/:anonymous/:statementId/:page",
+                element: <Statement />,
+                errorElement: <ErrorPage />,
+                children: [
+                    {
+                        path: ":sort",
+                        element: <Statement />,
+                        errorElement: <ErrorPage />,
+                    },
+                ],
+            }
         ],
     },
     {

src/view/components/icons/ShareIcon.tsx

@@ -1,4 +1,4 @@
-export default function ShareIcon({ color }: { color: string }) {
+export default function ShareIcon({ color = "blue" }: { color?: string}) {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"

src/view/pages/statement/Statement.tsx

@@ -45,6 +45,7 @@ import { RootState } from "../../../model/store";
 const Statement: FC = () => {
     // Hooks
     const { statementId } = useParams();
+
     const page = useParams().page as Screen;
 
     const navigate = useNavigate();
@@ -126,6 +127,7 @@ const Statement: FC = () => {
 
     useEffect(() => {
         if (statement) {
+
             const { shortVersion } = statementTitleToDisplay(
                 statement.statement,
                 100,

src/view/pages/statement/components/admin/AdminPage.tsx

@@ -15,6 +15,7 @@ const AdminPage = () => {
         <div className="page__main">
             <StatementSettings />
             <section className={styles.section}>
+                <h1>dfsdf dssdf sdf sdf</h1>
                 <div className="btns">
                     <div
                         className="btn"

src/view/pages/statement/components/settings/StatementSettings.module.scss

@@ -0,0 +1,6 @@
+.linkAnonymous{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap:2rem;
+}

src/view/pages/statement/components/settings/StatementSettings.tsx

@@ -1,4 +1,5 @@
 import { FC, useEffect, useState } from "react";
+import styles from "./StatementSettings.module.scss";
 
 // Statment imports
 import {
@@ -31,9 +32,7 @@ import {
 } from "../../../../../model/statements/statementsSlice";
 
 // Firestore functions
-import {
-    getStatementFromDB,
-} from "../../../../../functions/db/statements/getStatement";
+import { getStatementFromDB } from "../../../../../functions/db/statements/getStatement";
 import { listenToMembers } from "../../../../../functions/db/statements/listenToStatements";
 
 // * Statement Settings functions * //
@@ -48,6 +47,7 @@ import ResultsRange from "./ResultsRange";
 import GetVoters from "./GetVoters";
 import GetEvaluators from "./GetEvaluators";
 import CheckBoxeArea from "./CheckBoxeArea";
+import ShareIcon from "../../../../components/icons/ShareIcon";
 
 interface Props {
     simple?: boolean;
@@ -188,6 +188,18 @@ const StatementSettings: FC<Props> = () => {
         }
     }
 
+     function handleShare( ) {
+        const baseUrl = window.location.origin;
+
+        const shareData = {
+            title: t ("Delib: We create agreements together"),
+            text: t("Invited:") + statement?.statement,
+            url: `${baseUrl}/statement-an/true/${statement?.statementId}/options`,
+        };
+        navigator.share(shareData);
+    }
+
+
     const arrayOfStatementParagrphs = statement?.statement.split("\n") || [];
 
     //get all elements of the array except the first one
@@ -230,7 +242,14 @@ const StatementSettings: FC<Props> = () => {
 
                     {membership && statementId && (
                         <>
+
                             <h2>{t("Members in Group")}</h2>
+
+                            <div className={styles.linkAnonymous} onClick={handleShare}>
+                                {t("Send a link to anonymous users")}
+                                <ShareIcon  />
+                            </div>
+
                             <div className="settings__membersBox">
                                 {membership.map((member) => (
                                     <MembershipLine

src/view/pages/statement/components/settings/settingsStyle.scss

@@ -16,3 +16,4 @@
         gap: 20px;
     }
 }
+