OSD600 - My First Hacktoberfest Contribution

1. Introduction

After spending some time to search for the issue labeled "Hacktoberfest", I found an interesting project called My Productivity. The project uses Angular12, TypeScript and SCSS to create a website where people can track their productivity.

2. The issue

To access the dashboard of the website, users are required to sign in first. However, the sign in form has not been created yet so Maireike - the owner of the project has filed this issue. This is a good opportunity for me to refresh my Angular knowledge thus I asked Maireike to assign this task to me. She replied very quick with an agreement.

3. The solution

One nice thing is that Maireike does not require me to follow any specific design but give me the freedom for creation as long as there are some validations. And all the work was done in the signin component which was pre-created.

In signin.component.html, I created some heading, a simple form with two input fields used for username and password.
The signin.component.scss file contains all scss code used to style the way how sign-in page look like.

For validation, I used required, pattern atrribute, ngModel and *ngIf directive to validate inputs and display some warnings to users.

<input class="inputField" type="email" name="username" 
id="username" placeholder="Type your email" ngModel 
pattern="[a-zA-Z0-9]*@gmail.com$" required/>

<p class="alert" 
*ngIf="form.controls.username?.errors?.required">
*Email is required!
</p>

<p class="alert" *ngIf="form.controls.username?.errors">
*Invalid email address!
</p>

Here is what I've created.

After testing the form, I committed the changes and submitted a PR to the upstream. Luckily, Maireike was totally satisfied with my work and asked for no modification. The PR then quickly got merged.

4. Overall

This process is awesome! At first, I had thought that there is no way I can make it. Surprisingly, everything has gone smoothly. I gain more confidence and excitement to participate in the open source community now. Little by little one walks far - Peruvian Proverb

Happy coding!