DEV Community: Klement Omeri

Better Passwords With Angular and Django

Klement Omeri — Sat, 18 Apr 2020 15:06:32 +0000

Even though I describe myself as a Pythonista today I have realized that I have always been writing only for the front-end. I like Angular and the world of front-end development but when it comes to python💛💙 it is different for me.

So I decided to show something related to backend and I ended up writing this piece which has to do with both front and back. (Looks like there is a hidden love for the front-end too)

In this piece, I am going to show you how you can ask your users to choose more secure passwords with a good user experience. Let’s take a look at what the product of this article will be. Below GIF is taken from the library npm site.

We will be using the excellent library password-strength from material-extensions. Thanks to Antony Nahas and all the contributors.

I have the front and back repo here if you are a show me the code type.

I am skipping the project creation stuff, docs already explain it better than me. I have those two project structures:

Front (Angular)

Back (Django and Django REST)

Begin with Backend

As always let me begin with the backend❤️ Let’s install the requirements:

Django REST Framework
Djoser — Authentication library

I will be skipping the configuration, they are out of the scope of this article. Please ask me if you struggle with anything. I highly suggest checking the Djoser lib in detail, it is a really good one built by the sunscrapers.

Now thanks to Djoser lib I have a working endpoint which I can create a user. Let’s run the server and hit it. http://127.0.0.1:8000/auth/users/

So I have made a try to create a user but the password(test) is not filling out the requirements so I got those error messages. Let’s look at what type of requirements does Django has by default. A section from settings.py below.

*User Attribute Similarity *— Ensures the password is not similar to user attributes like email, username and first and last names
Minimum Length Validator — Ensures the password is at least 8 chars. This can be changed by adding an option below like so

'django.contrib.auth.password_validation.MinimumLengthValidator',
        'OPTIONS': {
            'min_length': 8,
        }
    },

*Common Password Validator *— Ensures the password is not inside a 20.000 of passwords length of a list. Comparing is case-insensitive.
*Numeric Password Validator *— Ensures the password is not entirely numeric

The above validators are the default ones and can be extended which is exactly what we are going to do. We are going to write some more validators ourselves.

Number Validator
Upper Case Validator
Lower Case Validator
Symbol Validator

Above you see the validators.py file, it is as simple as it gets. We check for our condition and raise a Validation Error if it is not met.

Add new validators to settings.py:

Let’s check out what does the signup form looks like now.

OK, now the backend is done and we are sure it is not going to accept weak passwords even if the frontend sends them. Let’s move to the front-end side.

Front-end

So let’s begin with the front-end side of the work. We are going to create a signup form and then integrate the password-strength component from material-extensions inside it.

Install the library, you can check out the versions to install the required one for your angular version. The latest is v.6.0.0 which is Angular v9 supported.

Make sure you have angular material installed and configured the right way and you have BrowserAnimationsModule inside the imports of app.module

ng add @angular/material  // if material is not already installed

ng add @angular-material-extensions/password-strength

The above command will automatically add MatPasswordStrengthModule inside the imports array of app.module.ts but I have a lazy-loaded auth module for the sign-up components so let's move the module inside auth.module.ts

Build Sign up form

So we have the following sign up form.

I have linked server errors to an ordered list just below the password field. If we try to sign up without a valid password we can see the server errors like so:

Now we have the server errors displayed to the user but come on, who wants to show errors like this? Let’s integrate the material design password strength component.

After we have imported MatPasswordStrengthModule inside our module now we can use the following strength meter and strength info. Let’s give an identifier to our password input.

<mat-form-field appearance="outline" class="full-width">
  <mat-label>Password</mat-label>
  <input **#password** type="password" matInput formControlName="password" />
</mat-form-field>

Below the password field add password strength meter and info.

...
formControlName="password" />
</mat-form-field>

