me/parandum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Allow users to leave groups if not owner

Browse Source
This commit is contained in:
Matthew Grove
2021-11-24 19:05:50 +00:00
parent a15032f2a1
commit 94e4bd9d43
3 changed files with 656 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
firestore.rules
View File

@@ -94,7 +94,8 @@ service cloud.firestore {
return [requiredFields, allFields];
}
allow read, delete: if isSignedIn() && (isSignedInUser() || getGroupRole(groupId) == "owner" || isAdmin()); // is current user's data or is owner of group or is admin
allow read: if isSignedIn() && (isSignedInUser() || getGroupRole(groupId) == "owner" || isAdmin()); // is current user's data or is owner of group or is admin
allow delete: if isSignedIn() && ((isSignedInUser() && getGroupRole(groupId) != "owner") || (!isSignedInUser() && getGroupRole(groupId) == "owner") || isAdmin())
allow create: if isSignedIn() && isSignedInUser() && (getRequestField("role", "") == "member" || (isAdmin() && verifyGroupFieldTypes())) && verifyCreateFields(getPossibleGroupFields());
allow update: if isSignedIn() &&
(getGroupRole(groupId) == "owner" || isAdmin()) &&

355
src/GroupPage.js
View File

@@ -19,7 +19,8 @@ import "./css/GroupPage.css";
import "./css/ConfirmationDialog.css";
import "./css/OptionsListOverlay.css";
export default withRouter(class GroupPage extends Component {
export default withRouter(
class GroupPage extends Component {
constructor(props) {
super(props);
this.state = {
@@ -35,7 +36,7 @@ export default withRouter(class GroupPage extends Component {
link: "/",
icon: <HomeRoundedIcon />,
hideTextMobile: true,
}
},
],
role: null,
groupName: "",
@@ -52,18 +53,20 @@ export default withRouter(class GroupPage extends Component {
editingUser: null,
showDeleteGroup: false,
deleteGroupLoading: false,
showLeaveGroup: false,
leaveGroupLoading: false,
};
let isMounted = true;
Object.defineProperty(this, "isMounted", {
get: () => isMounted,
set: (value) => isMounted = value,
set: (value) => (isMounted = value),
});
}
setState = (state, callback = null) => {
if (this.isMounted) super.setState(state, callback);
}
};
async componentDidMount() {
let promises = [];
@@ -92,7 +95,7 @@ export default withRouter(class GroupPage extends Component {
{
displayName: this.state.user.displayName,
uid: this.state.user.uid,
}
},
],
contributors: [],
members: [],
@@ -116,8 +119,10 @@ export default withRouter(class GroupPage extends Component {
.doc(this.props.match.params.groupId)
.get()
.then(async (groupDoc) => {
await Promise.all(groupDoc.data().sets.map((setId) => {
return this.state.db.collection("sets")
await Promise.all(
groupDoc.data().sets.map((setId) => {
return this.state.db
.collection("sets")
.doc(setId)
.get()
.then((doc) => {
@@ -126,10 +131,12 @@ export default withRouter(class GroupPage extends Component {
loading: false,
};
});
}));
})
);
return groupDoc.data();
}).catch((error) => {
})
.catch((error) => {
console.log(`Can't access group: ${error}`);
return {
display_name: "",
@@ -146,7 +153,9 @@ export default withRouter(class GroupPage extends Component {
newState.role = completedPromises[0].role;
newState.groupName = completedPromises[1].display_name;
newState.originalGroupName = completedPromises[1].display_name;
newState.memberCount = Object.keys(completedPromises[1].users).length + (Object.keys(completedPromises[1].users).includes(this.state.user.uid) ? 0 : 1);
newState.memberCount =
Object.keys(completedPromises[1].users).length +
(Object.keys(completedPromises[1].users).includes(this.state.user.uid) ? 0 : 1);
newState.joinCode = completedPromises[0].role === "owner" ? completedPromises[1].join_code : "";
this.setState(newState);
@@ -164,16 +173,19 @@ export default withRouter(class GroupPage extends Component {
}
editGroupName = () => {
this.setState({
this.setState(
{
editGroupName: true,
}, () => this.groupNameInput.focus());
}
},
() => this.groupNameInput.focus()
);
};
handleGroupNameChange = (event) => {
this.setState({
groupName: event.target.value,
});
}
};
handleInputKeypress = (event) => {
if (event.key === "Enter") {
@@ -181,21 +193,21 @@ export default withRouter(class GroupPage extends Component {
} else if (event.key === "Escape") {
this.cancelGroupRename();
}
}
};
stopLoading = () => {
this.setState({
loading: false,
editGroupName: false,
})
}
});
};
cancelGroupRename = () => {
this.setState({
editGroupName: false,
groupName: this.state.originalGroupName,
})
}
});
};
renameGroup = () => {
if (!this.state.loading && this.state.groupName.replace(" ", "") !== "") {
@@ -206,13 +218,16 @@ export default withRouter(class GroupPage extends Component {
loading: true,
});
this.state.db.collection("groups")
this.state.db
.collection("groups")
.doc(this.props.match.params.groupId)
.update({
display_name: this.state.groupName.trim(),
}).then(() => {
})
.then(() => {
this.stopLoading();
}).catch((error) => {
})
.catch((error) => {
console.log(`Couldn't update group name: ${error}`);
this.setState({
loading: false,
@@ -222,7 +237,7 @@ export default withRouter(class GroupPage extends Component {
});
}
}
}
};
removeSet = (setId) => {
let newLoadingState = {
@@ -231,21 +246,24 @@ export default withRouter(class GroupPage extends Component {
newLoadingState.sets[setId].loading = true;
this.setState(newLoadingState);
this.state.functions.removeSetFromGroup({
this.state.functions
.removeSetFromGroup({
groupId: this.props.match.params.groupId,
setId: setId,
}).then(() => {
})
.then(() => {
let newState = {
sets: this.state.sets,
};
delete newState.sets[setId];
this.setState(newState);
}).catch((error) => {
})
.catch((error) => {
console.log(`Can't remove set from group: ${error}`);
newLoadingState.sets[setId].loading = false;
this.setState(newLoadingState);
});
}
};
showEditUserRole = (role, index) => {
let user;
@@ -263,13 +281,13 @@ export default withRouter(class GroupPage extends Component {
index: index,
},
});
}
};
hideEditUserRole = () => {
this.setState({
editingUser: null,
});
}
};
editUserRole = (role) => {
if (role === this.state.editingUser.role) {
@@ -278,7 +296,8 @@ export default withRouter(class GroupPage extends Component {
});
} else {
if (role === "remove") {
this.state.db.collection("users")
this.state.db
.collection("users")
.doc(this.state.editingUser.uid)
.collection("groups")
.doc(this.props.match.params.groupId)
@@ -296,20 +315,23 @@ export default withRouter(class GroupPage extends Component {
editingUser: null,
groupUsers: groupUsers,
});
}).catch((error) => {
})
.catch((error) => {
this.setState({
editingUser: null,
});
console.log(`Couldn't change user role: ${error}`)
console.log(`Couldn't change user role: ${error}`);
});
} else {
this.state.db.collection("users")
this.state.db
.collection("users")
.doc(this.state.editingUser.uid)
.collection("groups")
.doc(this.props.match.params.groupId)
.update({
role: role,
}).then(() => {
})
.then(() => {
let groupUsers = this.state.groupUsers;
let userData;
if (this.state.editingUser.role === "owner") {
@@ -330,68 +352,101 @@ export default withRouter(class GroupPage extends Component {
editingUser: null,
groupUsers: groupUsers,
});
}).catch((error) => {
})
.catch((error) => {
this.setState({
editingUser: null,
});
console.log(`Couldn't change user role: ${error}`)
console.log(`Couldn't change user role: ${error}`);
});
}
}
}
};
showDeleteGroup = () => {
this.setState({
showDeleteGroup: true,
});
}
};
hideDeleteGroup = () => {
this.setState({
showDeleteGroup: false,
});
}
};
deleteGroup = () => {
this.setState({
deleteGroupLoading: true,
});
this.state.db.collection("groups")
this.state.db
.collection("groups")
.doc(this.props.match.params.groupId)
.delete()
.then(() => {
this.props.history.push("/groups");
}).catch((error) => {
})
.catch((error) => {
console.log(`Couldn't delete group: ${error}`);
this.setState({
deleteGroupLoading: false,
});
});
};
showLeaveGroup = () => {
this.setState({
showLeaveGroup: true,
});
};
hideLeaveGroup = () => {
this.setState({
showLeaveGroup: false,
});
};
leaveGroup = () => {
this.setState({
leaveGroupLoading: true,
});
this.state.db
.collection("users")
.doc(this.props.user.uid)
.collection("groups")
.doc(this.props.match.params.groupId)
.delete()
.then(() => {
this.props.history.push("/groups");
})
}
.catch((error) => {
console.log(`Couldn't leave group: ${error}`);
this.setState({
leaveGroupLoading: false,
});
});
};
render() {
return (
(this.state.role === "none") ?
return this.state.role === "none" ? (
<Error404 />
:
) : (
<div>
<NavBar items={this.state.navbarItems} />
<main>
{
!(this.state.role === null) &&
{!(this.state.role === null) && (
<>
<div className="page-header">
{
this.state.editGroupName && this.state.role === "owner"
?
{this.state.editGroupName && this.state.role === "owner" ? (
<h1 className="group-name-header-input-container">
<input
type="text"
onChange={this.handleGroupNameChange}
value={this.state.groupName}
onKeyDown={this.handleInputKeypress}
ref={inputEl => (this.groupNameInput = inputEl)}
ref={(inputEl) => (this.groupNameInput = inputEl)}
autoComplete="off"
/>
<Button
@@ -402,19 +457,17 @@ export default withRouter(class GroupPage extends Component {
loading={this.state.loading}
></Button>
</h1>
:
) : (
<h1 onClick={this.state.role === "owner" ? this.editGroupName : () => {}}>
{this.state.groupName}
{
this.state.role === "owner" &&
{this.state.role === "owner" && (
<span className="group-edit-icon">
<EditRoundedIcon />
</span>
}
)}
</h1>
}
{
this.state.role === "owner" &&
)}
{this.state.role === "owner" ? (
<div className="button-container">
<LinkButton
to={`/groups/${this.props.match.params.groupId}/stats`}
@@ -429,34 +482,38 @@ export default withRouter(class GroupPage extends Component {
title="Delete group"
></Button>
</div>
}
) : (
<div className="button-container">
<Button
onClick={this.showLeaveGroup}
icon={<GroupRemoveRoundedIcon />}
className="button--round"
title="Leave group"
></Button>
</div>
{
this.state.joinCode &&
)}
</div>
{this.state.joinCode && (
<div className="stat-row stat-row--inline">
<p>Join code</p>
<h2>{this.state.joinCode}</h2>
</div>
}
{
this.state.memberCount &&
)}
{this.state.memberCount && (
<div className="stat-row stat-row--inline">
<h2>{this.state.memberCount}</h2>
<p>
member
{ this.state.memberCount !== 1 && "s" }
{this.state.memberCount !== 1 && "s"}
</p>
</div>
}
)}
<div>
<h2>Sets</h2>
{
Object.keys(this.state.sets).length > 0
?
{Object.keys(this.state.sets).length > 0 ? (
<div className="group-links-container">
{
Object.keys(this.state.sets)
{Object.keys(this.state.sets)
.sort((a, b) => {
if (this.state.sets[a].displayName < this.state.sets[b].displayName) {
return -1;
@@ -466,15 +523,10 @@ export default withRouter(class GroupPage extends Component {
}
return 0;
})
.map((setId) =>
.map((setId) => (
<div key={setId} className="group-set-link">
<Link
to={`/sets/${setId}`}
>
{this.state.sets[setId].displayName}
</Link>
{
this.state.role === "owner" &&
<Link to={`/sets/${setId}`}>{this.state.sets[setId].displayName}</Link>
{this.state.role === "owner" && (
<Button
className="button--no-background"
onClick={() => this.removeSet(setId)}
@@ -483,144 +535,143 @@ export default withRouter(class GroupPage extends Component {
disabled={this.state.sets[setId].loading}
title="Remove set"
></Button>
}
)}
</div>
)
}
))}
</div>
:
<p>
This group doesn't have any sets yet!
</p>
}
) : (
<p>This group doesn't have any sets yet!</p>
)}
</div>
{
this.state.role === "owner" &&
{this.state.role === "owner" && (
<>
<div>
<h2>Members</h2>
{
this.state.groupUsers && this.state.groupUsers.owners.length > 0 &&
{this.state.groupUsers && this.state.groupUsers.owners.length > 0 && (
<>
<h3 className="group-role-header">Owners</h3>
<div className="group-links-container">
{
this.state.groupUsers.owners.map((user, index) =>
{this.state.groupUsers.owners.map((user, index) => (
<p
key={user.uid}
className={`group-set-link ${user.uid !== this.state.user.uid ? "group-set-link--enabled" : ""}`}
onClick={user.uid === this.state.user.uid ? () => { } : () => this.showEditUserRole("owner", index)}
>
{
className={`group-set-link ${
user.uid !== this.state.user.uid ? "group-set-link--enabled" : ""
}`}
onClick={
user.uid === this.state.user.uid
?
? () => {}
: () => this.showEditUserRole("owner", index)
}
>
{user.uid === this.state.user.uid ? (
"You"
:
) : (
<>
{user.displayName}
<EditRoundedIcon />
</>
}
)}
</p>
)
}
))}
</div>
</>
}
{
this.state.groupUsers && this.state.groupUsers.contributors.length > 0 &&
)}
{this.state.groupUsers && this.state.groupUsers.contributors.length > 0 && (
<>
<h3 className="group-role-header">Contributors</h3>
<div className="group-links-container">
{
this.state.groupUsers.contributors.map((user, index) =>
{this.state.groupUsers.contributors.map((user, index) => (
<p
key={user.uid}
className={`group-set-link ${user.uid !== this.state.user.uid ? "group-set-link--enabled" : ""}`}
onClick={user.uid === this.state.user.uid ? () => { } : () => this.showEditUserRole("contributor", index)}
>
{
className={`group-set-link ${
user.uid !== this.state.user.uid ? "group-set-link--enabled" : ""
}`}
onClick={
user.uid === this.state.user.uid
?
? () => {}
: () => this.showEditUserRole("contributor", index)
}
>
{user.uid === this.state.user.uid ? (
"You"
:
) : (
<>
{user.displayName}
<EditRoundedIcon />
</>
}
)}
</p>
)
}
))}
</div>
</>
}
{
this.state.groupUsers && this.state.groupUsers.members.length > 0 &&
)}
{this.state.groupUsers && this.state.groupUsers.members.length > 0 && (
<>
<h3 className="group-role-header">Members</h3>
<div className="group-links-container">
{
this.state.groupUsers.members.map((user, index) =>
{this.state.groupUsers.members.map((user, index) => (
<p
key={user.uid}
className={`group-set-link ${user.uid !== this.state.user.uid ? "group-set-link--enabled" : ""}`}
onClick={user.uid === this.state.user.uid ? () => { } : () => this.showEditUserRole("member", index)}
>
{
className={`group-set-link ${
user.uid !== this.state.user.uid ? "group-set-link--enabled" : ""
}`}
onClick={
user.uid === this.state.user.uid
?
? () => {}
: () => this.showEditUserRole("member", index)
}
>
{user.uid === this.state.user.uid ? (
"You"
:
) : (
<>
{user.displayName}
<EditRoundedIcon />
</>
}
)}
</p>
)
}
))}
</div>
</>
}
)}
</div>
{
this.state.editingUser &&
{this.state.editingUser && (
<>
<div className="overlay" onClick={this.hideEditUserRole}></div>
<div className="overlay-content options-list-overlay-content">
{
["Owner", "Contributor", "Member", "Remove"].map((role) =>
<h3
key={role}
onClick={() => this.editUserRole(role.toLowerCase())}
>
{["Owner", "Contributor", "Member", "Remove"].map((role) => (
<h3 key={role} onClick={() => this.editUserRole(role.toLowerCase())}>
{role}
</h3>
)
}
))}
<div onClick={this.hideEditUserRole}>
Cancel
</div>
<div onClick={this.hideEditUserRole}>Cancel</div>
</div>
</>
}
{
this.state.showDeleteGroup &&
)}
{this.state.showDeleteGroup && (
<ConfirmationDialog
yesFunction={this.deleteGroup}
noFunction={this.hideDeleteGroup}
message="Are you sure you want to delete this group?"
/>
}
)}
</>
}
)}
{this.state.showLeaveGroup && (
<ConfirmationDialog
yesFunction={this.leaveGroup}
noFunction={this.hideLeaveGroup}
message="Are you sure you want to leave this group?"
loading={this.state.loading}
/>
)}
</>
}
)}
</main>
<Footer />
</div>
)
);
}
})
}
);

28
test/firestore.test.js
View File

@@ -117,18 +117,42 @@ describe("Parandum Firestore database", () => {
await firebase.assertSucceeds(testDoc.get());
});
it("Can delete current user's groups", async () => {
it("Can delete current user's groups when not group owner", async () => {
const admin = getAdminFirestore();
await admin.collection("users").doc(myId).collection("groups").doc(groupOne).set({ role: "member" });
const db = getFirestore(myAuth);
const testDoc = db.collection("users").doc(myId).collection("groups").doc(groupOne);
await firebase.assertSucceeds(testDoc.delete());
});
it("Can't delete other users' groups", async () => {
it("Can't delete current user's groups when group owner", async () => {
const admin = getAdminFirestore();
await admin.collection("users").doc(myId).collection("groups").doc(groupOne).set({ role: "owner" });
const db = getFirestore(myAuth);
const testDoc = db.collection("users").doc(myId).collection("groups").doc(groupOne);
await firebase.assertFails(testDoc.delete());
});
it("Can't delete other users' groups when not group owner", async () => {
const admin = getAdminFirestore();
await admin.collection("users").doc(myId).collection("groups").doc(groupOne).set({ role: "member" });
const db = getFirestore(myAuth);
const testDoc = db.collection("users").doc(theirId).collection("groups").doc(groupOne);
await firebase.assertFails(testDoc.delete());
});
it("Can delete other users' groups when group owner", async () => {
const admin = getAdminFirestore();
await admin.collection("users").doc(myId).collection("groups").doc(groupOne).set({ role: "owner" });
const db = getFirestore(myAuth);
const testDoc = db.collection("users").doc(theirId).collection("groups").doc(groupOne);
await firebase.assertSucceeds(testDoc.delete());
});
it("Can delete other users' groups when admin", async () => {
const db = getFirestore(myAdminAuth);
const testDoc = db.collection("users").doc(theirId).collection("groups").doc(groupOne);