Asp.Net Core, Angular and Webpack

In this article we will define what an application user is and use it to further define an application database context. We will then specify a connection string for a LocalDB database and use it to add database access to our application services. Once we have access we will use Entity Framework's code first commands to define and create the tables that we require. Finally we will test everything out by creating our first user using our authenticator's regsiter functionality.

In this article we will start by enabling ssl for our application. With that done we will define the requirements for a canonical url and enforce its usage by creating a canonical url middleware that we will add to the mvc pipeline. When that is working we will add the ability to redirect a user to a different page using our authenticator component. Finally we will make a few updates to the template, styling, and behaviour of our authenticator.

In this article we will create the end points for the user to be able to register and submit a request when/if they forgot the password/username. In order to do this we will be confronted with a problem when trying to post back to a razor page that is not the origin of the request. To solve this problem we add multiple get/post handlers to our razor pages and see how we can tell the server which handler we are trying to reach.

In this video we will add and animate a timer svg element to our send screen that will indicate to the user when the screen will be hidden or an action will be taken. We will also add a new svg element that will be used when the server responds with a success status code. We will end by adding a background element whose background color we will animate to indicate whether the current request was successful or not.

In this article we will add a message and svg element to our send screen component. The send screen will display a default message whenever the it is animated into view in response to the user clicking the send button and we will animate the changing of that message once a response is received from the server. We will also animate one or more svg elements along with the updating of the message. For the svg elements we will be animating a property name the stroke dashoffset which will result in it appearing that we are actually drawing them on the screen. When we are done with this article we will be able to respond to an error from the server if the user is attempting to login. In subsequent articles we will deal with the rest of the communication possibilities from the server.

In this article we will create a child component of our authenticator that I will call the send screen. The send screen is our way of telling the user that we have sent a request to the server and we are now waiting for a response. We will also us it to be the first indication of whether or not the request was successful. In addition to creating the send screen we will also create the show and hide animations for it as well.

In this article we focus on adding the behaviour to our interface when the user clicks on either the forgot username or forgot password links. At this point the only thing that happens is our inputs container animates out and back in. What we also need to have happen is the appropriate controls need to be hidden and shown when it animates out so that it is ready to use when it animates back in. We will also add reset functionality so that if the user clicks the reset button all of the controls are set to their original values and returned to a pristine state.

In this article we will finish the process of animating our control groups. This will require us to define and then implement the control flow that we want when the user clicks on the group buttons or uses the keyboard to navigate our interface.

In this article we will truly begin the processing of animating our control groups. By the time we are done with this article we will have defined the animation keyframes for both showing and hiding the groups from both the left and right of the inputs container. We will also have begun writing the code that will cause the animations to play in response to input from the user. We will then finish up the animation process in the following article.

In this article we will focus on adding the ability to hide control groups when we wish to but during the process we will identify an issue with our input pages which will require us to modify how we are hiding them as well. We will also hide the forgot links when the user is registering, add a little bit of styling and finsih up with adding the ability to reset our form when the user presses the reset button.

In this article we take the model state errors that we are receiving from the server and display them to the user. On the default info screen we will display the names of any controls that have an error and when the user focuses a particular control we will display that controls errors. Once that is complete we will configure our component to only allow sending a request to the server once the form is in a valid state. Lastly we will configure the validation for our controls to only run when appropriate.

In this article we create the ability for us to perform a post request to the server. Once that is done we will focus on using the model state property to determine if the request sent to the server is in a valid state. If it is not we will return a bad request to the client and we will set up automatic processing of the errors using our base http service.

In this article we pick up where we left off and finish the animation of our info pages. By the time we finish this article the pages will be hidden and only shown one by one depending on which control has focus. If no control has focus we will show the default page. Once the info pages are complete we will modify the need to login and need to register anchors to only be displayed one at a time depending on whether the user is attempting to login or register. We will also set their href attribute so they behave correctly when clicked.

In this article we will begin the process of animating the info pages of our component's user interface. An info page is simple the information that is shown when a user focuses a particular input. The information displayed is mainly the validators for that particular input but in the future it will also contain the errors, if any, related to that input that have been returned by the server. By the time we are done with this article we will be able to play a show animation for the corresponding info page when an input is focused and play a hide animation when the focus is removed.

In this article we will build on the work that we did in the previous article and start the process of configuring our component to respond to keyboard navigation inputs. We will do this by using our access to the DOM elements that make up the control groups to focus the appropriate elements within them. By the end of the article we will be able to cycle through all of the inputs using the 'Enter', 'Tab' and 'Shift' keys. In a future article we will fine tune this process.

In this article we will create three additional class that we will use when we want to interact with the DOM elements that make up our form control groups. We will use this class to enable us to do everything from focus an input, perform animations and respond to keyboard navigation.

In this article we will use the response from the server, that we setup in a previous article, telling us whether a username is available or not to style the username input and button as well show the correct icon for the unique validator.

There are of course plenty of different attack vectors against any web application. In this article we will try to eliminate one of them called cross-site request forgery (CSRF). This attack happens when a user is logged in to our application and visits a malicious site which then sends a request back to our application. The fundamental way that we will deal with this type of attack is to require each request to contain a token that we can use to make sure that any request that comes into our application also originated from our application..

In this article we will create the ability for our component to communicate with the server. In order to do this we will first create a base http service class that all services that need to communicate with the server will inherit from. Once this is done we will create a http service specific for our component that inherits from the base service. Along the way we will hopefully reduce the size of our vendor bundle a small amount by changing the way we import rxjs.

I am pretty sure we can all agree that automating the process of web development as much as possible is a good thing. We have already seen how to, and in fact are using, npm to automate the process of updating our bundles automatically when a file is saved. In order to see any changes that we make we unfortunately must manually refresh the browser after a bundle is updated. That was at least until now. Once we have completed this article we will be using webpack's ability to automatically update a bundle within the browser without us having to refresh using what is known as hot module replacement (HMR).

In this article we will add the ability for our inputs and buttons to update their appearance based on the underlying state of our typescript class by applying css classes. Although the situation is a bit more complicated than the icons for our validators we will use the same approach where we bind a class property on our template to methods in our typescript class.

In this article we will create the animation that will cause our inputs container to move out of view when a user clicks the forgot username or forgot password links and then it will animate back into view. In future articles we will hide/show the appropriate inputs in our interface while the container is hidden off screen before it animates back into view.

In the previous article we started laying the ground work for creating the custom form validators that we need for our component. In that article we did in fact create our first validator for min length. In this article we will create the rest of the validators that we need as well as create a function that will allow us to compose them all together for inputs that require more than one validator.

In this article we will update our component's template so that we can change the icon for our validators as the user types in the inputs causing their state to change. Although angular comes with several built in validator functions they do not contain all of the functionality that we require, and in terms of the min length validator do not behave as we would want it to, so we will create our first custom validator and apply it to the username input.