<div style="margin-top: 10px; margin-bottom: 10px; width: 100%;">
  <mat-password-strength
          #strength
          [password]="password.value"
          [enableLengthRule]="true"
          [enableDigitRule]="true"
          [enableLowerCaseLetterRule]="true"
          [enableUpperCaseLetterRule]="true"
          [enableSpecialCharRule]="true"
  >
  </mat-password-strength>
  <mat-password-strength-info [passwordComponent]="strength">
  </mat-password-strength-info>
</div>

As you can see you can enable or disable rules as you wish. Now the form looks like this:

We have finished the basic integration. There are lots of customizations that can be done. Please visit here to see all of them. I am going to show one of them which is how to change messages displayed to the user.

Inside mat-strength-info we can do something like this:

<mat-password-strength-info
        [passwordComponent]="strength"
        [digitsCriteriaMsg]="'The password must contain at least 1 digit'"
        [minCharsCriteriaMsg]="'The password must contains at least 8 chars'"
        [specialCharsCriteriaMsg]="'The password must contain 1 special char like (!£$%^&*()@~?,/.)'"
>
</mat-password-strength-info>

By doing so you can give any message you like to the strength info component.

Conclusion

We wanted to increase the security level of passwords. We have begun with the backend validation and used only this validation at first by showing to the user whatever error message backend sent. After that to give our users a better experience we have used the mat-password-strength library and integrated it into our sign up form. Of course, it was easier to show the error messages of the backend and just leave it like so. But we want the user experience to be the best it can be, especially on a signup form everything must be easier and password validation is not an exception. If you want your users to do something you want then you need to ask them the correct way.

Thanks for reading.

External links

Backend repo
Frontend repo
Material Password Strength Library
Djoser Authentication Library

How to Handle Errors in Angular Reactive Forms With 3 Lines of Code

Klement Omeri — Tue, 14 Apr 2020 16:16:53 +0000

DRY up your forms

Angular is a great framework that offers some great tools. One of these tools is ReactiveForms. In this post, I want to introduce you to an easier way to handle errors on reactive forms and avoid spaghetti code. I’ll jump straight to the implementation to save time.

What we’re going to build is a standard signup form, like the one shown below. I’ll be using Angular v9 and you can find the source code here.

As you can see, I have a very simple signup form here styled with angular material. The ts code for the form is below — I’ve added some Validators to get some errors:

I’ve seen so much code from different projects and one thing that hasn’t changed at all is error handling on forms. Let me show you what I mean:

For every single error that may occur you need to write another mat-error tag, check if the error is present, and set an appropriate message for it. This has to be done repeatedly. When you have a single signup form that might not be an issue but if you have dozens of forms, you need to write the same code every time and it is tiring.

Let’s Think About It

We are programmers, not copy pasters. We must write beautiful and clean code. That’s why I decided to take a moment and think about it.

I’m kidding. Of course, it’s true we must write beautiful and clean code but that wasn’t why I decided to think about what could be done better. In fact, the moment I decided something had to change was when my team leader assigned me to implement error handling on more than 20 forms with an average of ten fields each and many error cases. The errors must appear below each field that the error is related to and server errors must be handled the same way too.

So, errors must appear like this:

I’ve begun to work on some global functions and achieved some success with them — but they’re also coupling my code on each component. I wanted something decoupled, something that can be copied and pasted in any other project and work like a charm. So I ended up creating an injectable class and called it ErrorHandler(very creative name).

You can check out the class here.

It will take a long time to dive into what’s inside this class, so I’ll talk only about how you can easily use it, as I said, with only three lines of code. Anyway, I’ll be happy if anyone has any ideas to improve it — just contact me. My goal is to work on it a little more and transform it into an npm package.

The Main Idea

The idea behind this class is that for every form we have we also create an object of errors. We take all control names from the form and assign them as keys to error object and the error message of each form control assign as value to those keys.

If that hasn’t made it clear enough I think the code below will:

Implementation

