Reset-Password

This GitHub repository contains code that powers both the frontend & backend of resetting forgotten passwords of people that use Megagram. Megagram is a blend of some of the features of Instagram and Amazon, combined into a single website. It was created by me, Rishav Ray, as a personal project to acquire and then showcase my skills. To allocate my time efficiently, I focused on three of the nine key repositories of Megagram —Login-Register, Reset-Password, and Home-Page— which when combined fulfills my purpose of the entire endeavor. I also focused on the WorksPresentation Github repository of mine(which has a wiki with important info), containing a complex frontend that acts as a website about me for job-recruiters and employers to view!

Welcome aboard!

Table of Contents

0. Important Disclaimer
1. Key Points on Frontend
2. Key Points on Backend
3. Key Points on Data
4. Key Points on Cloud
5. Video-Demonstration of Frontend
6. Finale(My Contact Info is Here)

Important Disclaimer because Honesty is the Best Policy

During the first iteration of Project Megagram, I worked on all nine repositories. In the second iteration, I narrowed my focus to three of them, including this Reset-Password repository. In the third and final iteration, I continued concentrating on these three repositories. However, I chose not to fully revise and polish all the frontend and backend files across them, as the work(which I was not paid at all for) felt repetitive and offered limited new learning and 'showing-skills-to-future-employer' opportunities. Furthermore, all the cloud-services that my project so heavily relies on were out of my budget.

To combat the issues above, I used the final iteration to create detailed wiki pages in my WorksPresentation Github repository. These documents outline how I would approach various aspects of frontend, backend, cloud architecture, and more, if I were tasked with building them under real-world conditions.

As a result, the current state of the content in this repository(including the rest of the README below) may not fully reflect industry-grade optimization or deployment readiness. Rather, it represents earlier work, with my more refined thought process and technical strategies documented in the associated wiki pages.

Key Points on Frontend

• The frontend is powered by ReactJS and is located in the reactjs-frontend1 directory of this Github repo.

• Inside reactjs-frontend1 will be src, which contains the following key folders: assets, components, and views. It also contains the following key files: index.js, routing.jsx, and styles.css.

• There are 2 endpoints: /forgotPassword and /setNewPassword/{username}/{passwordResetToken}. Both endpoints start with https://project-megagram.com/reset-password/.

• Each of the frontend pages work for both dark-mode and light-mode of the system, and have been successfully tested across the top 5 most popular browsers and across the numerous different screen-sizes provided by Google-Chrome Dev-Tools.

• When the user visits the /forgotPassword page, they have the option to submit their username/phone-number/email-address so that they can get sent a link(to the phone-number/email-address associated with their account) that gives them the option to set a new password. The link that gets sent to them will take the user to the /setNewPassword page, elaborated in the next point.

• The /setNewPassword page takes two URL-parameters: username and password-reset-token. The password-reset-token is a token that allows a user to reset their password within 30-minutes of when the token was issued to them. In the page, a user must enter a new password that is strong enough and then confirm the password before submitting it to the server. If everything is successful, the user will be redirected to the https://project-megagram.com/login-register/login.

• You can append ?language=Italiano or ?language=日本語 to the URL to trigger backend calls for translations via a language-translation API. For translations that are already cached in Redis, the backend(not springBootBackend1; instead it is in the Login-Register repo under the login_register_backend directory) directly returns that instead of spending money and API-usage-tokens on the RapidAPI DeepTranslate API Service.

• Whenever the user tries to access an endpoint in the frontend that does not exist, they will come across a 'Page-Not-Found' page that is very well styled. It was created by an impeccable Graphics designer and the styling is very exquisite and complex, but I was able to alter the HTML/JS/CSS just a bit so that it fits the 'Megagram' brand.

Key Points on Backend

• The backend is powered by Java Spring Boot and is located in the springBootBackend1 directory in this Github repo. It supports the methods 'POST' & 'PATCH'.

• There are 2 endpoints, listed below. All the endpoints start with https://project-megagram.com/reset-password/api/.

  1. /sendLinkForSettingNewPassword

  2. /resetPassword/{username}/{passwordResetToken}

