Enhance phone validation with country picker and richer error messages#19079
Enhance phone validation with country picker and richer error messages#19079
Conversation
#19052) - Add PhoneValidationResult model and Validate() method to IPhoneFormatValidator with default interface implementation for backward compatibility - Implement rich validation in DefaultPhoneFormatValidator using libphonenumber-csharp with specific error messages (invalid country code, too short, too long, etc.) - Add intl-tel-input phone input component with country dropdown, flags, dial codes, as-you-type formatting, and inline validation icons - Bundle as ES module via Vite with dark mode support and OrchardCore asset conventions - Update UserPhoneNumber.Edit.cshtml and SmsAuthenticator/Index.cshtml to use new component - Normalize phone numbers to E.164 format on save in UserInformationDisplayDriver and SmsAuthenticatorController - Add DefaultPhoneRegion setting to LoginSettings with admin UI configuration - Add RegionCode and DefaultRegion to EditUserPhoneNumberViewModel
|
@copilot where should I put these development plans documentation so that it doesn't break the "Validating building the documentation" Github workflow? |
…breaking docs build Agent-Logs-Url: https://github.com/OrchardCMS/OrchardCore/sessions/d780ebc1-80de-4043-a34b-81f3214ba357 Co-authored-by: Skrypt <3228637+Skrypt@users.noreply.github.com>
Development plan docs should go in |
Extract the phone input validation icons and hidden input syncing logic into a new @orchardcore/bloom component (phone-input.ts). The Bloom component is library-agnostic — it receives an intl-tel-input instance rather than importing it directly, keeping Bloom dependency-free. The entry point in OrchardCore.Users handles DOM construction, intl-tel-input initialization, and CSS, then delegates to the Bloom component. This allows the phone input behavior to be reused by any module that needs phone validation.
sebastienros
left a comment
There was a problem hiding this comment.
The Tel editor, should allow users to optionally pick a region. But by default it will be empty and then the phone editor will use the Thread region.
…n server-side Agent-Logs-Url: https://github.com/OrchardCMS/OrchardCore/sessions/049fa9bc-db1b-46fb-a41e-c1204fd4c1e3 Co-authored-by: Skrypt <3228637+Skrypt@users.noreply.github.com>
Done in commit |
Agent-Logs-Url: https://github.com/OrchardCMS/OrchardCore/sessions/850a17dc-4470-4e33-b689-8eff51b005d6 Co-authored-by: Skrypt <3228637+Skrypt@users.noreply.github.com>
…9100) Co-authored-by: Hisham Bin Ateya <hishamco_2007@yahoo.com>
Co-authored-by: Zoltán Lehóczky <zoltan.lehoczky@lombiq.com>
* File upload limit docs * Address feedback
…es page (#19113) Co-authored-by: andy zheng <yunnancanada@gmail.com>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
…tup (#19109) Co-authored-by: Georg von Kries <gvk@creativbox.net>
Co-authored-by: Georg von Kries <gvk@creativbox.net>
|
This pull request has merge conflicts. Please resolve those before requesting a review. |
# Conflicts: # src/OrchardCore.Modules/OrchardCore.ContentFields/Views/TextField-Tel.Edit.cshtml
|
Is it ready for review? |
|
This pull request has merge conflicts. Please resolve those before requesting a review. |
| @@ -0,0 +1,18 @@ | |||
| @{ | |||
There was a problem hiding this comment.
This is a new module that could be moved to a different PR. I refactored the MonacoEditor integrations with a new MonacoEditor shape to show an example and also show the utility of the module. We have a lot of code in OC that could make use of a CommonShape module like this.
…overlay status icon
|
Content Type picker, Media manager, are these shapes or components (vuejs or viewcomponent). Should we follow the same pattern? I wonder if these should be shapes. |
|
I need something shareable. Either shapes (server side) and / or common JS framework "Bloom". Need to think about it. But also, this would centralize components in one place instead of having them everywhere. |

Description
PhoneValidationResultwithResult<PhoneEntry>fromOrchardCore.InfrastructureinIPhoneFormatValidator.Validate(), keepingPhoneValidationResultmarked[Obsolete]for backward compatibilityIsValid()as[Obsolete]with a default interface implementation that delegates toValidate(), so existing implementations remain compatible without changesIPhoneFormatValidatorshowing how to callValidate()and accessE164Number,NationalNumber,RegionCode, andCountryCode;PhoneEntryalso has full XML docsDefaultPhoneFormatValidatorusing libphonenumber-csharp, returning all previously available field values viaPhoneEntryinsideResult<PhoneEntry>with detailed localized error messages (invalid country code, too short, too long, etc.)UserPhoneNumber.Edit.cshtmlandSmsAuthenticator/Index.cshtmlto use the new componentUserPhoneNumberDisplayDriverandSmsAuthenticatorControllerDefaultPhoneRegionfromLoginSettingsentirely; useThread.CurrentThread.CurrentUICultureas the server-side region fallback when no region code is submitted.node-versionfile (24.14.1) to fix CI copilot job failure caused by the branch missing the file introduced in a recentmainPRdevelopment/tonot_in_navinmkdocs.ymlso internal development plan docs undersrc/docs/development/are excluded from the docs navigation without breaking the "Validating Building the Documentation" CI workflow