Steemblr development update 16 - Registration with email, profile hover improvements

Steemblr is open source microblogging platform powered by steem blockchain . It allows user to post and explore content which is smaller than a traditional blog.

You can check developer version here: https://steemblr.com

Repository

https://github.com/snwolak/steemblr

New Features

Registration with email

I decided to introduce other ways to authorize users to interest more people and popularize the application and steem blockchain. This feature unlocks registration with email and it will let non-steem users posting on the website in the near future.

To register user will provide his email, and password which has to be at least 6 characters long. After successful registration verification link is gonna be send to email provided before.

For authentication by email I have used simple and effective services provided by firebase which steemblr is using for the backend.

await defaultApp
      .auth()
      .createUserWithEmailAndPassword(this.state.email, this.state.password)

This simple code is letting you register someone by email, pretty cool if you ask me.

For error handling I have used just react state, to show user that something went wrong. As you can se below on the gif, form is showing errors like already submited email or too short password.

#1 #2 #3

Login form

Component for letting user login with registered and verified email. Right now it only show after registration but it will be implemented in the near future, when app will handle non-steem users.

Similary to registration form I had to use firebase for authentication, and react state management to show error if there is any and handle necessery actions.

#1

Profile hover improvements

Update on how profile hover component works to allow user hide header image.

To make the component look like it should, I changed some of the nested css elements and reactions to the user's settings. It was mostly work with styled-components.

#1

Github Account

https://github.com/snwolak