![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515864069/yyyudobbs86i4ozer6ka.png)

This Contribution is part of the Utopian Registration-Project.

The goal for the Utopian Registration is, to allow People who are new to STEEM to create an Utopian ( STEEM ) - Account through Utopian itself (and not how it is currently handled, through STEEMIT).

And one of the steps for that is, for the user to confirm an email-adress.

In this Contribution-Post I'll take you through the changes I've made to the frontend and what is working right now.

<h1>The Pull-Request</h1>

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515861805/novi07lmgdxbvmow83qx.png)

You can find the pull-request here: <a href="https://github.com/utopian-io/utopian-registration-frontend/pull/3">Pull Request</a>

<h1>Step 1: Email Input</h1>

The first step after a user logs in via social-media - if he hasn't verified an email before - is to input his email.

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515862124/nrqvevgnj3sysbtowtzn.png)



<h1>Error Handling</h1>

If the email is already getting used, then he will be shown an error.

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515862225/uhpostwwaannrolqxvnc.png)

<h1>Step 2: Email Confirmation</h1>

If however everything works right, an email will be send and he will be  redirected to this site. 
The User can also always request another email with 'Resend Email'.

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515862379/mbk7vo7abkcbaoacfnn7.png)

And this is the email that the user will receive.

![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515862405/oelfrsjcyrur3y6ilsxv.png)

<h1>Step 3: Token Confirmation</h1>

Then the User has to click on the link which triggers a method on the server.

The logic is handled in the backend, but if the token confirmation was successful, he will be redirected to the next step.

<h1>Error Handling</h1>

<center>![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515863070/duqmsykh6wodnahsod0b.png)</center>

If the Link had already been used for confirmation.

<center>![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1515862867/nhk7mn0nnu0riwabn9tv.png)</center>

If the Token is wrong.

---

<h1>What is next?</h1>

The next step that I'm working on is the SMS-Verification. But I'll also create another Contribution-Post for the backend.

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@therealwolf/utopian-registration-frontend-email-verification">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>