invite new user

This commit is contained in:
Dovi Cowan 2023-10-17 21:04:01 +01:00
parent 1402cf392e
commit b646b28a66
Signed by: dcowan
GPG key ID: C110D77558FBC227
6 changed files with 191 additions and 34 deletions

View file

@ -8,6 +8,7 @@
import ListView from "./routes/Lists/ListView.svelte"; import ListView from "./routes/Lists/ListView.svelte";
import ListCreate from "./routes/Lists/ListCreate.svelte"; import ListCreate from "./routes/Lists/ListCreate.svelte";
import ListMembers from "./routes/Lists/ListMembers.svelte"; import ListMembers from "./routes/Lists/ListMembers.svelte";
import AcceptInvitation from "./routes/AcceptInvitation.svelte";
export let url = ""; export let url = "";
@ -17,6 +18,7 @@
<Route path="/register/emailVerify" component={EmailVerify} /> <Route path="/register/emailVerify" component={EmailVerify} />
<Route path="/register" component={Register} /> <Route path="/register" component={Register} />
<Route path="/login" component={Login} /> <Route path="/login" component={Login} />
<Route path="/accept_list_invitation" component={AcceptInvitation} />
<Route path="/list/:id/members" component={ListMembers} /> <Route path="/list/:id/members" component={ListMembers} />
<Route path="/list/:id" component={ListView} /> <Route path="/list/:id" component={ListView} />
<Route path="/lists/create" component={ListCreate} /> <Route path="/lists/create" component={ListCreate} />

View file

@ -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>

View file

@ -8,6 +8,7 @@
loggedInUser, loggedInUser,
teams, teams,
} from "../../lib/appwrite"; } from "../../lib/appwrite";
import { navigate } from "svelte-navigator/src/history";
let listname = ""; let listname = "";
let requireLoggedIn = false; let requireLoggedIn = false;
@ -22,26 +23,24 @@
owner_id: loggedInUser["$id"], owner_id: loggedInUser["$id"],
}) })
.then((r) => { .then((r) => {
teams.create(r["$id"], listname).then((r) => { teams.create(r["$id"], listname, ["admin"]).then((r) => {
let permissions = [ let permissions = [
Permission.read(Role.user(loggedInUser["$id"])), Permission.read(Role.user(loggedInUser["$id"])),
Permission.read(Role.team(r["$id"])), Permission.read(Role.team(r["$id"])),
Permission.write(Role.team("admins-" + r["$id"])),
]; ];
if (requireLoggedIn == false) { if (requireLoggedIn == false) {
permissions.push(Permission.read(Role.any())); permissions.push(Permission.read(Role.any()));
} }
teams.create("admins-" + r["$id"], listname + " Admins").then(() => {
console.log(r);
database.updateDocument( database.updateDocument(
"tehillim-split", "tehillim-split",
"lists", "lists",
r["$id"], r["$id"],
{}, {},
permissions, permissions,
); ).then(() => {
navigate('/list/' + r["$id"], {});
}); });
}); });
console.log(r); console.log(r);

View file

@ -7,16 +7,24 @@
let list = database.getDocument("tehillim-split", "lists", id); let list = database.getDocument("tehillim-split", "lists", id);
let members = teams.listMemberships(id); let members = teams.listMemberships(id);
let adminMembers = teams.listMemberships("admins-" + id);
const memberIndex = (adminMembers, i) => { const rolesIndex = (user, role) => {
console.log(adminMembers); let index = user.roles.findIndex((e) => e == role);
let index = adminMembers.memberships.findIndex((e) => e.userId == i.userId);
return index; return index;
}; };
function inviteMember() { 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> </script>
@ -27,17 +35,17 @@
{#await members} {#await members}
Loading... Loading...
{:then members} {:then members}
{#await adminMembers then adminMembers}
{#each members.memberships as member} {#each members.memberships as member}
<div class="m-1"> <div class="m-1">
{member.userName} - {member.userEmail} {member.userName} - {member.userEmail}
{#if memberIndex(adminMembers, member) !== -1} {#if rolesIndex(member, 'admin') !== -1}
<span class="border p-1">List Admin</span> <span class="border p-1">List Admin</span>
{/if} {/if}
</div> </div>
{/each} {/each}
<Link class="text-blue-400" to="#" on:click={inviteMember}>Invite member</Link> <Link class="text-blue-400" to="#" on:click={inviteMember}
{/await} >Invite member</Link
>
{/await} {/await}
</div> </div>
</main> </main>

View file

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

View file

@ -1,6 +1,9 @@
<script> <script>
import { navigate } from "svelte-navigator/src/history"; import { navigate } from "svelte-navigator/src/history";
import { ID, account } from "../lib/appwrite"; import { ID, account } from "../lib/appwrite";
import { Link } from "svelte-navigator";
const urlParams = new URLSearchParams(document.location.search);
let name = ""; let name = "";
let email = ""; let email = "";
@ -21,7 +24,11 @@
account account
.createVerification("http://localhost:5173/register/emailVerify") .createVerification("http://localhost:5173/register/emailVerify")
.then((r) => { .then((r) => {
navigate("/"); if (urlParams.get("redirect_uri") == null) {
navigate("/", {});
} else {
navigate(urlParams.get("redirect_uri"), {});
}
}) })
.catch((e) => (error.innerText = e)); .catch((e) => (error.innerText = e));
} }
@ -67,10 +74,12 @@
class="dark:bg-gray-600 bg-gray-400 border p-1 mt-2 rounded" class="dark:bg-gray-600 bg-gray-400 border p-1 mt-2 rounded"
type="submit">Register</button type="submit">Register</button
> >
<button <Link
class="dark:bg-gray-600 bg-gray-400 border p-1 mt-2 rounded" class="dark:bg-gray-600 bg-gray-400 border p-1 mt-2 rounded"
type="button" 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 /> ><br />
<p class="text-red-600" bind:this={error}></p> <p class="text-red-600" bind:this={error}></p>
</fieldset> </fieldset>