[PR #1964] [MERGED] [SG-416] Updates to Bitwarden Authenticator #3256

Closed
opened 2025-11-26 23:30:21 -06:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/bitwarden/android/pull/1964
Author: @andrebispo5
Created: 6/27/2022
Status: Merged
Merged: 7/26/2022
Merged by: @andrebispo5

Base: feature/feature-totpHead: feature/totp-tab


📝 Commits (10+)

  • b02c58e Initial commit of new TOTP page
  • bb37bac Revert config files from previous commit
  • 98dd829 clear extra code and fix build
  • 0ad992f add tab page
  • 26e0e43 Merge branch 'master' into beeep-totp
  • 008ed8e add authentication view cell
  • 3ac2580 add toolbar icons
  • 0b626ce got the countdown working
  • 655b51b Merge branch 'master' into beeep-totp
  • 31d1a2e enable context loading and vm init

📊 Changes

29 files changed (+2702 additions, -3540 deletions)

View changed files

📝 src/Android/Properties/AndroidManifest.xml (+1 -1)
src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml (+127 -0)
src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml.cs (+67 -0)
src/App/Controls/CircularProgressbarView.cs (+139 -0)
📝 src/App/Pages/Vault/AddEditPage.xaml (+32 -2)
📝 src/App/Pages/Vault/AddEditPageViewModel.cs (+21 -1)
📝 src/App/Pages/Vault/GroupingsPage/GroupingsPage.xaml (+33 -0)
📝 src/App/Pages/Vault/GroupingsPage/GroupingsPage.xaml.cs (+9 -1)
📝 src/App/Pages/Vault/GroupingsPage/GroupingsPageListGroup.cs (+3 -3)
📝 src/App/Pages/Vault/GroupingsPage/GroupingsPageListItemSelector.cs (+7 -0)
src/App/Pages/Vault/GroupingsPage/GroupingsPageTOTPListItem.cs (+123 -0)
📝 src/App/Pages/Vault/GroupingsPage/GroupingsPageViewModel.cs (+68 -8)
📝 src/App/Pages/Vault/ScanPage.xaml (+107 -47)
📝 src/App/Pages/Vault/ScanPage.xaml.cs (+159 -12)
src/App/Pages/Vault/ScanPageViewModel.cs (+61 -0)
📝 src/App/Pages/Vault/ViewPage.xaml (+51 -30)
📝 src/App/Pages/Vault/ViewPage.xaml.cs (+1 -1)
📝 src/App/Pages/Vault/ViewPageViewModel.cs (+39 -64)
📝 src/App/Resources/AppResources.Designer.cs (+1421 -3364)
📝 src/App/Resources/AppResources.resx (+47 -5)

...and 9 more files

📄 Description

Type of change

  • Bug fix
  • New feature development
  • Tech debt (refactoring, code cleanup, dependency upgrades, etc)
  • Build/deploy pipeline (DevOps)
  • Other

Objective

Rework on Authenticator UI/UX in order to improve its usability and promote the use of scanner the feature for TOTP setup. Also hoping to clarify the feature differences based on the plan selected.

Code changes

Clients PR: https://github.com/bitwarden/clients/pull/3045

  • src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml:
    New cell UI to show TOTP code circular progress and cipher info. Will appear on cipher list with TOTP toggle on.
  • src/App/Controls/CircularProgressbarView.xaml.cs:
    Circular progress control has some properties to customise its appearance. The file also contains some helper classes that are only used here in this control.
  • src/App/Pages/Vault/AddEditPage.xaml:
    In order to make the button with the camera icon and text work, avoiding many forms bugs, i had to create a frame and place an IconLabel inside. There is a bug with the ButtonView where the text gets clipped.
  • src/App/Pages/Vault/GroupingsPage/GroupingsPage.xaml:
    New header to have the toggle for TOTP ciphers. Added new data template to support the authenticator cells.
  • src/App/Pages/Vault/GroupingsPage/GroupingsPageListGroup.cs:
    Changed inherit list type to the generic interface in order to use the GroupingsPageTOTPListItem in the selector.
  • src/App/Pages/Vault/ScanPage.xaml
    Added SKCanvasView to hold the scanning animation. Also added the new UI to enter the code manually.
  • src/App/Pages/Vault/ScanPage.xaml.cs
    Added method to draw the scanning squared corners into the SKCanvasView. The object being drawn gets its size from a global variable _scale that is calculated based on a Sine function and a Stopwatch. Currently it is being drawn by the animation loop at a rate of 1/30 of a second, if we see there is some kind of performance impairment, we can increase this value.

Screenshots

New toggle to show only ciphers with TOTP codes:
image
New list of ciphers with only TOTP codes:
image
Toast when copy TOTP value:
image
New QRCode scanning animation, the square corners pulse and turn green when code found also phone vibrates:
image
New UI to enter the code manually:
image
Free users won't be able to see the TOTP code, instead helper text is shown:
image
Premium users will see a circular progress and the TOTP code:
image
Authentication key when empty, will only show a button the scan a QRCode:
image

Before you submit

  • I have checked for formatting errors (dotnet tool run dotnet-format --check) (required)
  • I have added unit tests where it makes sense to do so (encouraged but not required)
  • This change requires a documentation update (notify the documentation team)
  • This change has particular deployment requirements (notify the DevOps team)

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/bitwarden/android/pull/1964 **Author:** [@andrebispo5](https://github.com/andrebispo5) **Created:** 6/27/2022 **Status:** ✅ Merged **Merged:** 7/26/2022 **Merged by:** [@andrebispo5](https://github.com/andrebispo5) **Base:** `feature/feature-totp` ← **Head:** `feature/totp-tab` --- ### 📝 Commits (10+) - [`b02c58e`](https://github.com/bitwarden/android/commit/b02c58e3623781ada1e9e8f820b403a5c48274aa) Initial commit of new TOTP page - [`bb37bac`](https://github.com/bitwarden/android/commit/bb37bac620e99ec6a117170e64015edecf37d39d) Revert config files from previous commit - [`98dd829`](https://github.com/bitwarden/android/commit/98dd8298ea920e25b45938f805b005b5c70158e9) clear extra code and fix build - [`0ad992f`](https://github.com/bitwarden/android/commit/0ad992faeca1480b25524371bed5195520f1f2db) add tab page - [`26e0e43`](https://github.com/bitwarden/android/commit/26e0e43bb47df9685fcbbda8df6f6e9bc2e0f24a) Merge branch 'master' into beeep-totp - [`008ed8e`](https://github.com/bitwarden/android/commit/008ed8eb56cf273d04037df5da57264eb22cfb25) add authentication view cell - [`3ac2580`](https://github.com/bitwarden/android/commit/3ac2580742bb9862490dc6e709cae6753054d7d0) add toolbar icons - [`0b626ce`](https://github.com/bitwarden/android/commit/0b626cedc7405ab7a20950159bd6b13f9a1202e3) got the countdown working - [`655b51b`](https://github.com/bitwarden/android/commit/655b51b6a585754d90aca1a3ff85973047dc3cde) Merge branch 'master' into beeep-totp - [`31d1a2e`](https://github.com/bitwarden/android/commit/31d1a2e083a58a1a503c6435ee0b08fd192e517b) enable context loading and vm init ### 📊 Changes **29 files changed** (+2702 additions, -3540 deletions) <details> <summary>View changed files</summary> 📝 `src/Android/Properties/AndroidManifest.xml` (+1 -1) ➕ `src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml` (+127 -0) ➕ `src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml.cs` (+67 -0) ➕ `src/App/Controls/CircularProgressbarView.cs` (+139 -0) 📝 `src/App/Pages/Vault/AddEditPage.xaml` (+32 -2) 📝 `src/App/Pages/Vault/AddEditPageViewModel.cs` (+21 -1) 📝 `src/App/Pages/Vault/GroupingsPage/GroupingsPage.xaml` (+33 -0) 📝 `src/App/Pages/Vault/GroupingsPage/GroupingsPage.xaml.cs` (+9 -1) 📝 `src/App/Pages/Vault/GroupingsPage/GroupingsPageListGroup.cs` (+3 -3) 📝 `src/App/Pages/Vault/GroupingsPage/GroupingsPageListItemSelector.cs` (+7 -0) ➕ `src/App/Pages/Vault/GroupingsPage/GroupingsPageTOTPListItem.cs` (+123 -0) 📝 `src/App/Pages/Vault/GroupingsPage/GroupingsPageViewModel.cs` (+68 -8) 📝 `src/App/Pages/Vault/ScanPage.xaml` (+107 -47) 📝 `src/App/Pages/Vault/ScanPage.xaml.cs` (+159 -12) ➕ `src/App/Pages/Vault/ScanPageViewModel.cs` (+61 -0) 📝 `src/App/Pages/Vault/ViewPage.xaml` (+51 -30) 📝 `src/App/Pages/Vault/ViewPage.xaml.cs` (+1 -1) 📝 `src/App/Pages/Vault/ViewPageViewModel.cs` (+39 -64) 📝 `src/App/Resources/AppResources.Designer.cs` (+1421 -3364) 📝 `src/App/Resources/AppResources.resx` (+47 -5) _...and 9 more files_ </details> ### 📄 Description ## Type of change - [ ] Bug fix - [X] New feature development - [ ] Tech debt (refactoring, code cleanup, dependency upgrades, etc) - [ ] Build/deploy pipeline (DevOps) - [ ] Other ## Objective Rework on Authenticator UI/UX in order to improve its usability and promote the use of scanner the feature for TOTP setup. Also hoping to clarify the feature differences based on the plan selected. ## Code changes Clients PR: https://github.com/bitwarden/clients/pull/3045 <!--Explain the changes you've made to each file or major component. This should help the reviewer understand your changes--> <!--Also refer to any related changes or PRs in other repositories--> * **src/App/Controls/AuthenticatorViewCell/AuthenticatorViewCell.xaml:** New cell UI to show TOTP code circular progress and cipher info. Will appear on cipher list with TOTP toggle on. * **src/App/Controls/CircularProgressbarView.xaml.cs:** Circular progress control has some properties to customise its appearance. The file also contains some helper classes that are only used here in this control. * **src/App/Pages/Vault/AddEditPage.xaml:** In order to make the button with the camera icon and text work, avoiding many forms bugs, i had to create a frame and place an IconLabel inside. There is a bug with the `ButtonView` where the text gets clipped. * **src/App/Pages/Vault/GroupingsPage/GroupingsPage.xaml:** New header to have the toggle for TOTP ciphers. Added new data template to support the authenticator cells. * **src/App/Pages/Vault/GroupingsPage/GroupingsPageListGroup.cs:** Changed inherit list type to the generic interface in order to use the `GroupingsPageTOTPListItem` in the selector. * **src/App/Pages/Vault/ScanPage.xaml** Added `SKCanvasView` to hold the scanning animation. Also added the new UI to enter the code manually. * **src/App/Pages/Vault/ScanPage.xaml.cs** Added method to draw the scanning squared corners into the `SKCanvasView`. The object being drawn gets its size from a global variable `_scale` that is calculated based on a Sine function and a `Stopwatch`. Currently it is being drawn by the animation loop at a rate of 1/30 of a second, if we see there is some kind of performance impairment, we can increase this value. ## Screenshots <!--Required for any UI changes. Delete if not applicable--> New toggle to show only ciphers with TOTP codes: <img width="389" alt="image" src="https://user-images.githubusercontent.com/4648522/179601781-9bd56c25-cafa-4410-aacd-8c6096f55a73.png"> New list of ciphers with only TOTP codes: <img width="390" alt="image" src="https://user-images.githubusercontent.com/4648522/179601897-b4067fbc-3fca-4794-8f8a-b5defa328539.png"> Toast when copy TOTP value: <img width="399" alt="image" src="https://user-images.githubusercontent.com/4648522/177802932-654cf9ee-5fd8-4215-9735-ef346c4679ae.png"> New QRCode scanning animation, the square corners pulse and turn green when code found also phone vibrates: <img width="393" alt="image" src="https://user-images.githubusercontent.com/4648522/179598823-44597254-0010-413d-8950-0820189274ef.png"> New UI to enter the code manually: <img width="387" alt="image" src="https://user-images.githubusercontent.com/4648522/179599122-110d7b35-b38c-4fe8-a67f-1a72bf928a8d.png"> Free users won't be able to see the TOTP code, instead helper text is shown: <img width="388" alt="image" src="https://user-images.githubusercontent.com/4648522/177617249-79653405-39d1-4d51-945e-f6e83968e912.png"> Premium users will see a circular progress and the TOTP code: <img width="376" alt="image" src="https://user-images.githubusercontent.com/4648522/179597928-d81ef7dc-2bbc-463b-b92f-768cf01f4a48.png"> Authentication key when empty, will only show a button the scan a QRCode: <img width="387" alt="image" src="https://user-images.githubusercontent.com/4648522/177617304-fa6d9f69-dd8e-4d31-a6de-614987205f8f.png"> ## Before you submit - [ ] I have checked for formatting errors (`dotnet tool run dotnet-format --check`) (required) - [ ] I have added **unit tests** where it makes sense to do so (encouraged but not required) - [ ] This change requires a **documentation update** (notify the documentation team) - [ ] This change has particular **deployment requirements** (notify the DevOps team) --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2025-11-26 23:30:21 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/android#3256