Merge pull request #851 from MuckRock/841-unverified

Show message and links to unverified users
MuckRock · Nov 21, 2024 · c30c3a0 · c30c3a0
2 parents 74ef31f + 3dbc847
commit c30c3a0
Show file tree

Hide file tree

Showing 12 changed files with 177 additions and 38 deletions.
diff --git a/src/config/config.js b/src/config/config.js
@@ -37,6 +37,11 @@ export const SIGN_IN_URL = new URL(DC_LOGIN, DC_BASE).toString();
 export const SIGN_UP_URL = new URL(SQUARELET_SIGNUP, SQUARELET_BASE).toString();
 export const SIGN_OUT_URL = new URL(DC_LOGOUT, DC_BASE).toString();
 
+export const VERIFICATION_FORM_URL =
+  "https://airtable.com/app93Yt5cwdVWTnqn/pagogIhgB1jZTzq00/form";
+export const SQUARELET_ORGS_URL =
+  "https://accounts.muckrock.com/organizations/";
+
 export const LANGUAGES = [
   ["US English", "en", "🇺🇸"],
   ["Deutsche", "de", "🇩🇪"],

diff --git a/src/langs/json/en.json b/src/langs/json/en.json
@@ -62,8 +62,6 @@
     "update": "Update",
     "dismiss": "Dismiss",
     "dispatch": "Dispatch",
-    "organize": "Organize",
-    "run": "Run",
     "required": "This field is required"
   },
   "dialogReprocessDialog": {
@@ -185,6 +183,13 @@
       "refreshOn": "Credit allowance will reset on {date}"
     }
   },
