Through our login and signup pages, we have attempted to use the CRUD formatting to make it the best frontend experience possible for the user.
First, we CREATED the login and signup files, and added the base to it. This included the basic styling CSS at the top of the files, and worked to do research on the JS required to make the buttons function (onClick function mainly).
As a team, we READ through our code and tried to find things that we needed to UPDATE and DELETE. Many of the suggestions which we gave each other through the process were mainly based on the looks of the page; as in, how can we fix the CSS at the top to make the page look a bit more realistic and appealing to the user.
Using CRUD, we tried to make our frontend design look as professional as possible, but we also had some challenges, some that we were able to fix and some that we still need to fix.
Challenges that we were able to fix:
We were having some formatting issues with the text entries where the user would type their username and password. We kept writing in new properties to center the boxes or put them on top of each other instead of side by side, but that wasn't working. We eventually realized that since there was a liquid syntax error at the top of the file, none of our changes were actually updating properly. We fixed that error and then were able to get our formatting correct.
We were also having some baseurl issues with when the user would click the login or signup buttons, the page that it would lead it to. We were not able to figure it out for a bit, but by looking at the URL that the page led us to when we clicked either of those buttons while testing, we realized that we had to remove the stem of the URL in the JS script at the bottom of both the files, as it was essentially adding an extra base (/stg/stg/_____) and that URL does not exist in the first place.
Now, here are the ideas behind each of our major frontend developments:
We used a lot of CSS to style the buttons and make it look as professional as possible. This included centering the buttons, making the right margin percentages, using color-schemes which matched with the original theme of the site and gelled with the entire page in general, and overall used inspiration from other news sites to make ours look as realistic as can be.
The code behind this file was almost identical to the code from our login page, but there were a few things that we changed. First of all, on most websites, when a user makes an account, they have to re-enter their password to confirm that they have typed the correct password and it is secure enough (another feature that we will attempt to implement in the coming weeks).
There are also some things that we still have to do (also updated on our Scrum Board) in regards to the development of this frontend and the entire login/signup system for our news site.
We need to add an element in both pages that makes the account creation/login actually successful. To do this, we need to do the following:
Create a feature that allows for the site to verify that the user has typed in a valid username/password combination.
Create an account page which allows for the user to change their username, password, notification settings for the newsletter, and even delete their account if needed.
Update our password entry code to make it so that the password is encoded with SHA512 (just like in the OOP HACKS) to make sure that our site secures user data to the highest level.
CRUD stands for: Create, Read, Update, and Delete
Through our login and signup pages, we have attempted to use the CRUD formatting to make it the best frontend experience possible for the user.
First, we CREATED the login and signup files, and added the base to it. This included the basic styling CSS at the top of the files, and worked to do research on the JS required to make the buttons function (onClick function mainly).
As a team, we READ through our code and tried to find things that we needed to UPDATE and DELETE. Many of the suggestions which we gave each other through the process were mainly based on the looks of the page; as in, how can we fix the CSS at the top to make the page look a bit more realistic and appealing to the user.
Using CRUD, we tried to make our frontend design look as professional as possible, but we also had some challenges, some that we were able to fix and some that we still need to fix.
Challenges that we were able to fix:
We were having some formatting issues with the text entries where the user would type their username and password. We kept writing in new properties to center the boxes or put them on top of each other instead of side by side, but that wasn't working. We eventually realized that since there was a liquid syntax error at the top of the file, none of our changes were actually updating properly. We fixed that error and then were able to get our formatting correct.
We were also having some baseurl issues with when the user would click the login or signup buttons, the page that it would lead it to. We were not able to figure it out for a bit, but by looking at the URL that the page led us to when we clicked either of those buttons while testing, we realized that we had to remove the stem of the URL in the JS script at the bottom of both the files, as it was essentially adding an extra base (/stg/stg/_____) and that URL does not exist in the first place.
Now, here are the ideas behind each of our major frontend developments:
LOGIN PAGE: https://vardaansinha.github.io/stg/login
We used a lot of CSS to style the buttons and make it look as professional as possible. This included centering the buttons, making the right margin percentages, using color-schemes which matched with the original theme of the site and gelled with the entire page in general, and overall used inspiration from other news sites to make ours look as realistic as can be.
SIGNUP PAGE: https://vardaansinha.github.io/stg/signup
The code behind this file was almost identical to the code from our login page, but there were a few things that we changed. First of all, on most websites, when a user makes an account, they have to re-enter their password to confirm that they have typed the correct password and it is secure enough (another feature that we will attempt to implement in the coming weeks).
There are also some things that we still have to do (also updated on our Scrum Board) in regards to the development of this frontend and the entire login/signup system for our news site.