save

awakari · Mar 22, 2024 · 4a81005 · 4a81005
1 parent af90d87
commit 4a81005
Show file tree

Hide file tree

Showing 8 changed files with 132 additions and 102 deletions.
diff --git a/web/evts.js b/web/evts.js
@@ -3,11 +3,10 @@ const Events = {
 }
 
 Events.longPoll = function (subId, deadline) {
-    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-    const audioElement = document.getElementById('audio');
-    const audioSource = audioContext.createMediaElementSource(audioElement);
-    audioElement.src = "inbox-notification.wav";
-    audioSource.connect(audioContext.destination);
+    Events.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+    Events.audioSnd = new Audio("inbox-notification.wav");
+    Events.audioSrc = Events.audioCtx.createMediaElementSource(Events.audioSnd);
+    Events.audioSrc.connect(Events.audioCtx.destination);
     let headers = {
         "X-Awakari-Group-Id": defaultGroupId,
     }
@@ -40,7 +39,11 @@ Events.longPoll = function (subId, deadline) {
         })
         .then(data => {
             if (data != null && data.hasOwnProperty("msgs") && data.msgs.length > 0) {
-                audioElement.play();
+                try {
+                    Events.audioSnd.play();
+                } catch (e) {
+                    console.log(e);
+                }
                 console.log(`Read subscription ${subId}: got ${data.msgs.length} new events`);
                 return data.msgs;
             } else {

diff --git a/web/index.html b/web/index.html
@@ -8,7 +8,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="logo-color.svg">
     <link rel="icon" href="logo-color.svg">
     <link rel="manifest" href="manifest.json">
-    <link href="select2.min.css" rel="stylesheet" />
+    <link href="select2.css" rel="stylesheet" />
 
     <meta name="msapplication-TileColor" content="#0ed3cf">
     <meta name="theme-color" content="#0ed3cf">
@@ -143,7 +143,6 @@
 
     <script src="https://accounts.google.com/gsi/client" async defer></script>
     <script src="https://unpkg.com/jwt-decode@3.1.2/build/jwt-decode.js"></script>
-    <script src="base64.min.js"></script>
     <script src="evts.js"></script>
     <script src="intcomm.js"></script>
     <script src="jquery-3.7.1.min.js"></script>
@@ -157,10 +156,6 @@
 </head>
 <body class="bg-gray-200" onload="selectMainMenu(); loadQuery(); loadStatus();">
 
-<audio id="audio" hidden="hidden">
-    Your browser does not support the audio element.
-</audio>
-
 <main>
     <header class="bg-white dark:bg-gray-900 h-screen">
         <nav x-data="{ isOpen: false }" class="p-2 sm:p-4 items-center justify-center mx-auto">
@@ -186,7 +181,7 @@
                                    spellcheck="false"
                                    required="required"
                                    type="search"
-                                   placeholder="Real-Time Search"
+                                   placeholder="Search"
                                    class="ml-1 border-0 outline-none w-52 sm:w-[480px] dark:bg-gray-800 text-md text-lg"
                                    minlength="3"/>
 <!--                            <input name="curr" id="q-curr" type="hidden"/>-->
@@ -272,7 +267,6 @@
                     <a class="text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500 lg:mx-6" href="#resources">Resources</a>
                 </div>
                 <div id="menu-default" class="flex flex-col space-y-4 lg:mt-0 lg:flex-row lg:space-y-0 text-right md:text-center md:justify-center">
-                    <a class="text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500 lg:mx-6" x-cloak @click="isOpen = !isOpen" onclick="document.getElementById('login').style.display='flex'">Sign In</a>
                     <a class="text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500 lg:mx-6" href="#about">About</a>
                     <a class="text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500 lg:mx-6" href="#use_cases">Use Cases</a>
                     <a class="text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-500 lg:mx-6" href="#solutions">Solutions</a>
@@ -405,7 +399,7 @@
             <div class="mx-auto max-w-4xl grid sm:grid-cols-1 md:grid-cols-3">
                 <span class="py-4 items-center text-center">
                     <p class="m-1 text-4xl font-semibold text-indigo-700 dark:text-indigo-500 md:pt-16">
-                        Reach everyone interested
+                        Capture the most important
                     </p>
                 </span>
                 <div class="items-center justify-center">
@@ -415,7 +409,7 @@
                 </div>
                 <div class="py-4 align-middle items-center text-center">
                     <h1 class="m-1 text-4xl font-semibold text-cyan-700 dark:text-cyan-400 md:pt-16">
-                        Capture the most important
+                        Reach everyone interested
                     </h1>
                 </div>
             </div>
@@ -431,8 +425,8 @@ <h1 class="m-1 text-4xl font-semibold text-cyan-700 dark:text-cyan-400 md:pt-16"
                 Donate
             </button>
             <button type="button" class="text-blue-500 border border-blue-500 h-8 hover:bg-blue-200 dark:hover:bg-blue-900 static w-24 rounded-md m-2"
-                    onclick="window.open('install.html', '_blank')">
-                Install
+                    onclick="window.location.assign('login.html')">
+                Start
             </button>
         </div>
 

diff --git a/web/install.html b/web/install.html
diff --git a/web/login.html b/web/login.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#0ed3ff">
+
+    <title>Awakari App</title>
+
+    <link rel="stylesheet" href="spectre-icons.min.css">
+    <link href="tailwind.output.css" rel="stylesheet">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="autocomplete.css"/>
+
+    <script src="base64.min.js"></script>
+    <script src="login.js"></script>
+
+</head>
+<body class="bg-white dark:bg-gray-900 text-slate-700 dark:text-gray-300">
+
+<nav class="text-xl flex p-1 sm:p-4 text-slate-700 dark:text-slate-200">
+    <button onclick="history.back()">
+        <svg width="26px" height="26px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M6 12H18M6 12L11 7M6 12L11 17" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                  stroke-linejoin="round"/>
+        </svg>
+    </button>
+    <span class="pl-1">Sign In</span>
+</nav>
+
+<div class="m-1 flex-1 flex flex-col space-y-2">
+    <div class="items-center justify-center flex flex-col sm:flex-row space-y-1 sm:space-y-0 sm:space-x-2">
+        <p class="col-span-2 text-center text-gray-600 dark:text-gray-400">Sign In to continue</p>
+
+        <!-- Telegram -->
+        <div class="justify-center">
+            <script async
+                    src="https://telegram.org/js/telegram-widget.js?22"
+                    data-telegram-login="AwakariBot"
+                    data-size="medium"
+                    data-onauth="handleAuthTelegram(user)"
+                    data-request-access="write"
+                    data-radius="4"
+                    data-userpic="false">
+            </script>
+        </div>
+
+        <!-- Google -->
+        <!--                    <div class="justify-center">-->
+        <!--                        <div id="g_id_onload"-->
+        <!--                             data-client_id="131943559095-6uojftc7uoscij6b4j2jm0ifo4cd6obc"-->
+        <!--                             data-context="signin"-->
+        <!--                             data-ux_mode="popup"-->
+        <!--                             data-callback="handleAuthGoogle"-->
+        <!--                             data-auto_prompt="false">-->
+        <!--                        </div>-->
+        <!--                        <div class="g_id_signin"-->
+        <!--                             data-type="standard"-->
+        <!--                             data-shape="rectangular"-->
+        <!--                             data-theme="outline"-->
+        <!--                             data-text="signin_with"-->
+        <!--                             data-size="medium"-->
+        <!--                             data-logo_alignment="left">-->
+        <!--                        </div>-->
+        <!--                    </div>-->
+    </div>
+
+    <div class="flex justify-center">
+        <span class="text-center mt-1 text-sm text-neutral-500 flex flex-col sm:flex-row">
+            <span class="whitespace-nowrap">By signing in, you agree to the</span>
+            <span class="whitespace-nowrap flex">
+                &nbsp;<a href="tos.html" class="text-gray-600 dark:text-slate-400 hover:text-slate-500">Terms of Service</a>
+                &nbsp;and
+                &nbsp;<a href="privacy.html" class="text-gray-600 dark:text-slate-400 hover:text-slate-500">Privacy Policy</a>.
+            </span>
+        </span>
+    </div>
+    <div class="flex justify-center pt-2">
+        <a href="pub.html"
+           class="col-span-2 text-center text-gray-600 dark:text-gray-400">
+            Skip
+        </a>
+    </div>
+</div>
+
+</body>
+</html>
diff --git a/web/login.js b/web/login.js
@@ -10,7 +10,7 @@ function handleAuthGoogle(response) {
     const tokenDecoded = jwt_decode(tokenEncoded);
     localStorage.setItem(keyUserId, `${tokenDecoded.iss}/${tokenDecoded.sub}`);
     localStorage.setItem(keyAuthToken, tokenEncoded);
-    window.location.reload();
+    window.location.assign("pub.html");
 }
 
 function handleAuthTelegram(user) {
@@ -19,7 +19,7 @@ function handleAuthTelegram(user) {
     localStorage.setItem(keyAuthProvider, "Telegram");
     const token = Base64.encode(JSON.stringify(user));
     localStorage.setItem(keyAuthToken, token);
-    window.location.reload();
+    window.location.assign("pub.html");
 }
 
 function logout() {
@@ -30,7 +30,7 @@ function logout() {
         localStorage.removeItem(keyUserId);
         localStorage.removeItem(keyAuthToken);
         localStorage.removeItem(keyAuthProvider);
-        window.location.reload();
+        window.location.assign("index.html");
     }
 }
 

diff --git a/web/pub.html b/web/pub.html
@@ -36,13 +36,22 @@
 </head>
 <body class="bg-white dark:bg-gray-900" onload="load()">
 <header>
-    <nav class="text-xl flex p-1 sm:p-4 text-slate-700 dark:text-slate-200">
-        <button onclick="window.location.assign('index.html')" class="mr-1">
-            <svg width="26px" height="26px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M6 12H18M6 12L11 7M6 12L11 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-        </button>
-        <span>Publishing</span>
+    <nav class="text-xl flex p-1 sm:p-4 text-neutral-600 dark:text-neutral-400 justify-center">
+        <div class="text-center min-w-[352px] w-[352px] flex space-x-2">
+            <div class="w-16 justify-self-start text-left hover:text-neutral-500">
+                <span id="exit" class="flex" onclick="logout()">
+                    <svg width="26px" height="26px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M6 12H18M6 12L11 7M6 12L11 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                    Exit
+                </span>
+            </div>
+            <div class="w-24 border-b-2 border-indigo-500 text-indigo-500">Publish</div>
+            <div class="w-24 hover:text-cyan-500" onclick="window.location.assign('sub.html')">Subscribe</div>
+            <div class="w-16 justify-self-end text-right hover:text-neutral-800 dark:hover:text-neutral-300">
+                <span id="login" onclick="window.location.assign('login.html')">Sign In</span>
+            </div>
+        </div>
     </nav>
 </header>
 <main class="text-slate-700 dark:text-gray-300">

diff --git a/web/pub.js b/web/pub.js
@@ -33,6 +33,9 @@ function load() {
     const userId = localStorage.getItem(keyUserId);
     if (userId) {
         headers["X-Awakari-User-Id"] = userId;
+        document.getElementById("exit").style.display = "block";
+    } else {
+        document.getElementById("login").style.display = "block";
     }
 
     document.getElementById("wait").style.display = "block";

diff --git a/web/query.js b/web/query.js
@@ -105,21 +105,14 @@ function loadQuery() {
     const params = new URLSearchParams(window.location.search);
     const q = params.get("q");
     if (q != null && q !== "") {
-        const userId = localStorage.getItem(keyUserId);
-        switch (userId) {
-            case null:
-                document.getElementById('login').style.display = 'flex';
-                break
-            default:
-                document.getElementById("query").value = q;
-                const expires = Date.now() + resultsStreamingTimeout;
-                getQuerySubscription(q, expires)
-                    .then(subId => {
-                        if (subId !== "") {
-                            startEventsLoading(subId, expires);
-                        }
-                    })
-        }
+        document.getElementById("query").value = q;
+        const expires = Date.now() + resultsStreamingTimeout;
+        getQuerySubscription(q, expires)
+            .then(subId => {
+                if (subId !== "") {
+                    startEventsLoading(subId, expires);
+                }
+            });
     }
 }