Members Area

Custom member signup with email verification.

Code Level

Advanced

Published

Views

 

Example Description

In this example we created a new signup form using a lightbox. When users register as members they need to verify their email addresses before their registration is completed. 

 

We also customized the My Account page in the site with a download link that downloads a document from a database collection. For example, our site is a University site where the site admin can attach an assignment for each student, which is presented on the My Account page. The admin uploads the assignments from the Admin page.

Example Code

How We Built It

Collections


For this example we created two collections:

  • tokens: contains registration tokens for creating the URLs in email verification links.

  • members_tasks: contains the assignments uploaded for members.


Pages, Lightboxes and Apps


Our site contains the following pages, lighboxes, and apps:

  • Member Area App: For handling members (we deleted the login bar).

  • Register lightbox: For registering new members or for signing in current members.

  • The lightbox contains elements for two forms. One for registering and the other for signing in.

  • The lightbox is set up to be the default sign up form.

  • A triggered email that is sent to users who are signing up to verify their email addresses. 

  • Home page: Set as member page, so trying to enter this page triggers the register lightbox.

  • Approve page: The page users land on after verifying their email addresses.

  • Admin page: Set as admin/member page, where the member can upload assignments for another site members. The page includes:

  • Dataset: For getting member data.

  • Table: For displaying member data.

  • Upload button: For uploading assignments for specific members.

  • My Account page: This page is automatically created after adding a member area to the site. We have added a download button so members can download their assignments.


Code


Our site contains the following code:

  • Register lightbox: Code for processing a login for a current site member or a registration for a potential site member. This page calls functions from the signIn.jsw backend web module to perform logins and registrations.

  • signIn.jsw backend web module: Code for signing users in, starting the registration process, and completing the registration process. This file calls functions from the signIn.js backend file.

  • signIn.js: Code for creating a contact for registrants and sending them email verifications. This file calls functions from the sendEmail.js backend file.

  • sendEmail.js: Code that creates a URL with the token that is used as a verification link in a triggered email. 

  • Approve page: Code for completing the registration process after a registrant's email address has been verified. This page calls functions from the signIn.jsw backend web module to complete a registration.

  • Admin page: Code for choosing a member and uploading a file for the member's assignment. This page calls functions from the data.jsw backend web module to add a file to a collection.

  • Data.jsw backend web module: Code for adding a file to a collection.

  • My Account page: Code to find if the current member has an assignment. If an assignment exists, set the download button to a link to the assignment.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

 

Did this help?

|

This website was designed with Corvid by Wix.