+  "unverified": {
+    "verify": "Before you can upload documents, we need to verify your account. DocumentCloud verification is available to newsrooms, academic institutions, researchers, legal clinics and non-profits that have a track record of posting vetted primary source materials in the public interest. If you are working with an eligible organization, please join their organization account.",
+    "allowed_actions": "If you are not eligible for verification, you can still search the public repository, organize documents you're interested in into projects, make private notes, and collaborate on editing and annotating documents other users invite you to.",
+    "requestVerificationAction": "Request verification",
+    "orgs": "Search organizations",
+    "faq": "Read more about verification in our FAQ"
+  },
   "documents": {
     "yourDocuments": "Your Documents",
     "accessDocuments": "Your {access}Documents",
@@ -539,7 +544,6 @@
     "addons": "Add-Ons",
     "documents": "Documents",
     "unknown": "Unknown",
-    "totalCount": "{n} active {n, plural, one {process} other {processes}}",
     "download": "Download file"
   },
   "feedback": {

diff --git a/src/lib/components/accounts/Unverified.svelte b/src/lib/components/accounts/Unverified.svelte
@@ -0,0 +1,70 @@
+<!-- @component
+This component displays anywhere we need to explain verification to
+a user who is logged in but has `verified_journalist = false`.
+-->
+<script lang="ts">
+  import type { Nullable, User } from "$lib/api/types";
+
+  import { _ } from "svelte-i18n";
+  import { Unverified24 } from "svelte-octicons";
+
+  import Button from "../common/Button.svelte";
+  import Flex from "../common/Flex.svelte";
+  import Tip from "../common/Tip.svelte";
+
+  import {
+    APP_URL,
+    SQUARELET_ORGS_URL,
+    VERIFICATION_FORM_URL,
+  } from "@/config/config.js";
+  import { isOrg } from "$lib/api/accounts";
+
+  export let user: Nullable<User> = null;
+
+  const FAQ = `${APP_URL}help/faq#verification`;
+
+  function prefill(form_url: string, user: Nullable<User>) {
+    if (!user) return form_url;
+
+    const url = new URL(form_url);
+
+    const accountUrl = `https://accounts.muckrock.com/users/${user.username}/`;
+    const orgAccountUrl = isOrg(user.organization)
+      ? `https://accounts.muckrock.com/organizations/${user.organization.slug}`
+      : "";
+
+    const params = {
+      "prefill_MR User Email": user.email ?? "",
+      "prefill_MR User Name": user.username ?? "",
+      "prefill_MR User Account URL": accountUrl,
+      "prefill_MR Organization Account URL": orgAccountUrl,
+    };
+
+    url.search = new URLSearchParams(params).toString();
+
+    return url.href;
+  }
+</script>
+
+<Tip>
+  <Unverified24 slot="icon" />
+  <p>{$_("unverified.verify")}</p>
+  <Flex class="buttons" gap={1}>
+    <Button mode="primary" href={SQUARELET_ORGS_URL} target="_blank">
+      {$_("unverified.orgs")}
+    </Button>
+    <Button
+      mode="primary"
+      href={prefill(VERIFICATION_FORM_URL, user)}
+      target="_blank"
+    >
+      {$_("unverified.requestVerificationAction")}
+    </Button>
+  </Flex>
+  <p>{$_("unverified.allowed_actions")}</p>
+  <p>
+    <a href={FAQ} target="_blank">
+      {$_("unverified.faq")}
+    </a>
+  </p>
+</Tip>
diff --git a/src/lib/components/accounts/stories/Unverified.stories.svelte b/src/lib/components/accounts/stories/Unverified.stories.svelte
@@ -0,0 +1,18 @@
+<script context="module" lang="ts">
+  import { Story } from "@storybook/addon-svelte-csf";
+  import Unverified from "../Unverified.svelte";
+
+  import { me } from "@/test/fixtures/accounts";
+
+  export const meta = {
+    title: "Components / Accounts / Unverified",
+    component: Unverified,
+    parameters: { layout: "centered" },
+  };
+
+  const user = { ...me, verified_journalist: false };
+</script>
+
+<Story name="default">
+  <Unverified {user} />
+</Story>
diff --git a/src/lib/components/common/Tip.svelte b/src/lib/components/common/Tip.svelte
@@ -14,25 +14,26 @@
 <style>
   .tip {
     display: flex;
+    align-items: flex-start;
     gap: var(--gap, 1rem);
     padding: var(--padding, 1rem);
     border-radius: var(--border-radius, 1rem);
     color: var(--color, var(--gray-5, #233944));
     fill: var(--fill, var(--gray-4, #5c717c));
     background-color: var(--background-color, var(--gray-1, #f5f6f7));
     border: 1px solid var(--border-color, var(--gray-3, #99a8b3));
-
-    font-weight: var(--font-semibold);
   }
   .icon {
     display: flex;
     align-items: center;
   }
   .inner {
+    margin-top: 0.125rem;
     width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    gap: var(--font-md);
   }
   .tip.normal {
     color: var(--yellow-5);

diff --git a/src/lib/components/common/stories/Tip.stories.svelte b/src/lib/components/common/stories/Tip.stories.svelte
@@ -24,7 +24,7 @@
 
 <Story name="With Icon" let:args>
   <Tip {...args}>
-    <Pin slot="icon" />
+    <Pin size={1.5} slot="icon" />
     Pinned items will appear here.
   </Tip>
 </Story>

diff --git a/src/lib/components/documents/ResultsList.svelte b/src/lib/components/documents/ResultsList.svelte
@@ -102,9 +102,9 @@
 </script>
 
 <div class="container" data-sveltekit-preload-data={preload}>
-  <slot name="start" />
-  {#each results as document (document.id)}
-    <Flex direction="column">
+  <Flex direction="column">
+    <slot name="start" />
+    {#each results as document (document.id)}
       <Flex gap={0.625} align="center">
         {#if !embed}
           <label>
@@ -126,13 +126,14 @@
       {#if document.note_highlights}
         <NoteHighlights {document} />
       {/if}
-    </Flex>
-  {:else}
-    <Empty icon={Search24}>
-      <h2>{$_("noDocuments.noSearchResults")}</h2>
-      <p>{$_("noDocuments.queryNoResults")}</p>
-    </Empty>
-  {/each}
+    {:else}
+      <Empty icon={Search24}>
+        <h2>{$_("noDocuments.noSearchResults")}</h2>
+        <p>{$_("noDocuments.queryNoResults")}</p>
+      </Empty>
+    {/each}
+  </Flex>
+
   <div bind:this={end} class="end">
     {#if next}
       <Button

diff --git a/src/lib/components/documents/stories/ResultsList.stories.svelte b/src/lib/components/documents/stories/ResultsList.stories.svelte
@@ -4,6 +4,9 @@
   import { Story } from "@storybook/addon-svelte-csf";
   import ResultsList from "../ResultsList.svelte";
   import Pending from "../Pending.svelte";
+  import Unverified from "../../accounts/Unverified.svelte";
+
+  import { me } from "@/test/fixtures/accounts";
 
   // typescript complains without the type assertion
   import searchResults from "@/test/fixtures/documents/search-highlight.json";
@@ -23,6 +26,8 @@
     component: ResultsList,
     tags: ["autodocs"],
   };
+
+  const user = { ...me, verified_journalist: false };
 </script>
 
 <Story name="With Results">
@@ -46,3 +51,9 @@
 <Story name="Highlighted">
   <ResultsList results={highlighted} {count} {next} />
 </Story>
+
+<Story name="Unverified user">
+  <ResultsList {results} {count} {next}>
+    <Unverified {user} slot="start" />
+  </ResultsList>
+</Story>
diff --git a/src/lib/components/forms/DocumentUpload.svelte b/src/lib/components/forms/DocumentUpload.svelte
@@ -50,6 +50,7 @@ progress through the three-part upload process.
   import FieldLabel from "../common/FieldLabel.svelte";
   import Flex from "../common/Flex.svelte";
   import Premium from "../common/Premium.svelte";
+  import Unverified from "../accounts/Unverified.svelte";
 
   import AccessLevel from "../inputs/AccessLevel.svelte";
   import Dropzone from "../inputs/Dropzone.svelte";
@@ -67,12 +68,14 @@ progress through the three-part upload process.
     isWithinSizeLimit,
   } from "$lib/utils/files";
   import { getCsrfToken } from "$lib/utils/api";
+  import { getCurrentUser } from "$lib/utils/permissions";
   import { getProcessLoader } from "../processing/ProcessContext.svelte";
 
   export let files: File[] = getFilesToUpload();
   export let projects: Project[] = [];
+  export let user = getCurrentUser();
+  export let csrf_token: Maybe<string> = undefined;
 
-  let csrf_token: Maybe<string>;
   let fileDropActive: boolean;
 
   /**
@@ -122,6 +125,8 @@ progress through the three-part upload process.
 
   $: exceedsSizeLimit = files.some((file) => !isWithinSizeLimit(file));
 
+  $: disabled = !$user?.verified_journalist || loading || !csrf_token;
+
   // consume any files passed in
   $: if (files.length > 0) {
     addFiles(files);
@@ -160,6 +165,7 @@ progress through the three-part upload process.
   }
 
   function onPaste(e: ClipboardEvent) {
+    if (disabled) return;
     const { clipboardData } = e;
     if (!clipboardData) return;
     addFiles(clipboardData.files);
@@ -292,7 +298,7 @@ progress through the three-part upload process.
 
 <svelte:window on:paste={onPaste} />
 
-<Dropzone bind:active={fileDropActive} onDrop={addFiles} disabled={loading}>
+<Dropzone bind:active={fileDropActive} onDrop={addFiles} {disabled}>
   <form
     method="post"
     enctype="multipart/form-data"
@@ -302,14 +308,15 @@ progress through the three-part upload process.
     <Flex gap={1} align="stretch" wrap>
       <div class="files" class:active={fileDropActive}>
         <header>
-          <h1 class="title">{$_("uploadDialog.title")}</h1>
-          <p class="description">
-            {$_("uploadDialog.description")}
-          </p>
+          {#if $user?.verified_journalist}
+            <h1 class="title">{$_("uploadDialog.title")}</h1>
+            <p class="description">
+              {$_("uploadDialog.description")}
+            </p>
+          {:else}
+            <Unverified user={$user} />
+          {/if}
         </header>
-        <!-- Add any header and messaging using this slot -->
-        <slot />
-
         <div class="fileList" class:empty>
           {#each Object.entries(STATUS) as [id, status] (id)}
             <UploadListItem
@@ -323,9 +330,9 @@ progress through the three-part upload process.
             </Empty>
           {/each}
         </div>
-        <div class="fileUpload" class:disabled={loading}>
+        <div class="fileUpload" class:disabled>
           <Flex align="center">
-            <FileInput multiple onFileSelect={addFiles} disabled={loading}>
+            <FileInput multiple onFileSelect={addFiles} {disabled}>
               <Paperclip16 />
               {$_("uploadDialog.selectFiles")}
             </FileInput>
@@ -350,7 +357,7 @@ progress through the three-part upload process.
             type="submit"
             full
             mode="primary"
-            disabled={loading || exceedsSizeLimit || !csrf_token}
+            disabled={disabled || exceedsSizeLimit || empty}
           >
             <Upload16 />{$_("uploadDialog.beginUpload")}
           </Button>
@@ -406,7 +413,9 @@ progress through the three-part upload process.
             </Field>
             <Field inline slot="basic">
               <Switch name="revision_control" disabled />
-              <FieldLabel premium>Revision Control</FieldLabel>
+              <FieldLabel premium>
+                {$_("uploadDialog.revisionControl")}
+              </FieldLabel>
               <p slot="help">
                 {$_("uploadDialog.revisionControlHelp")}
               </p>

diff --git a/src/lib/components/forms/stories/DocumentUpload.stories.svelte b/src/lib/components/forms/stories/DocumentUpload.stories.svelte
@@ -1,6 +1,10 @@
 <script context="module" lang="ts">
+  import { writable } from "svelte/store";
   import { Story, Template } from "@storybook/addon-svelte-csf";
   import DocumentUpload from "../DocumentUpload.svelte";
+  import Unverified from "../../accounts/Unverified.svelte";
+
+  import { me } from "@/test/fixtures/accounts";
 
   export const meta = {
     title: "Forms / Document Upload",
@@ -11,6 +15,8 @@
   const args = {
     files: [],
   };
+
+  const user = { ...me, verified_journalist: false };
 </script>
 
 <Template let:args>
@@ -48,6 +54,8 @@
   }}
 />
 
+<Story name="Unverified user" args={{ ...args, user: writable(user) }} />
+
 <Story
   name="With Long File Name"
   args={{