the-clothing-loop / website Goto Github PK

• Check if access control is implemented right, correct if necessary
• Check if RBAC is implemented, correct if necessary
• Check for security issues

• First: location, then user details
• Logo on top on both pages

OR

• Have it on one page

• A chain should be unpublished when created (not visible on the map).
• The host should be able to publish the chain, so that it is visible on the map and users can join.

Currently, the chain member list is public. Only users with the 'host' role on the chain should be able to access the page.

Maybe next to, or overlaying, the map.

(We might want to discuss which things should be on the home page, or if we want to add a new info page.)

• When updating a users details (by the host), their old details seem to sometimes disappear (try editing the phone number)

• The host can then enter their chain's details at the chain admin page (/chains/:chainId) and publish it (feel free to add these properties and a "published" property to the firebase datamodel)

Functionality

• The view should allow for a host to see members in their chain, and their associated information
• The view should allow the host to download the members via CSV

What

Some hosts become inactive, and they no longer welcome new members to their loop. This can be bad, because it gives people the idea that the whole app is inactive.

How to fix

Create a view that shows users that have signed up, but are not activated by the host yet (active field on user has to be present for this to work)

There can be multiple hosts for a chain. They should all be able to login and see/change the member list.

• Add option for host to select a member as co-host.
• Add validation that there should be at least one host.
• Add option for host to remove host role from other hosts.

After #30

There will be a default welcome mail for new members. Hosts should be able to edit the text of this mail for their chain.

There should be two different size conventions. One for adults (men's clothes and women's clothes) and a different one for kid's clothing. If the user selects men's/women's clothes, the seizes convention should be the following: XS-S-M-L-XL and highlight S-M-L as standard sizes (for example with a link and a pop-up showing onClick) and for kid's clothing the following: TBC

Pages to modify:

• NewChainLocation.js
• ChainEdit.js

What

• Ask for user location and center the map, zoom level to be decided

In the signup form, differentiate Clothing Loop newsletter and SFM newsletter with link to SFM (Signup.tsx and NewChainSignup.tsx). There are currently two checkboxes with values 'newsletter' and 'actions newsletter', replace these two values with 'Subscribe to The Clothing Loop newsletter' and 'Subscribe to Slow Fashion Movement newsletter'. Respectively, add an onClick event which opens a pop-up with t&c text

• Hosts should be able to add a chain limit (maximum amount of members) when creating a chain.
• Hosts should be able to edit the chain limit.
• We display chains that are full in grey on the map.
• On the card of a full chain, we add a message that the chain is full, but that you can start a new chain.

There will be a default welcome mail for new members. Hosts should be able to edit the text of this mail for their chain.

Hosts will only add new members to their WhatsApp group every now and then, so it should be clear which members have not been added yet.

• Members should have a status (active / waiting list).
• Member status should be displayed in member list for host.
• Host should be able to edit member status.
• Nice to have: activate multiple members at once (only if not too much work).

The app has already been set up for internationalization with the package i18n, just need to check that all the pages across the app are actually getting translated

Add a 'how it works' page to the nav bar with an in-depth explanation about the project (see manual as reference) with links to:

• start new loop (newChainSignup.tsx)
• join an existing loop (findChain.tsx)

A host should be able to download a csv of their active members.

These turned out to be necessary or really useful (e.g. people with the same first name, or same street in different village.)

Use firebase? https://firebase.google.com/docs/auth/web/email-link-auth

• column 1: show "chain card" + " back to map" button
• column 2: show sign up form + "submit"

Validate user is not in our db using firebase auth module

List of chains with at least this info:

• Chain name (ordered)
• Host name, phone number and email address
• Amount of members
• Amount of active members (or percentage?)

Possible in a seperate tab in the chains/id section, so we get chains/id and chains/id/edit, for example?

We can re-use the address picker in the current new chain form

What

Hosts are not constantly checking the app, we can remind them weekly of the new users that joined.

How

Weekly Firebase action that queries the database for new users in that loop, and sends an email if any new users.

Convert all the pages of the app to Typescript

The main priority for the next stage of development is redesigning how the loop is displayed in the map. Was agreed to let the user decide the target area in the map. This functionality will be implemented in the 'start new loop' flow and reflect how the loops will be displayed in the main map

Ideas:

• Apply project wide styling (withStyles)
• Wrap title (use card max width)

If there is no chain in the users area, the user can start a new chain and becomes a host.

• Decide where to put this option on the website.
• The user gets a user account on the website.
• The user can start a new chain. (Options: in the same form as the user account creation, or as a separate form when logged in).

Basic functionality

• The map should retrieve all chains from firebase and display them on the map
• You can use Mapbox (or any other map API, but Mapbox seems nice)
• When you click on a marker, a card shows up that show basic chain info: name, description

Advanced functionality

• A sign up button takes you to the sign up form, with this chain pre-filled

Functionality

We want to have our app available in multiple languages. There are packages that take care of this, such as https://react.i18next.com/. Take a look at it, or use another way to do this!

Get it from firebase and show it on the map card

Members will notify their host when their contact details have changed. Hosts should be able to edit all chain member details (name, address, phone number, etc).

How should it work?

• When clicking on the button, it should take you the /signup route.
• The chain field is pre-filled from query param

Additional

• Remove signup from NavBar

At the bottom of each signup form, before the submit button, add a required checkbox for user data consent (at a later stage, we'll add a link to a 'how we use your data' page/popup

Actions for the checkbox:

• The form should be submitted only if the user ticks the checkbox, alternatively display an error msg
• The checkbox value should be added to Firebase

Forms are displayed in the following pages:

• NewChainSignup.tsx
• Signup.tsx

A host should be able to remove a member of their chain.

When searching for a clothing loop via the search bar on the map (FindChain.tsx) and no matching results are found, let the user navigate either to 'start a new loop' page (NewChainSignup.tsx) or 'about' page (Home.tsx)

There are few functionalities that need to be reviewed and added on the forms:

• add comment box on signup to loop form (Signup.tsx)- generate an email to be directed to LoopAdmin (no need to implement with backend for now)
• add a comment box on the form when starting a new loop (NewChainLocation.tsx) - email should be added to the user data list on firebase and displayed in admin pages (ChainMemberList.tsx)

In the chain list for admins there should be a simple 'copy all host email adresses' option, which returns a comma-separated list.

After #30

Solves following requirements:

• Chain member: Gets an email with all information about how to start a chain.
• User: Gets a confirmation email when joining a chain.
• Host: Gets an email with all information about how to start a chain. Gets an email every time a new member applies for their chain.
• Users can unsubscribe from chains with email address: fill in email address, get an email with confirmation link, get removed when clicking said link.

Functionality

• The form should allow a user to add a new chain
• It asks the same info as the sign up form, and additionally where the chain should be (map picker?)
• Should send welcome email to user and "You will be contacted" text

Process

• The potential chain is by default not shown on the map, and has to be approved by an admin

When searching for a clothing loop via the search bar on the map (FindChain.tsx), filtering needs to be done on the server-side.

Resource:
https://firebase.google.com/docs/firestore/query-data/queries