Intended Audience: Marija Bezbradica (FYP Supervisor)
Made progress with:
- Basic API functionality.
- Basic UI for registration / login system.
- Email account validation.
I have completed the basic functionality of the web application. A user can create an account, log into an account and update their information.
As well as some custom CSS the web application uses bootstrap (HTML / CSS framework) with a Material Design theme to make it look a little more professional.
The image below is the initial screen a user will be presented with. At the moment the phone picture and text are just placeholders, which will be updated when the project is completed.
From the nav dropdown ‘account’ a user can choose to either login or register and the appropriate screen will be displayed to the user.
The registration form fields have some form validation before the ‘register’ button at the bottom becomes active:
- All fields are required.
- Email address must have valid syntax.
- Password must be more then 5 characters long.
There is also an indicator to show users how strong their password is.
After the user clicks register they are asynchronously sent an email which has a link containing their activation key. The users account does not become activated until the link gets clicked.
I am using a gmail account to send these emails. If I have time left over at the end of the project I might make this look a little more impressive. Here is the email a user receives:
This screen allows a user to update their information.
Once the user has successfully logged in the ‘Journeys’ option becomes visible in the menu bar. The is the screen that will display a list of the journeys a user has made.
At the moment it holds an embedded google map as well as a basic layout which I shall be improving upon.