For a user’s point of view the interface and the flow of the app is of great importance, the UI of the app should be simple and sufficient so that it does not confuse the user and provides all the necessary information to the user with the first look. In all the apps it is the user interface that engages the user and makes the user want to use the app. So, in SUSI Android app UI flow was improved by removing the Forgot Password activity altogether.
What SUSI.AI android app previously had ?
Previously the SUSI.AI android app used to have three different screens for the user’s account related support :
- Login Screen
- Forgot Password Screen
- SignUp Screen
The login screen had a Forgot Password? Option that takes the user to a new screen where the details entered in the login activity had to be entered again and only then can the user request a new password.
What are the drawbacks of this ?
Separately, providing a new activity for the specific purpose of resetting the password does not contribute towards an efficient use of UI items of the screen. A scenario where this will be annoying to the user is for eg : when a user tries to login to the app and is unable to do so because of the incorrect credentials, user simply clicks on the Forgot Password option and on opening the Forgot Password activity to the user’s surprise all the fields entered in the login screen are to be entered again and this is really fuzzy and sometimes frustrating to the user.
A simple solution implemented for this purpose was to automatically reflect the credentials entered by the user in the login screen on the forgot password screen so that user did not had to enter all the details again.
What better could be done and the solution?
The simplest UI for the purpose of resetting a password is to just click the Forgot Password? and user receives an email to reset the password.
Using this approach several changes were made to the app’s code.
The first change to be made was to implement the ForgotPasswordPresenter.kt functions in the LoginPresenter.kt and similarly implement the IForgotPasswordView.kt functions in the LoginActivity.kt.
The two major functions in the IForgotPasswordPresenter.kt were :
fun requestPassword(email: String, url: String, isPersonalServerChecked: Boolean) fun cancelSignup() |
Along with these functions in the LoginPresenter.kt the view functions to reflect the view actions of the ForgotPasswordActivity.kt had to be implemented in the LoginActivity.kt file, so the functions added to the ILoginView.kt file were :
fun showForgotPasswordProgress(boolean: Boolean) fun resetPasswordSuccess() fun resetPasswordFailure(title: String?, message: String?, button: String?, color: Int) |
Now, the two functions above which were earlier present in the ForgotPasswordPresenter.kt file were implemented in the LoginPresenter.kt file and along with the requestPassword() method the listener IForgotPasswordModel.OnFinishListener had to be implemented in the Login Presenter too. So, on implementing this listener we implement a method :
override fun onForgotPasswordModelSuccess(response: Response<ForgotPasswordResponse>) { loginView?.showForgotPasswordProgress(false) if (response.isSuccessful && response.body() != null) { loginView?.resetPasswordSuccess() } else if (response.code() == 422) { loginView?.resetPasswordFailure(utilModel.getString(R.string.email_invalid_title), utilModel.getString(R.string.email_invalid), utilModel.getString(R.string.retry), Color.RED) } else { loginView?.resetPasswordFailure(“${response.code()} “ + utilModel.getString(R.string.error), response.message(), utilModel.getString(R.string.ok), Color.BLUE) } |
}
Now after implementing these methods in Presenter file we have to implement the methods. The function resetPasswordSuccess() works as :
override fun resetPasswordSuccess() { startActivity(Intent(this@LoginActivity, ForgotPass::class.java)) } |
On successful request for the password from the server the above method in the activity is called and so it takes us to the new activity. The new activity only contains a simple screen with a default message :
The above screen is the final output once we click on Forgot Password? on the login screen.
References :
Trying to Build Android MVP App in Kotlin – Eminarti Sianturi https://android.jlelse.eu/trying-to-build-android-mvp-app-in-kotlin-afdff9da2f28
Build a Responsive UI with constraint layout
https://developer.android.com/training/constraint-layout/
How the presenter and view interact in the MVP pattern