• For the MySQL 'users' table, the backend uses a model(User) and repository(UserRepository). For accessing the 'Usernames and their Info' Redis hashset, it uses a Redis-client initialized in the start of the BackendController.java file with the help of environment-variables and Jedis. For the PostgresSQL 'password_reset_tokens' table, the backend uses a model(PasswordResetToken) and repository(PasswordResetTokenRepository).

• There are 11 helper methods in the backend that are not directly accessible via the Rest API but are used by the methods that are accessible via the Rest API. For the sake of organization of BackendController.java, first all the Rest API methods are listed and then all the helper-methods. Below is a screenshot of the names and parameters of all 11 helper-methods.

Key Points on Data

• For this repository, there's one locally-hosted MySQL table called 'users'; one locally-hosted PostgresSQL table called 'password_reset_tokens'; finally, there's one AWS-Redis caching-system that serves two purposes in this website(more on that later).

• You can connect to the Locally-hosted MySQL Database with read-only-access via the following details: host: 'ngrok(update this later)', username: 'spectator', password: ''(no password). You can also connect to the Locally-hosted PostgresSQL Database with read-only-access via the following details: host: 'ngrok(update this later)', username: 'spectator', password: 'mt'. You can also connect to the AWS-Redis Cache with read-only-access using host: 'redis-14251.c261.us-east-1-4.ec2.redns.redis-cloud.com:14251', username: 'spectator', & password: 'SPECtator1!!'.

• The 'users' table has fields that can be described in the screenshot below. Users must be at-least 10 years of age and the accountBasedIn field must be either a US-State, a country, or 'N/A'/'Temporary'. The password must pass a strength test and is only stored in the database after salting and hashing it(i.e user passwords are not stored as plaintext).

• The 'password_reset_tokens' table has fields that can be described in the screenshot below. These are tokens that enable a user to reset their password before the token expires. Each token expires in 30 minutes from when it was issued. For the sake of security, the tokens are treated as passwords and aren't stored in plaintext; instead they are salted and hashed before storing them in the table.

• The two purposes of AWS-Redis for Reset-Password are as follows: (1) For using hash-sets named something like 'Translations from English to Español' which stores key-value pairs where keys are English words and values are their Spanish translations. This is used by the frontend for translating the website; this hash-set aids in efficiency and reducing money/usage-tokens spent when making requests to the Rapid-API Deep-Translate API service. (2) For using the hash-set 'Usernames and their Info' which contains keys that are usernames of Megagram-users and values that are stringified dicts that contain their info(i.e all the other fields of the user in the 'users' table). This hash-set enables efficiency in fetching user-info.

Key Points on Cloud

• For the Reset-Password section of Megagram, the two cloud-service-providers used are Heroku and GCP(Google Cloud Platform).

• GCP is used in the helper method called decryptDataWithGCKMS(), which is called in BackendController.java whenever the contact-info of a user needs to be decrypted via the Google-Cloud Key-Management-Service key used to encrypt it in the first place.

• Heroku is used for the deployment of both the frontend and backend production servers.

• GCP is used for the Managed Instance Group(MIG) called 'megagram-server-group'. This MIG has auto-scaling enabled and each instance in this group has a startup-script(located in this repo as megagram-server-startup.sh) that uses nginx to handle traffic at port 443. The nginx proxy-passes requests with /reset-password/ and /reset-password/api/ to https://reactjs-frontend-1/herokuapp.com/ and https://spring-boot-backend-1/herokuapp.com/ respectively. This MIG has a load-balancer that maps to port 443 of each instance in the MIG, and the ip-address of this load-balancer is the one that is directly associated with https://project-megagram.com!

Video-Demonstration of Frontend

Right here.

Finale

Thank you for sticking around till the end! Hope you found what you were looking for. Whether you did or did not, feel free to reach out to me using any of the following methods:

• Email: rishavray422@gmail.com

• Number(texting only): 608-443-7805

• Linkedin: https://www.fakelink.com