Update login form to Material Design 2 (#229)

app/build.gradle

@@ -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'

app/src/main/java/io/github/wulkanowy/ui/modules/login/form/LoginFormFragment.kt

@@ -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()
     }

app/src/main/java/io/github/wulkanowy/ui/modules/login/form/LoginFormPresenter.kt

@@ -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
 

app/src/main/java/io/github/wulkanowy/ui/modules/login/form/LoginFormView.kt

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

app/src/main/java/io/github/wulkanowy/ui/modules/login/symbol/LoginSymbolFragment.kt

@@ -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 {
+        loginSymbolNameLayout.apply {
-            text = null
+            editText?.text = null
             requestFocus()
         }
     }

app/src/main/java/io/github/wulkanowy/ui/modules/login/symbol/LoginSymbolPresenter.kt

@@ -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()

app/src/main/java/io/github/wulkanowy/ui/modules/login/symbol/LoginSymbolView.kt

@@ -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()

app/src/main/java/io/github/wulkanowy/utils/EditTextExtension.kt

@@ -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) {}
+    })
+}

app/src/main/res/drawable/ic_login_outlined_border.xml

@@ -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>

app/src/main/res/layout/fragment_login_form.xml

@@ -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:padding="24dp">
-            android:layout_marginTop="16dp"
-            android:layout_marginRight="16dp"
-            android:orientation="vertical">
 
             <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:layout_marginTop="24dp"
-                android:hint="@string/login_nickname_hint">
+                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:layout_marginTop="10dp"
-                android:hint="@string/login_password_hint">
+                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>
 
+            <LinearLayout
+                android:id="@+id/loginFormHostLayout"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                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.AppCompatSpinner
                     android:id="@+id/loginFormHost"
                     android:layout_width="match_parent"
-                android:layout_height="wrap_content"
+                    android:layout_height="56dp" />
-                android:hint="@string/login_host_hint" />
+            </LinearLayout>
 
-            <androidx.appcompat.widget.AppCompatButton
+            <TextView
-                android:id="@+id/loginFormSignIn"
+                android:layout_width="wrap_content"
-                style="?android:textAppearanceSmall"
-                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginTop="20dp"
+                android:layout_marginStart="7dp"
-                android:layout_marginBottom="30dp"
+                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_gravity="center_vertical"
-                android:layout_marginBottom="30dp"
+                android:layout_marginEnd="16dp"
-                android:textColor="@color/second_text"
+                android:layout_marginRight="16dp"
-                android:visibility="gone" />
+                android:maxLines="2"
-        </LinearLayout>
+                android:textColor="?android:textColorSecondary"
-    </ScrollView>
+                android:textSize="12sp"
-</RelativeLayout>
+                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>

app/src/main/res/layout/fragment_login_symbol.xml

@@ -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_marginStart="24dp"
-            android:layout_marginTop="16dp"
+            android:layout_marginLeft="24dp"
-            android:layout_marginRight="16dp"
+            android:layout_marginTop="24dp"
-            android:orientation="vertical">
+            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"
+                style="@style/Widget.MaterialComponents.Button"
-                android:layout_width="match_parent"
+                android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:layout_marginTop="20dp"
+                android:layout_gravity="center_vertical"
-                android:layout_marginBottom="30dp"
+                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" />
+                app:backgroundTint="@color/colorPrimary"
-        </LinearLayout>
+                app:layout_constraintBottom_toBottomOf="parent"
-    </ScrollView>
+                app:layout_constraintEnd_toEndOf="parent"
-</RelativeLayout>
+                app:layout_constraintTop_toBottomOf="@+id/loginSymbolNameLayout"
+                app:layout_constraintVertical_bias="1" />
+        </androidx.constraintlayout.widget.ConstraintLayout>
+    </androidx.core.widget.NestedScrollView>
+</FrameLayout>

app/src/main/res/layout/item_widget_timetable.xml

@@ -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>

app/src/main/res/values-pl/strings.xml

@@ -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-->

app/src/main/res/values/colors.xml

@@ -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>

app/src/main/res/values/strings.xml

@@ -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-->