invite new user

2023-10-17 21:04:01 +01:00 · 2023-10-17 21:04:01 +01:00 · b646b28a66
parent 1402cf392e
commit b646b28a66
6 changed files with 191 additions and 34 deletions
--- a/src/App.svelte
+++ b/src/App.svelte
@ -8,6 +8,7 @@
    import ListView from "./routes/Lists/ListView.svelte";
    import ListCreate from "./routes/Lists/ListCreate.svelte";
    import ListMembers from "./routes/Lists/ListMembers.svelte";
+    import AcceptInvitation from "./routes/AcceptInvitation.svelte";

  export let url = "";

@ -17,6 +18,7 @@
  <Route path="/register/emailVerify" component={EmailVerify} />
  <Route path="/register" component={Register} />
  <Route path="/login" component={Login} />
+  <Route path="/accept_list_invitation" component={AcceptInvitation} />
  <Route path="/list/:id/members" component={ListMembers} />
  <Route path="/list/:id" component={ListView} />
  <Route path="/lists/create" component={ListCreate} />
--- a/src/routes/AcceptInvitation.svelte
+++ b/src/routes/AcceptInvitation.svelte
@ -0,0 +1,132 @@
+<script>
+  import { Link } from "svelte-navigator";
+  import Header from "../lib/Header.svelte";
+  import { account, loggedInUser, teams } from "../lib/appwrite";
+  import { navigate } from "svelte-navigator/src/history";
+
+  const searchParams = new URLSearchParams(document.location.search);
+  let confirmed = true;
+  let alreadyConfirmed = false;
+  let newUser = true;
+
+  let name = "";
+  let email = "";
+  let password = "";
+
+  let error;
+
+  function updateUser(e) {
+    e.preventDefault();
+
+    account
+      .updateName(name)
+      .then((r) => {
+        account
+          .updatePassword(password)
+          .then((r) => {
+            navigate("/", {});
+          })
+          .catch((r) => {
+            error.innerText = r;
+          });
+      })
+      .catch((r) => {
+        error.innerText = r;
+      });
+  }
+
+  if (
+    (loggedInUser !== null &&
+      searchParams.get("userId") == loggedInUser["$id"]) ||
+    loggedInUser == null
+  ) {
+    teams
+      .updateMembershipStatus(
+        searchParams.get("teamId"),
+        searchParams.get("membershipId"),
+        searchParams.get("userId"),
+        searchParams.get("secret"),
+      )
+      .then((r) => {
+        console.log(r);
+        if (r.confirm == true) {
+          confirmed = true;
+        }
+
+        if (r.userName == r.userEmail) {
+          email = r.userEmail;
+          newUser = true;
+        }
+      })
+      .catch((r) => {
+        if (r == "AppwriteException: Membership is already confirmed.") {
+          alreadyConfirmed = true;
+        }
+      });
+  }
+</script>
+
+<main class="container m-5">
+  {#if loggedInUser !== null}
+    <Header />
+  {/if}
+  <div class="my-5">
+    {#if alreadyConfirmed}
+      This invitation has already been accepted.
+      <Link class="text-blue-400" to="/">Go home</Link>
+    {:else if loggedInUser !== null && searchParams.get("userId") !== loggedInUser["$id"]}
+      You're trying to accept an invitation for a different user. Please sign
+      out to accept this invitation.
+    {:else if confirmed == true}
+      Invitation confirmed!
+
+      {#if newUser == true}
+        Welcome to Tehillim Split! Complete your new user profile below.
+
+        <form on:submit={updateUser}>
+          <fieldset
+            class="container justify-center md:m-10 m-2 p-2 border border-black dark:border-current"
+          >
+            <legend>Register for Tehillim Split</legend>
+            <div class="my-2">
+              <input
+                placeholder="Name"
+                class="dark:bg-gray-500 dark:placeholder-white border border-black dark:border-current rounded p-1"
+                type="text"
+                name="name"
+                bind:value={name}
+              />
+            </div>
+
+            <div class="my-2">
+              <input
+                placeholder="Email address"
+                class="dark:bg-gray-600 bg-gray-300 dark:text-gray-300 dark:placeholder-white border border-black dark:border-current rounded p-1"
+                type="email"
+                name="email"
+                bind:value={email}
+                disabled
+              />
+            </div>
+
+            <div class="my-2">
+              <input
+                placeholder="Password"
+                class="dark:bg-gray-500 dark:placeholder-white border border-black dark:border-current rounded p-1"
+                type="password"
+                name="password"
+                bind:value={password}
+              />
+            </div>
+
+            <button
+              class="dark:bg-gray-600 bg-gray-400 border p-1 mt-2 rounded"
+              type="submit">Register</button
+            >
+            <p class="text-red-600" bind:this={error}></p>
+          </fieldset>
+        </form>
+      {/if}
+    {:else}{/if}
+  </div>
+</main>
--- a/src/routes/Lists/ListCreate.svelte
+++ b/src/routes/Lists/ListCreate.svelte
@ -8,6 +8,7 @@
    loggedInUser,
    teams,
  } from "../../lib/appwrite";
+    import { navigate } from "svelte-navigator/src/history";

  let listname = "";
  let requireLoggedIn = false;
@ -22,26 +23,24 @@
        owner_id: loggedInUser["$id"],
      })
      .then((r) => {
-        teams.create(r["$id"], listname).then((r) => {
+        teams.create(r["$id"], listname, ["admin"]).then((r) => {
          let permissions = [
            Permission.read(Role.user(loggedInUser["$id"])),
            Permission.read(Role.team(r["$id"])),
-            Permission.write(Role.team("admins-" + r["$id"])),
          ];

          if (requireLoggedIn == false) {
            permissions.push(Permission.read(Role.any()));
          }

-          teams.create("admins-" + r["$id"], listname + " Admins").then(() => {
-            console.log(r);
-            database.updateDocument(
-              "tehillim-split",
-              "lists",
-              r["$id"],
-              {},
-              permissions,
-            );
+          database.updateDocument(
+            "tehillim-split",
+            "lists",
+            r["$id"],
+            {},
+            permissions,
+          ).then(() => {
+            navigate('/list/' + r["$id"], {});
          });
        });
        console.log(r);
--- a/src/routes/Lists/ListMembers.svelte
+++ b/src/routes/Lists/ListMembers.svelte
@ -7,16 +7,24 @@

  let list = database.getDocument("tehillim-split", "lists", id);
  let members = teams.listMemberships(id);
-  let adminMembers = teams.listMemberships("admins-" + id);

-  const memberIndex = (adminMembers, i) => {
-    console.log(adminMembers);
-    let index = adminMembers.memberships.findIndex((e) => e.userId == i.userId);
+  const rolesIndex = (user, role) => {
+    let index = user.roles.findIndex((e) => e == role);
    return index;
  };

  function inviteMember() {
-    prompt("Enter member email address")
+    let email = prompt("Enter member email address");
+    if (email !== "") {
+      teams.createMembership(
+        id,
+        [],
+        email,
+        undefined,
+        undefined,
+        "http://localhost:5173/accept_list_invitation",
+      );
+    }
  }
 </script>

@ -27,17 +35,17 @@
    {#await members}
      Loading...
    {:then members}
-      {#await adminMembers then adminMembers}
-        {#each members.memberships as member}
-          <div class="m-1">
-            {member.userName} - {member.userEmail}
-            {#if memberIndex(adminMembers, member) !== -1}
-              <span class="border p-1">List Admin</span>
-            {/if}
-          </div>
-        {/each}
-        <Link class="text-blue-400" to="#" on:click={inviteMember}>Invite member</Link>
-      {/await}
+      {#each members.memberships as member}
+        <div class="m-1">
+          {member.userName} - {member.userEmail}
+          {#if rolesIndex(member, 'admin') !== -1}
+            <span class="border p-1">List Admin</span>
+          {/if}
+        </div>
+      {/each}
+      <Link class="text-blue-400" to="#" on:click={inviteMember}
+        >Invite member</Link
+      >
    {/await}
  </div>
 </main>
--- a/src/routes/Login.svelte
+++ b/src/routes/Login.svelte
@ -1,9 +1,10 @@
 <script>
  import { navigate } from "svelte-navigator/src/history";
  import { account, loggedInUser } from "../lib/appwrite";
-    import { useFocus } from "svelte-navigator";
+  import { Link, useFocus } from "svelte-navigator";

  const registerFocus = useFocus();
+  const urlParams = new URLSearchParams(document.location.search);

  if (loggedInUser !== null) {
    console.log(loggedInUser);
@ -27,7 +28,11 @@
      .createEmailSession(email, password)
      .then((r) => {
        // location.href = "/";
-        navigate("/", {});
+        if (urlParams.get("redirect_uri") == null) {
+          navigate("/", {});
+        } else {
+          navigate(urlParams.get("redirect_uri"), {});
+        }
      })
      .catch((e) => {
        submitButton.removeAttribute("disabled");
@ -72,10 +77,12 @@
      type="submit"
      bind:this={submitButton}>Log In</button
    >
-    <button
+    <Link
      class="dark:bg-gray-600 bg-gray-400 border p-1 mt-2 rounded"
      type="button"
-      on:click={() => navigate("/register", {})}>Go to Register</button
+      to="/register{urlParams.get('redirect_uri') !== null
+        ? '?redirect_uri=' + encodeURIComponent(urlParams.get('redirect_uri'))
+        : undefined}">Go to Register</Link
    ><br />
    <p class="text-red-600" bind:this={error}></p>
  </fieldset>
--- a/src/routes/Register.svelte
+++ b/src/routes/Register.svelte
@ -1,6 +1,9 @@
 <script>
  import { navigate } from "svelte-navigator/src/history";
  import { ID, account } from "../lib/appwrite";
+  import { Link } from "svelte-navigator";
+
+  const urlParams = new URLSearchParams(document.location.search);

  let name = "";
  let email = "";
@ -21,7 +24,11 @@
    account
      .createVerification("http://localhost:5173/register/emailVerify")
      .then((r) => {
-        navigate("/");
+        if (urlParams.get("redirect_uri") == null) {
+          navigate("/", {});
+        } else {
+          navigate(urlParams.get("redirect_uri"), {});
+        }
      })
      .catch((e) => (error.innerText = e));
  }
@ -67,10 +74,12 @@
      class="dark:bg-gray-600 bg-gray-400 border p-1 mt-2 rounded"
      type="submit">Register</button
    >
-    <button
+    <Link
      class="dark:bg-gray-600 bg-gray-400 border p-1 mt-2 rounded"
      type="button"
-      on:click={() => navigate("/login")}>Go to Log In</button
+      to="/login{urlParams.get('redirect_uri') !== null
+        ? '?redirect_uri=' + encodeURIComponent(urlParams.get('redirect_uri'))
+        : undefined}">Go to Log In</Link
    ><br />
    <p class="text-red-600" bind:this={error}></p>
  </fieldset>