User Accounts - Create Account & Login to account

[davidmoore1]

The user account feature overall allows the user to log into an account on Firebase and have annotations (bookmarks, highlights and notes) synced between their app and the database. This allows a user (or a group of people using the same id and password) to open their app on multiple devices. The database is platform independent so users can log in on Android, iOS or, with the implementation of this feature, PWA and have all of their annotations displaying the same on all devices.

Some investigation will need to be made as to the Firebase calls to use within a Web environment. The calls for the login are all within the auth package. See this link for further information: Firebase Javascript Auth API's

This first feature is to display the initial screens and create a user account and be able to log into that account.

There are a couple of features that have to be set in the appDef file for this to be enabled. The first is in the main features section and is the user-accounts feature which is either true or false. The second is in the firebase features section. There should be a feature for firebase-database which must also be true for this feature to be enabled. The API key, which is also used for firebase analytics, is also used for this feature. It may be necessary to make sure these features are included in the config.js file as part of ConvertConfig.

The user account login screen is accessed on the slide navigation drawer. It is the first entry in the list under the image. it uses the Account_Page_Title string from configuration.

When this option is selected, one of two screens display. If the user is logged in already, then a user information screen is displayed which will be described later. If no user is currently logged in, the "Sign in or Sign Up" screen displays:

This uses "Account_Login_Page_Heading", "Account_Login_Page_Info", "Account_Sign_In_Button", "Account_Sign_Up_Button" strings.

Pressing the <- button at the top of the screen returns you to the screen that was displayed before the button was pressed in the navigation drawer. If sign up is selected, the screen to obtain the user information required to set up an account is displayed.

The "Account_Full_Name", "Account_Email_Address", "Account_Password", "Account_Confirm_Password" and "Account_Sign_Up" Strings are used to make up this screen.

When the "Sign Up" button is pressed, the information is sent to Firebase's create account with email call. If successful, this should result in a new account appearing in the Firebase console under Authentication:

If an error is encountered, an error popup is displayed describing the error returned from Firebase.

Strings are available for the following errors: "Account_Message_Email_Already_In_Use", "Account_Message_Enter_Valid_Email", "Account_Message_Enter_Valid_Password", "Account_Message_Sign_Up_Error" (for operation not allowed and as a default error message). Clearing the popup returns you to the sign up screen. It does not clear any fields.

If the account creation is successful, the user information screen displays which shows the user name, email and other options.

This screen uses the "Account_Logged_In_Page_Info", "Account_Change_Profile", "Account_Change_Password", and the "Account _Sign_Out_Button" text. The success of the account creation eventually calls a synchronization routine which resets the last sync date and time and triggers synchronization of the annotations. While this is being done in a later issue, you should probably add a "TODO: " comment at the point where the successful creation is detected to mark where these changes go in the future.

Change profile and change password will be addressed in future issues. Pressing the sign out button results in a sign out confirmation pop up.

This screen uses the "Account_Sign_Out_Button", "Account_Sign_Out_Confirmation", "Account_Sign_Out_Button" (Again) and the "Button_Cancel" strings.

If Sign Out is pressed, then a call to the Firebase signOut method is made. Once the call completes, the "Sign In/Sign Up" screen is displayed.

If Sign In is pressed from the Sign In/Sign Up screen, a sign in screen is displayed:

This screen uses the "Account_Email_Address", "Account_Password", Account_Sign_In_Button" and "Account_Forgot_Password" strings.

The "Forgot Password" will be addressed in a later issue. Sign in will do an initial check to make sure each of the fields are filled in and that the email address is valid (ie matches this regular expression pattern Pattern pattern = Pattern.compile("^.+@.+(\.[^\\.]+)+$");). If it fails, then an error is displayed:
. If all of the pre-checks pass, then the Firebase sign in with email and password API is called.

If the attempt is successful, then the user information screen displays