Thomas Derflinger BlogFR

Login Daal with BootstrapVue

Programming login daal

Many web applications need a login solution. This repetitive task can be made easier with Login Daal. Login Daal is an open source login solution written in JavaScript. Daal means lentil in Hindi and tastes delicious for example as Daal soup.

Login Daal comprises a login frontend written in Vue and BootstrapVue. Also, there is a mock backend written in Node. A real backend is planned.

In this article I want to show you the highlights of Login Daal, in the fashion of a travel guide.

Login Screen

Login Daal login screen
Login Daal login screen

The login screen of Login Daal consists of a header in the top part and the login form in the bottom. In the header there is the name of the application and on the right side a burger menu. The screen design is responsive, it works on both desktop and mobile resolutions.

The login form has a button for Facebook login. Login Daal uses the facebook-login-vuejs component. You need to specifiy your Facebook ID in the environmental variable VUE_APP_FACEBOOK_APP_ID in the .env file. For testing purposes you can generate a number of test users in your Facebook Developer console.

Then there are two input fields, the email address and the password. Note, that Login Daal does a sanity check of the email address. Once the password is filled out the user can press enter or click on the Login button.

Here is an extract of the template of the LoginDialog.vue:

  ...
      <b-container fluid v-on:keydown="keydown">
        <b-row id="login-button">
          <b-col sm="12">
            <div class="facebook-login">
              <facebook-login
                class="facebook-button"
                v-bind:appId="appId"
                loginLabel="Login with Facebook"
                @login="onLogin"
                @logout="onLogout"
                @sdk-loaded="sdkLoaded"
              ></facebook-login>
            </div>
          </b-col>
        </b-row>
        <b-row class="or-word">
          <p>&#x2014 or &#x2014</p>
        </b-row>
        <b-row>
          <b-col sm="12">
            <b-form-group id="email-group">
              <b-form-input
                placeholder="Email"
                ref="email"
                v-model="email"
                type="email"
                name="email"
                required
                v-on:blur="emailValidation"
                v-on:input="emailValidation"
              ></b-form-input>
              <div class="error" v-if="emailValidationError">Please provide a valid email address.</div>
            </b-form-group>
          </b-col>
        </b-row>
  ...

You can see that it leverages the facebook-login component and uses BootstrapVue for the other components like the b-form-input.

Signup Screen

Login Daal signup screen
Login Daal signup screen

The signup screen has all the field necessary for email signup. The user enters his email address and his password. Note, the password is entered twice for security reasons, in case he misspelled it the first time. It displays error messages below the input box if the passwords are not the same. Then there is a check box for accepting the terms of the application.

Password Reset Screen

Login Daal password reset screen
Login Daal password reset screen

The user comes to this screen from the login screen when he has forgotten his password. Here he can enter his password and gets a link sent where he can reset the password. In the current version of Login Daal, the mock does not send any emails.

Backend Mock Server

The backend mock server is a simple server based on Express that exposes some endpoints. The result is always positive except when the email address [email protected] is entered. Then it returns an error.

This is an extract from the mock server:

...
/* New user registration */
server.post('/user/users', (req, res) => {
  if (req.body.email === '[email protected]') {
    res.status(401).json({});
    return;
  }

  let data = {};
  res.status(201).json(data);
});

/* Password reset */
server.post('/user/passwordreset', (req, res) => {
  if (req.body.email === '[email protected]') {
    res.status(401).json({});
    return;
  }

  let data = {};
  res.status(201).json(data);
});

server.use(middlewares);

server.listen(3002, function() {
  console.log('Login Daal mock server started on port ' + 3002);
});

Conclusion

If you do not want to start from scratch with your own login components, I hope that Login Daal can help you or at least give you some inspiration. Login Daal uses the great BootstrapVue library which leverages the popular CSS Bootstrap library. A mock server allows you to simulate the backend in a quick way. Depending on your feedback, Login Daal can evolve to a complete end-to-end open source login solution.

Sources and Further Reading

Published 15 Aug 2019

Thomas Derflinger

Thomas Derflinger

I am an independent entrepreneur and software developer.

Web is a topic I really enjoy. Let's get in touch!