TGIMBA .NET Core Upgrade – Vanilla JavaScript Login View Added

Git  Code Commit

To use any application online, you have to authenticate and The Globe In My Bucket Application (TGIMBA) is no different – we need a login screen. But before that, you need a place to store the evaluation of those credentials. Storage will be done using Hyper Text Markup Language (HTML) 5’s sessionStorage (reference #1).

NOTE: This will likely change in the future because I also want to support other types of authentication such as Facebook and Google.

In this implementation, I will be borrowing from the .NET 4.6.x site’s code base my Session.js structure. The JavaScript looks like this:
.5

NOTE:

  • If you look at my github repository, you might notice JQuery is there. But this is to support a small app I wrote some years back to study Spanish. It is not used in TGIMBA and this is one of the big differences between this and the previous TGIMBA version.
  • I will not be testing sessionStorage being null or undefined as it is part of the HTML 5 spec and should be there. When I first started programming, I checked everywhere for null as well as wrapped everything in try/catch’s. Over time, I have learned that this is usually not a good thing. Over use of try/catch’s can hide errors. You generally only use those if you can recover. If not, you let the application fail with some global error handler. Over checking for null/undefined is also generally not a good thing. A very smart guy I worked with at Quicken Loans had a philosophy of only boundary checking (i.e. in and out of your system). Other locations internally, you assume it is set correctly.
  • I added some basic styling to the login user control.  I will remove this once functionality is done and I start the .css phase.

4

Logging in:

  • Bad credentials – enter username and password

1

  • Bad credentials – alert

2

  • Good credentials – main page (login screen not show)

3

 

All Tests:

5

When I started this post (almost two weeks ago), I had planned on going into a lot of detail on the JavaScript unit tests.  However, while working through the implementation, the ‘unit’ tests some how turned into integration tests.  I got over zealous in attaching files and managed to work my way through the entire JavaScript call chain.  That is until I got to ServerCalls.js.  JSTest.Net does not seem to handle constants (i.e. const) or promises.  Both seem pretty basic to JavaScript and I was surprised by this.  Given this and how difficult it is to debug the unit tests calling multiple files, I will be backing this out moving forward and only using JSTest.Net for unit tests and mock out any dependencies.  Integration tests will come as part of a future Selenium effort.

If not you notice, I ended up mocking out Login_Index() and Login_Cancel().  I plan to do the same with Login_Login() as I add the ability for a user to register in the next blog post.

7

Stay tuned!

References

  1. https://www.w3schools.com/html/html5_webstorage.asp
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s