Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add button to toggle password visibility #3894

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
package org.jellyfin.androidtv.ui.startup.fragment

import android.os.Bundle
import android.text.InputType
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
Expand Down Expand Up @@ -28,6 +29,7 @@ class UserLoginCredentialsFragment : Fragment() {
private val userLoginViewModel: UserLoginViewModel by activityViewModel()
private var _binding: FragmentUserLoginCredentialsBinding? = null
private val binding get() = _binding!!
private var isPasswordVisible: Boolean = false

override fun onCreateView(
inflater: LayoutInflater,
Expand Down Expand Up @@ -58,6 +60,10 @@ class UserLoginCredentialsFragment : Fragment() {
}
}

with (binding.togglePasswordVisibilityButton) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
with (binding.togglePasswordVisibilityButton) {
with(binding.togglePasswordVisibilityButton) {

setOnClickListener { togglePasswordVisibility() }
}

with(binding.confirm) {
setOnClickListener { loginWithCredentials() }
}
Expand Down Expand Up @@ -117,4 +123,17 @@ class UserLoginCredentialsFragment : Fragment() {
else -> binding.error.setText(R.string.login_username_field_empty)
}
}

private fun togglePasswordVisibility() {
isPasswordVisible = !isPasswordVisible
if (isPasswordVisible) {
binding.password.inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
binding.togglePasswordVisibilityButton.setImageResource(R.drawable.ic_visibility)
} else {
binding.password.inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD
binding.togglePasswordVisibilityButton.setImageResource(R.drawable.ic_visibility_off)
}

binding.password.setSelection(binding.password.text.length)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this line does anything

}
}
5 changes: 5 additions & 0 deletions app/src/main/res/drawable/ic_visibility.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">

<path android:fillColor="@android:color/white" android:pathData="M12,4.5C7,4.5 2.73,7.61 1,12c1.73,4.39 6,7.5 11,7.5s9.27,-3.11 11,-7.5c-1.73,-4.39 -6,-7.5 -11,-7.5zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5zM12,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3 3,-1.34 3,-3 -1.34,-3 -3,-3z"/>

</vector>
5 changes: 5 additions & 0 deletions app/src/main/res/drawable/ic_visibility_off.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please make sure both icons are formatted the same as all existing icons, including the same attributes for tint.


<path android:fillColor="@android:color/white" android:pathData="M12,7c2.76,0 5,2.24 5,5 0,0.65 -0.13,1.26 -0.36,1.83l2.92,2.92c1.51,-1.26 2.7,-2.89 3.43,-4.75 -1.73,-4.39 -6,-7.5 -11,-7.5 -1.4,0 -2.74,0.25 -3.98,0.7l2.16,2.16C10.74,7.13 11.35,7 12,7zM2,4.27l2.28,2.28 0.46,0.46C3.08,8.3 1.78,10.02 1,12c1.73,4.39 6,7.5 11,7.5 1.55,0 3.03,-0.3 4.38,-0.84l0.42,0.42L19.73,22 21,20.73 3.27,3 2,4.27zM7.53,9.8l1.55,1.55c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.66 1.34,3 3,3 0.22,0 0.44,-0.03 0.65,-0.08l1.55,1.55c-0.67,0.33 -1.41,0.53 -2.2,0.53 -2.76,0 -5,-2.24 -5,-5 0,-0.79 0.2,-1.53 0.53,-2.2zM11.84,9.02l3.15,3.15 0.02,-0.16c0,-1.66 -1.34,-3 -3,-3l-0.17,0.01z"/>

</vector>
47 changes: 35 additions & 12 deletions app/src/main/res/layout/fragment_user_login_credentials.xml
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,42 @@
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/username" />

<EditText
android:id="@+id/password"
style="@style/Input.Default"
android:layout_width="0dp"
<androidx.constraintlayout.widget.ConstraintLayout
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merge this constraint layout into the parent constraint layout. Traditional layouts are inefficient.

android:id="@+id/password_constraint_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:autofillHints="password"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:privateImeOptions="horizontalAlignment=right"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/password_label" />
app:layout_constraintTop_toBottomOf="@id/password_label" >

<EditText
android:id="@+id/password"
style="@style/Input.Default"
android:layout_width="0dp"
android:layout_height="wrap_content"

android:autofillHints="password"
android:imeOptions="actionDone"
android:inputType="textPassword"
android:privateImeOptions="horizontalAlignment=right"
app:layout_constraintEnd_toStartOf="@+id/toggle_password_visibility_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="@id/toggle_password_visibility_button"
/>

<ImageButton
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The background is wrong when focused:

image

The ripple effect on activation seems to be fine.

android:id="@+id/toggle_password_visibility_button"
style="@style/Button.Icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:background="?attr/selectableItemBackground"
android:contentDescription="@string/show_or_hide_password"
android:src="@drawable/ic_visibility_off"
app:layout_constraintBottom_toBottomOf="@id/password"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/password"
app:layout_constraintTop_toTopOf="@id/password" />
</androidx.constraintlayout.widget.ConstraintLayout>

<Button
android:id="@+id/confirm"
Expand All @@ -61,7 +84,7 @@
android:text="@string/action_login"
app:layout_constraintEnd_toStartOf="@id/error"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/password" />
app:layout_constraintTop_toBottomOf="@id/password_constraint_layout" />

<TextView
android:id="@+id/error"
Expand Down
1 change: 1 addition & 0 deletions app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -514,6 +514,7 @@
<string name="past_week">Past week</string>
<string name="scheduled_in_next_24_hours">Scheduled in next 24 hours</string>
<string name="past_24_hours">Past 24 hours</string>
<string name="show_or_hide_password">show or hide password</string>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<string name="show_or_hide_password">show or hide password</string>
<string name="show_or_hide_password">Show password</string>

<plurals name="seconds">
<item quantity="one">%1$s second</item>
<item quantity="other">%1$s seconds</item>
Expand Down
Loading