invite new user

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} />

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>

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,
-            );
+          ).then(() => {
+            navigate('/list/' + r["$id"], {});
           });
         });
         console.log(r);

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}
+          {#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}
+      <Link class="text-blue-400" to="#" on:click={inviteMember}
+        >Invite member</Link
+      >
     {/await}
   </div>
 </main>

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 = "/";
+        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>

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>