Update login form to Material Design 2 (#229)

This commit is contained in:
Dominik Korsa 2019-02-17 00:42:09 +01:00 committed by Mikołaj Pich
parent 11b6c00e4a
commit 1d7585071d
15 changed files with 218 additions and 74 deletions

View File

@ -79,6 +79,7 @@ dependencies {
implementation "androidx.appcompat:appcompat:1.0.2"
implementation "androidx.cardview:cardview:1.0.0"
implementation "com.google.android.material:material:1.0.0"
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
implementation 'androidx.multidex:multidex:2.0.1'
implementation 'com.takisoft.preferencex:preferencex:1.0.0'

View File

@ -16,6 +16,8 @@ import io.github.wulkanowy.data.db.entities.Student
import io.github.wulkanowy.ui.base.BaseFragment
import io.github.wulkanowy.ui.modules.login.LoginActivity
import io.github.wulkanowy.utils.hideSoftInput
import io.github.wulkanowy.utils.setOnItemSelectedListener
import io.github.wulkanowy.utils.setOnTextChangedListener
import io.github.wulkanowy.utils.showSoftInput
import kotlinx.android.synthetic.main.fragment_login_form.*
import javax.inject.Inject
@ -47,10 +49,15 @@ class LoginFormFragment : BaseFragment(), LoginFormView {
)
}
loginFormName.setOnTextChangedListener { presenter.onNameTextChanged() }
loginFormPass.setOnTextChangedListener { presenter.onPassTextChanged() }
loginFormPass.setOnEditorActionListener { _, id, _ ->
if (id == IME_ACTION_DONE || id == IME_NULL) loginFormSignIn.callOnClick() else false
}
loginFormHost.setOnItemSelectedListener { presenter.onHostSelected() }
context?.let {
loginFormHost.adapter = ArrayAdapter.createFromResource(it, R.array.endpoints_keys, android.R.layout.simple_spinner_item)
.apply { setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item) }
@ -58,33 +65,41 @@ class LoginFormFragment : BaseFragment(), LoginFormView {
}
override fun setErrorNameRequired() {
loginFormName.run {
loginFormNameLayout.run {
requestFocus()
error = getString(R.string.login_field_required)
}
}
override fun setErrorPassRequired(focus: Boolean) {
loginFormPass.run {
loginFormPassLayout.run {
if (focus) requestFocus()
error = getString(R.string.login_field_required)
}
}
override fun setErrorPassInvalid(focus: Boolean) {
loginFormPass.run {
loginFormPassLayout.run {
if (focus) requestFocus()
error = getString(R.string.login_invalid_password)
}
}
override fun setErrorPassIncorrect() {
loginFormPass.run {
loginFormPassLayout.run {
requestFocus()
error = getString(R.string.login_incorrect_password)
}
}
override fun clearNameError() {
loginFormNameLayout.error = null
}
override fun clearPassError() {
loginFormPassLayout.error = null
}
override fun showSoftKeyboard() {
activity?.showSoftInput()
}

View File

@ -31,6 +31,21 @@ class LoginFormPresenter @Inject constructor(
}
}
fun onHostSelected() {
view?.apply {
clearPassError()
clearNameError()
}
}
fun onPassTextChanged() {
view?.clearPassError()
}
fun onNameTextChanged() {
view?.clearNameError()
}
fun attemptLogin(email: String, password: String, endpoint: String) {
if (!validateCredentials(email, password)) return

View File

@ -15,6 +15,10 @@ interface LoginFormView : BaseView {
fun setErrorPassIncorrect()
fun clearNameError()
fun clearPassError()
fun showSoftKeyboard()
fun hideSoftKeyboard()

View File

@ -14,6 +14,7 @@ import io.github.wulkanowy.data.db.entities.Student
import io.github.wulkanowy.ui.base.BaseFragment
import io.github.wulkanowy.ui.modules.login.LoginActivity
import io.github.wulkanowy.utils.hideSoftInput
import io.github.wulkanowy.utils.setOnTextChangedListener
import io.github.wulkanowy.utils.showSoftInput
import kotlinx.android.synthetic.main.fragment_login_symbol.*
import javax.inject.Inject
@ -29,6 +30,9 @@ class LoginSymbolFragment : BaseFragment(), LoginSymbolView {
fun newInstance() = LoginSymbolFragment()
}
override val symbolNameError: CharSequence?
get() = loginSymbolNameLayout.error
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.fragment_login_symbol, container, false)
}
@ -41,6 +45,8 @@ class LoginSymbolFragment : BaseFragment(), LoginSymbolView {
override fun initView() {
loginSymbolSignIn.setOnClickListener { presenter.attemptLogin(loginSymbolName.text.toString()) }
loginSymbolName.setOnTextChangedListener { presenter.onSymbolTextChanged() }
loginSymbolName.apply {
setOnEditorActionListener { _, id, _ ->
if (id == IME_ACTION_DONE || id == IME_NULL) loginSymbolSignIn.callOnClick() else false
@ -54,22 +60,26 @@ class LoginSymbolFragment : BaseFragment(), LoginSymbolView {
}
override fun setErrorSymbolIncorrect() {
loginSymbolName.apply {
loginSymbolNameLayout.apply {
requestFocus()
error = getString(R.string.login_incorrect_symbol)
}
}
override fun setErrorSymbolRequire() {
loginSymbolName.apply {
loginSymbolNameLayout.apply {
requestFocus()
error = getString(R.string.login_field_required)
}
}
override fun clearSymbolError() {
loginSymbolNameLayout.error = null
}
override fun clearAndFocusSymbol() {
loginSymbolName.apply {
text = null
loginSymbolNameLayout.apply {
editText?.text = null
requestFocus()
}
}

View File

@ -29,6 +29,10 @@ class LoginSymbolPresenter @Inject constructor(
}
}
fun onSymbolTextChanged() {
view?.apply { if (symbolNameError != null) clearSymbolError() }
}
fun attemptLogin(symbol: String) {
if (symbol.isBlank()) {
view?.setErrorSymbolRequire()

View File

@ -5,12 +5,16 @@ import io.github.wulkanowy.ui.base.BaseView
interface LoginSymbolView : BaseView {
val symbolNameError: CharSequence?
fun initView()
fun setErrorSymbolIncorrect()
fun setErrorSymbolRequire()
fun clearSymbolError()
fun clearAndFocusSymbol()
fun showSoftKeyboard()

View File

@ -0,0 +1,16 @@
package io.github.wulkanowy.utils
import android.text.Editable
import android.text.TextWatcher
import android.widget.EditText
inline fun EditText.setOnTextChangedListener(crossinline listener: () -> Unit) {
addTextChangedListener(object : TextWatcher {
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
listener()
}
override fun afterTextChanged(s: Editable?) {}
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
})
}

View File

@ -0,0 +1,11 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke
android:width="1dip"
android:color="#61000000" />
<corners android:radius="4dip" />
<padding
android:bottom="0dip"
android:left="0dip"
android:right="0dip"
android:top="0dip" />
</shape>

View File

@ -1,5 +1,6 @@
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
@ -7,9 +8,6 @@
android:id="@+id/loginFormProgressContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:visibility="gone">
@ -17,14 +15,14 @@
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/loginFormProgressText"
android:layout_below="@id/loginFormProgressTitle"
android:layout_centerHorizontal="true"
android:indeterminate="true"
android:minWidth="220dp"
android:minHeight="30dp" />
<TextView
android:id="@+id/loginFormProgressText"
android:id="@+id/loginFormProgressTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
@ -32,35 +30,41 @@
android:text="@string/login_progress" />
</RelativeLayout>
<ScrollView
<androidx.core.widget.NestedScrollView
android:id="@+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/loginFormContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:orientation="vertical">
android:padding="24dp">
<TextView
android:id="@+id/loginFormHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="24dp"
android:text="@string/login_header_default"
android:textSize="16sp" />
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/loginFormNameLayout"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:hint="@string/login_nickname_hint">
android:layout_marginTop="24dp"
android:hint="@string/login_nickname_hint"
app:errorEnabled="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/loginFormHeader">
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/loginFormName"
@ -72,10 +76,17 @@
</com.google.android.material.textfield.TextInputLayout>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/loginFormPassLayout"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:hint="@string/login_password_hint">
android:layout_marginTop="10dp"
android:hint="@string/login_password_hint"
app:errorEnabled="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/loginFormNameLayout"
app:passwordToggleEnabled="true">
<androidx.appcompat.widget.AppCompatEditText
android:id="@+id/loginFormPass"
@ -89,32 +100,72 @@
</com.google.android.material.textfield.TextInputLayout>
<androidx.appcompat.widget.AppCompatSpinner
android:id="@+id/loginFormHost"
<LinearLayout
android:id="@+id/loginFormHostLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/login_host_hint" />
android:layout_marginTop="15dp"
android:background="@drawable/ic_login_outlined_border"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/loginFormPassLayout">
<androidx.appcompat.widget.AppCompatButton
android:id="@+id/loginFormSignIn"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
<androidx.appcompat.widget.AppCompatSpinner
android:id="@+id/loginFormHost"
android:layout_width="match_parent"
android:layout_height="56dp" />
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="30dp"
android:layout_marginStart="7dp"
android:layout_marginLeft="7dp"
android:layout_marginBottom="48dp"
android:background="?android:colorBackground"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="@string/login_host_hint"
android:textColor="?android:textColorHint"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@+id/loginFormHostLayout"
app:layout_constraintEnd_toEndOf="@+id/loginFormHostLayout"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/loginFormHostLayout" />
<com.google.android.material.button.MaterialButton
android:id="@+id/loginFormSignIn"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="50dp"
android:text="@string/login_sign_in"
android:textAppearance="?android:textAppearanceSmall"
android:textColor="@android:color/white"
android:textStyle="bold"
app:backgroundTint="@color/colorPrimary" />
app:backgroundTint="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/loginFormHostLayout"
app:layout_constraintVertical_bias="0.84" />
<TextView
android:id="@+id/loginFormVersion"
android:layout_width="wrap_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="30dp"
android:textColor="@color/second_text"
android:visibility="gone" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
android:layout_gravity="center_vertical"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:maxLines="2"
android:textColor="?android:textColorSecondary"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@id/loginFormSignIn"
app:layout_constraintEnd_toStartOf="@+id/loginFormSignIn"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/loginFormSignIn"
tools:text="Version 1.0.0" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</FrameLayout>

View File

@ -1,4 +1,4 @@
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
@ -8,9 +8,6 @@
android:id="@+id/loginSymbolProgressContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center"
android:visibility="gone">
@ -33,33 +30,44 @@
android:text="@string/login_progress" />
</RelativeLayout>
<ScrollView
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none">
<LinearLayout
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/loginSymbolContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:orientation="vertical">
android:layout_marginStart="24dp"
android:layout_marginLeft="24dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="24dp"
android:layout_marginRight="24dp">
<TextView
android:id="@+id/loginSymbolHeader"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="24dp"
android:text="@string/login_header_symbol"
android:textSize="16sp" />
android:textSize="16sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/loginSymbolNameLayout"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/login_symbol_hint">
android:layout_marginTop="24dp"
android:hint="@string/login_symbol_hint"
app:helperText="@string/login_symbol_helper"
app:helperTextEnabled="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/loginSymbolHeader">
<AutoCompleteTextView
android:id="@+id/loginSymbolName"
@ -72,17 +80,22 @@
tools:ignore="LabelFor" />
</com.google.android.material.textfield.TextInputLayout>
<androidx.appcompat.widget.AppCompatButton
<com.google.android.material.button.MaterialButton
android:id="@+id/loginSymbolSignIn"
style="?android:textAppearanceSmall"
android:layout_width="match_parent"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="30dp"
android:layout_gravity="center_vertical"
android:layout_marginBottom="48dp"
android:text="@string/login_sign_in"
android:textAppearance="?android:textAppearanceSmall"
android:textColor="@android:color/white"
android:textStyle="bold"
app:backgroundTint="@color/colorPrimary" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
app:backgroundTint="@color/colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/loginSymbolNameLayout"
app:layout_constraintVertical_bias="1" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</FrameLayout>

View File

@ -32,7 +32,7 @@
android:layout_toEndOf="@id/timetableWidgetItemNumber"
android:layout_toRightOf="@id/timetableWidgetItemNumber"
android:text="@string/app_name"
android:textColor="@color/second_text"
android:textColor="@android:color/secondary_text_light"
android:textSize="13sp" />
<TextView
@ -47,7 +47,7 @@
android:layout_toEndOf="@id/timetableWidgetItemTime"
android:layout_toRightOf="@id/timetableWidgetItemTime"
android:text="@string/app_name"
android:textColor="@color/second_text"
android:textColor="@android:color/secondary_text_light"
android:textSize="13sp" />
<TextView
@ -79,6 +79,6 @@
android:layout_toEndOf="@id/timetableWidgetItemNumber"
android:layout_toRightOf="@id/timetableWidgetItemNumber"
android:text="@string/app_name"
android:textColor="@color/second_text"
android:textColor="@android:color/secondary_text_light"
android:textSize="12sp" />
</RelativeLayout>

View File

@ -32,6 +32,7 @@
<string name="login_incorrect_symbol">Nie znaleziono ucznia. Sprwadź symbol</string>
<string name="login_field_required">To pole jest wymagane</string>
<string name="login_duplicate_student">Ten student jest już zalogowany</string>
<string name="login_symbol_helper">Symbol znajduje się na stronie dziennika w zakładce Dostęp Mobilny</string>
<!--Main-->

View File

@ -14,8 +14,6 @@
<color name="grade_one">#d65757</color>
<color name="grade_default">#3d5f9c</color>
<color name="second_text">#474747</color>
<color name="bottom_nav_background">#303030</color>
<color name="bottom_nav_background_inverse">#ffffff</color>
</resources>

View File

@ -22,7 +22,7 @@
<string name="login_header_symbol">Enter the VULCAN diary symbol</string>
<string name="login_nickname_hint">Email or nick</string>
<string name="login_password_hint">Password</string>
<string name="login_host_hint">Log</string>
<string name="login_host_hint">Register</string>
<string name="login_symbol_hint">Symbol</string>
<string name="login_sign_in">Sign in</string>
<string name="login_progress">Logging in&#8230;</string>
@ -32,6 +32,7 @@
<string name="login_incorrect_symbol">Student not found. Check the symbol</string>
<string name="login_field_required">This field is required</string>
<string name="login_duplicate_student">This student has already been logged in</string>
<string name="login_symbol_helper">The symbol is located on the register page in the Mobile Access tab</string>
<!--Main-->