Email Confirmation Status

Table Of Contents

What You Will Learn Regarding Aventum?

  • To resend the confirmation email make a POST request to http://localhost:3030/users/resendConfirmationEmail and put the user's token into the request header as x-access-token.

This component will simply check if the user email address is confirmed or not and will allow the user to resend the confirmation email.

Inside the components folder create EmailConfirmationStatus folder and inside this one create EmailConfirmationStatus.js and EmailConfirmationStatus.module.css files.

Inside the EmailConfirmationStatus.module.css put:

src/components/EmailConfirmationStatus/EmailConfirmationStatus.module.css
css
.resendLink {
  text-decoration: underline;
  cursor: pointer;
  color: green;
}

Inside the EmailConfirmationStatus.js file first import the required modules:

src/components/EmailConfirmationStatus/EmailConfirmationStatus.js
js
import React, { useState } from "react"
import classes from "./EmailConfirmationStatus.module.css"

Next create our main EmailConfirmationStatus functtion:

src/components/EmailConfirmationStatus/EmailConfirmationStatus.js
js
import React, { useState } from "react"
import classes from "./EmailConfirmationStatus.module.css"
export default function EmailConfirmationStatus({ user }) {}

Inside the EmailConfirmationStatus we will have one state:

src/components/EmailConfirmationStatus/EmailConfirmationStatus.js
js
import React, { useState } from "react"
import classes from "./EmailConfirmationStatus.module.css"
export default function EmailConfirmationStatus({ user }) {
  const [sending, setSending] = useState(false)
}

Next define resendConfirmationEmail function:

src/components/EmailConfirmationStatus/EmailConfirmationStatus.js
js
import React, { useState } from "react"
import classes from "./EmailConfirmationStatus.module.css"
export default function EmailConfirmationStatus({ user }) {
  const [sending, setSending] = useState(false)
  async function resendConfirmationEmail(event) {
    event.preventDefault()
    setSending(true)
    const response = await fetch(
      "http://localhost:3030/users/resendConfirmationEmail",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "x-access-token": localStorage.getItem("x-access-token"),
        },
      }
    )
    if (response.status === 200) {
      setSending(false)
    }
  }
}

The resendConfirmationEmail function will set first the sending to true using setSending(true) then it will make a POST request to http://localhost:3030/users/resendConfirmationEmail and will put the user's token x-access-token in the request header, on the success we set the sending back to false using setSending(false).

Now render our component:

src/components/EmailConfirmationStatus/EmailConfirmationStatus.js
js
1import React, { useState } from "react"
2import classes from "./EmailConfirmationStatus.module.css"
3
4export default function EmailConfirmationStatus({ user }) {
5  const [sending, setSending] = useState(false)
6
7  async function resendConfirmationEmail(event) {
8    event.preventDefault()
9    setSending(true)
10    const response = await fetch(
11      "http://localhost:3030/users/resendConfirmationEmail",
12      {
13        method: "POST",
14        headers: {
15          "Content-Type": "application/json",
16          "x-access-token": localStorage.getItem("x-access-token"),
17        },
18      }
19    )
20
21    if (response.status === 200) {
22      setSending(false)
23    }
24  }
25
26  return (
27    <div>
28      {user && (
29        <div>
30          {user.emailConfirmation
31            ? "Email address confirmed!"
32            : "Please confirm your email address!"}
33        </div>
34      )}
35      {user && !user.emailConfirmation && !sending && (
36        <a className={classes.resendLink} onClick={resendConfirmationEmail}>
37          Resend confirmation email?
38        </a>
39      )}
40      {sending && <div>Sending...</div>}
41    </div>
42  )
43}

Documentation

Front-end