Take the code from my gist and create a file somewhere in your project and paste it. It doesn’t matter where the file is located. You only need Reactive Forms to be imported in your module.

Import and inject it into your component’s constructor, like this:

Create an empty object to hold errors inside your component:

Call handleErrors() method from the class inside onInit() but after you initialize your form:

The handleError() method takes two arguments — the first one is your form and the second one is a local empty object to keep errors.

Now go to your template and write only a single mat-error tag like this for each formControl:

So, inside the mat-error, this is the only thing you need to write:



<mat-error>{{errors.theFormControlName}}</mat-error>

Now you’re not writing repeated code all over the app and the errors are visible below the field that has the error — great!

Also, there’s a method called organizeServerErrors to deal with validation errors sent from the server, this method is written explicitly to work with the way that my backend with Django Rest sents me errors. So if you are going to use it you need to work around some to change in your backend’s error format.

Anyway, it is enough to call setErrors() on the required form control and add the error type into the error cases in the class, as shown below:



// where your error comes from the server
this.signUpForm.get('email').setErrors({emailInUse: true});

// error.handler.ts
...
} else if (errors.pattern) {
    this.message = 'Invalid value';
} else if (errors.passwordMismatch) {
    this.message = 'Passwords do not match';
} else if (errors.emailInUse) {
    this.message = 'There is an account with that email';
} else {
    this.message = '';
}

Conclusion

We’re all bored of writing the same things over and over again. This class offers a central solution to error handling in Angular ReactiveForms.

Currently, I’m working on the implementation to handle the form arrays that hold other form groups inside them too. The goal is simple: to have one method call to handle all errors.

If you want to work with me or give any suggestions on the class code I will be very happy to hear from you!

Thanks for reading!

Why You Should Never Use Methods Inside Templates in Angular

Klement Omeri — Mon, 13 Apr 2020 22:06:13 +0000

Angular is a great framework that offers great tools for developers to build web applications easily. One of its core features is HTML is written into templates that are HTML files without any DOCTYPE declaration. They can start with any HTML tag you want because they;ll be attached to the index.html file, which has elements like the DOCTYPE, metadata, links to scripts and styles, etc.

The cool part about templates isn’t that they don’t require a DOCTYPE or metadata. The cool part is they can contain some things regular HTML files can’t. One of those things is you can open up double braces anywhere and include some TypeScript inside it. Just like that

We have the user object here, and we’re assigning its image’s path to the src attribute of the img tag. That is a quite useful feature. Just like the user variable, you can also use methods inside double braces.

So one example can be this:

Here ,we use a helper method called getAddress() to get the address from the user object in a representative way. The method is so basic:

Nothing wrong can happen, right?

It looks like we have what we need. The address is right there.

Do you want to know what’s wrong with it? Let’s just place a log at the beginning of the method.

In this way, we could know when this method has been triggered. What we are expecting now is to see this console only once, but will that happen?

When I just refresh the page and open the console, I see:

The getAddress() method has been triggered four times after the page refreshed. And every time I click on the page, hover the mouse over the text area, or click on it, I get more and more consoles.

This happens because of Angular change detection. I can assure you there are no problems with the change detection of Angular — the problem is on our side. We have used a method inside a template inside double braces. That’s not very clever. What we should do is assign this address representation to a variable and be sure to call this method only once.

In this way, the getAddress() method will be called only once, and the string representation of the user’s address will be assigned to the address variable.

We can be sure the method is being called only once just by looking at the console.

By triggering the getAddress every time we click or hover in the text area, we just slow down our application.

This may not be noticeable for such a simple case. but imagine having a large form filled with values using methods like that. The performance of that app would be affected much more.

Conclusion

With frameworks like Angular, we get a lot of cool features regular HTML doesn’t give us.

But if the power of those features is being used without thinking, then we start hearing our team talk about slow frameworks, how Angular is bad, etc. In fact, in most cases, the problem is inside our code — we just didn’t notice it.

Thanks for reading!