Cleaned up authentication UI implementation.

firestore.rules

@@ -22,7 +22,7 @@ service cloud.firestore {
         ('public' in resource.data && resource.data.public) || 
         (request.auth != null && 
           ( 
-            request.auth.token.mod ||
+            ("mod" in request.auth.token && request.auth.token.mod) ||
             ('owner' in resource.data && resource.data.owner == request.auth.uid) || 
             ('collaborators' in resource.data && request.auth.uid in resource.data.collaborators) || 
             ('gallery' in resource.data && resource.data.gallery != null && isInPublicGalleryOrIsCreator(request.auth.uid, resource.data.gallery))
@@ -43,7 +43,7 @@ service cloud.firestore {
     }
     match /galleries/{gallery} {
       allow create: if request.auth != null;
-      allow read: if resource.data.public || (request.auth != null && (request.auth.uid in resource.data.curators || request.auth.uid in resource.data.creators));
+      allow read: if ("public" in resource.data && resource.data.public) || (request.auth != null && (request.auth.uid in resource.data.curators || request.auth.uid in resource.data.creators));
 
       allow update: 
         if request.auth != null && 

src/components/app/Feedback.svelte

@@ -11,6 +11,7 @@
         font-weight: normal;
         color: var(--wordplay-background);
         background: var(--wordplay-error);
+        margin-block-start: var(--wordplay-spacing);
         padding: var(--wordplay-spacing);
         border-radius: var(--wordplay-border-radius);
     }

src/components/project/CreatorList.svelte

@@ -2,7 +2,7 @@
 <script lang="ts">
     import type { Creator } from '../../db/CreatorDatabase';
     import { DB, locales } from '../../db/Database';
-    import validateEmail from '../../db/validEmail';
+    import validEmail from '../../db/validEmail';
     import CreatorView from '../app/CreatorView.svelte';
     import Feedback from '../app/Feedback.svelte';
     import Spinning from '../app/Spinning.svelte';
@@ -27,7 +27,7 @@
 
     function validCollaborator(email: string) {
         // Don't add self
-        return validateEmail(email) && email !== DB.getUserEmail();
+        return validEmail(email) && email !== DB.getUserEmail();
     }
 
     async function addCreator() {
@@ -56,7 +56,7 @@
             description={$locales.get(
                 (l) => l.ui.dialog.share.field.email.description
             )}
-            validator={validateEmail}
+            validator={validEmail}
         />
         <Button
             tip={$locales.get((l) => l.ui.dialog.share.button.submit)}

src/components/widgets/TextField.svelte

@@ -57,6 +57,10 @@
         position: relative;
     }
 
+    [disabled] {
+        color: var(--wordplay-inactive-color);
+    }
+
     input {
         width: auto;
         height: 100%;

src/db/Database.ts

@@ -140,6 +140,9 @@ export class Database {
         // Tell the projects cache.
         this.Projects.syncUser(remove);
 
+        // Tell the gallery about the new user
+        this.Galleries.clean();
+
         // Tell the settings cache.
         this.Settings.syncUser();
     }

src/db/GalleryDatabase.ts

@@ -128,7 +128,6 @@ export default class GalleryDatabase {
                 }
             }
         );
-        3;
     }
 
     /** Create a new gallery with this user as its curator. */

src/db/ProjectsDatabase.ts

@@ -149,9 +149,6 @@ export default class ProjectsDatabase {
 
         const user = this.database.getUser();
 
-        // If there's no more user, do nothing.
-        if (user === null) return;
-
         // If there's no firestore access, do nothing.
         if (firestore === undefined) return;
 
@@ -161,6 +158,9 @@ export default class ProjectsDatabase {
             this.projectsQueryUnsubscribe = undefined;
         }
 
+        // If there's no more user, stop le, do nothing.
+        if (user === null) return;
+
         // Set up the realtime projects query for the user, tracking any projects from the cloud,
         // and deleting any tracked locally that didn't appear in the snapshot.
         this.projectsQueryUnsubscribe = onSnapshot(

src/db/validEmail.ts

@@ -1,3 +1,3 @@
-const validateEmail = (text: string) => /^.+@.+\..+$/.test(text);
+const validEmail = (text: string) => /^.+@.+\..+$/.test(text);
 
-export default validateEmail;
+export default validEmail;

src/routes/login/Login.svelte

@@ -9,13 +9,14 @@
     import { getUser } from '../../components/project/Contexts';
     import { analytics, auth } from '../../db/firebase';
     import Button from '../../components/widgets/Button.svelte';
-    import validateEmail from '../../db/validEmail';
+    import validEmail from '../../db/validEmail';
     import Feedback from '../../components/app/Feedback.svelte';
     import { onMount } from 'svelte';
     import { signInWithEmailLink } from 'firebase/auth';
     import { logEvent } from 'firebase/analytics';
     import { FirebaseError } from 'firebase/app';
     import { getLoginErrorDescription } from './login';
+    import { goto } from '$app/navigation';
 
     let user = getUser();
     let success: boolean | undefined = undefined;
@@ -25,8 +26,10 @@
     let sent = false;
     let loginFeedback = '';
 
+    $: submittable = !sent && validEmail(email);
+
     async function startLogin() {
-        if (auth) {
+        if (auth && submittable) {
             try {
                 if (isSignInWithEmailLink(auth, window.location.href))
                     finishLogin();
@@ -65,11 +68,17 @@
                         window.location.href
                     )
                         .then(() => {
+                            // Remove the email we might have stored.
                             window.localStorage.removeItem('email');
+
+                            // Mark success to show feedback.
                             success = true;
 
-                            // Log login
+                            // Log login event
                             if (analytics) logEvent(analytics, 'login');
+
+                            // Remove the query on the URL so there's no attempt to login on refresh.
+                            goto('/login');
                         })
                         .catch((err) => communicateLoginFailure(err));
                 }
@@ -118,21 +127,18 @@
             (l) => l.ui.page.login.field.email.placeholder
         )}
         bind:text={email}
+        editable={!sent}
     /><Button
         submit
         tip={$locales.get((l) => l.ui.page.login.button.login)}
-        active={validateEmail(email)}
+        active={submittable}
         action={() => undefined}>&gt;</Button
     >
 </form>
-<p>
-    {#if sent === true}
-        <Feedback>{$locales.get((l) => l.ui.page.login.prompt.sent)}</Feedback>
-    {:else if success === true}
-        <Feedback
-            >{$locales.get((l) => l.ui.page.login.prompt.success)}</Feedback
-        >
-    {:else if success === false}
-        <Feedback>{loginFeedback}</Feedback>
-    {/if}
-</p>
+{#if sent === true}
+    <Feedback>{$locales.get((l) => l.ui.page.login.prompt.sent)}</Feedback>
+{:else if success === true}
+    <Feedback>{$locales.get((l) => l.ui.page.login.prompt.success)}</Feedback>
+{:else if success === false}
+    <Feedback>{loginFeedback}</Feedback>
+{/if}

src/routes/login/Profile.svelte

@@ -8,7 +8,7 @@
     import { auth } from '../../db/firebase';
     import TextField from '../../components/widgets/TextField.svelte';
     import Spinning from '../../components/app/Spinning.svelte';
-    import validateEmail from '../../db/validEmail';
+    import validEmail from '../../db/validEmail';
     import Feedback from '../../components/app/Feedback.svelte';
     import { isModerator } from '../../models/Moderation';
     import { getLoginErrorDescription } from './login';
@@ -75,7 +75,7 @@
     }
 
     function readyToDeleteAccount(email: string) {
-        return validateEmail(email) && email === user.email;
+        return validEmail(email) && email === user.email;
     }
 </script>
 
@@ -128,7 +128,7 @@
             /><Button
                 submit
                 tip={$locales.get((l) => l.ui.page.login.button.update)}
-                active={validateEmail(newEmail)}
+                active={validEmail(newEmail)}
                 action={() => undefined}>&gt;</Button
             >
             {#if changeSubmitted}<Spinning