ISS-205571: Refine description of masking and add examples #294
Conversation
…ing to DevRev SDK for React Native and Expo
zeeshan-devrev
added
the
documentation
🌟 EkLine ReviewerHello! I’m here to help improve your docs. I’ve reviewed your pull request, and left in-line suggestions for quick fixes. For details, visit the Analytics Page. For questions or feedback, please email support@ekline.io. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| DevRev.unmarkSensitiveViews(tags, successCallback, errorCallback) | ||
| ``` | ||
| - Mark an element as masked: | ||
| ```html |
There was a problem hiding this comment.
Instructional step is bulleted instead of numbered. Convert to a numbered list.
| ```html | |
| 1. Mark an element as masked. |
There was a problem hiding this comment.
Kept it the same as Android.
| DevRev.unmarkSensitiveViews(tags, successCallback, errorCallback) | ||
| ``` | ||
| - Mark an element as masked: | ||
| ```html |
There was a problem hiding this comment.
List item is an imperative sentence but does not end with appropriate punctuation. Add a period.
| ```html | |
| 1. Mark an element as masked. |
There was a problem hiding this comment.
Kept it the same as Android.
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` | ||
| - Mark an element as unmasked: | ||
| ```html |
There was a problem hiding this comment.
Instructional step is bulleted instead of numbered. Convert to a numbered list.
| ```html | |
| 2. Mark an element as unmasked. |
There was a problem hiding this comment.
Kept it the same as Android.
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` | ||
| - Mark an element as unmasked: | ||
| ```html |
There was a problem hiding this comment.
List item is an imperative sentence but does not end with appropriate punctuation. Add a period.
| ```html | |
| 2. Mark an element as unmasked. |
There was a problem hiding this comment.
Kept it the same as Android.
There was a problem hiding this comment.
Instructions should use numbered lists instead of bulleted lists for procedural steps.
fern-api-docs/fern/docs/pages/sdks/mobile/flutter/features.mdx
Lines 354 to 361 in 0335c28
There was a problem hiding this comment.
Since there is no change here, it can be ignored.
|
Published docs preview URL: https://devrev-preview-cc623df3-3e74-4bcb-9be5-d40583c09e00.docs.buildwithfern.com |
| DevRev.unmarkSensitiveViews(tags, successCallback, errorCallback) | ||
| ``` | ||
| - Mark an element as masked: | ||
| ```html |
There was a problem hiding this comment.
Instructional step is bulleted instead of numbered and should use imperative mood with proper punctuation.
| ```html | |
| 1. Mark an element as masked. |
There was a problem hiding this comment.
Kept it the same as Android.
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` | ||
| - Mark an element as unmasked: | ||
| ```html |
There was a problem hiding this comment.
Instructional step is bulleted instead of numbered and should use imperative mood with proper punctuation.
| ```html | |
| 2. Mark an element as unmasked. |
There was a problem hiding this comment.
Kept it the same as Android.
|
Published docs preview URL: https://devrev-preview-be337570-ce18-4f55-98ae-01c98cfa9119.docs.buildwithfern.com |
| - Mark an element as masked: | ||
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` | ||
| - Mark an element as unmasked: | ||
| ```html | ||
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | ||
| ``` |
There was a problem hiding this comment.
Instructions are presented as a bulleted list instead of a numbered list. For procedural instructions, use numbered lists with imperative verbs at the beginning of each step.
| - Mark an element as masked: | |
| ```html | |
| <label class="devrev-mask">OTP: 12345</label> | |
| ``` | |
| - Mark an element as unmasked: | |
| ```html | |
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | |
| ``` | |
| 1. Mark an element as masked. | |
| ```html | |
| <label class="devrev-mask">OTP: 12345</label> |
- Mark an element as unmasked.
<input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask">
<!-- __reviewdog__:ChAxMGJmMTBjYzQ1Zjg1NjhmEgZFa0xpbmU= -->
There was a problem hiding this comment.
Kept it the same as Android.
| - Mark an element as masked: | ||
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` | ||
| - Mark an element as unmasked: | ||
| ```html | ||
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | ||
| ``` |
There was a problem hiding this comment.
List items do not end with appropriate sentence-ending punctuation. For declarative sentences, a period is required.
| - Mark an element as masked: | |
| ```html | |
| <label class="devrev-mask">OTP: 12345</label> | |
| ``` | |
| - Mark an element as unmasked: | |
| ```html | |
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | |
| ``` | |
| 1. Mark an element as masked. | |
| ```html | |
| <label class="devrev-mask">OTP: 12345</label> |
- Mark an element as unmasked.
<input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask">
<!-- __reviewdog__:ChA5NWMxMGYwOTMyMWU2YTMzEgZFa0xpbmU= -->
There was a problem hiding this comment.
Kept it the same as Android.
| - Mark an element as masked: | ||
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` |
There was a problem hiding this comment.
Instructional step is bulleted instead of numbered and does not end with appropriate sentence-ending punctuation.
| ``` | |
| 1. Mark an element as masked. |
There was a problem hiding this comment.
Kept it the same as Android.
| - Mark an element as masked: | ||
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` |
There was a problem hiding this comment.
List item does not end with appropriate sentence-ending punctuation.
| ``` | |
| 1. Mark an element as masked. |
There was a problem hiding this comment.
Kept it the same as Android.
| ```html | ||
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | ||
| ``` | ||
|
|
There was a problem hiding this comment.
Instructional step is bulleted instead of numbered and does not end with appropriate sentence-ending punctuation.
| 2. Mark an element as unmasked. |
There was a problem hiding this comment.
Kept it the same as Android.
| ```html | ||
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | ||
| ``` | ||
|
|
There was a problem hiding this comment.
List item does not end with appropriate sentence-ending punctuation.
| 2. Mark an element as unmasked. |
There was a problem hiding this comment.
Kept it the same as Android.
|
|
||
| To mark elements as sensitive inside a web view (`WebView`), apply the `devrev-mask` CSS class. To unmark them, use `devrev-unmask`. | ||
|
|
||
| - Mark an element as masked: |
There was a problem hiding this comment.
Instructional steps should use numbered lists with imperative mood, but this step is bulleted.
| - Mark an element as masked: | |
| 1. Mark an element as masked: |
There was a problem hiding this comment.
Kept it the same as Android.
|
|
||
| - Mark an element as masked: | ||
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> |
There was a problem hiding this comment.
Instructional steps should use numbered lists with imperative mood, but this step is bulleted.
| <label class="devrev-mask">OTP: 12345</label> | |
| 2. Mark an element as unmasked: |
There was a problem hiding this comment.
Kept it the same as Android.
|
|
||
| While the auto-masking feature may be sufficient for most situations, you can manually mark additional views as sensitive using the following method: | ||
| While the auto-masking feature is sufficient for most situations, you can manually mark/unmark additional views as sensitive. |
There was a problem hiding this comment.
| While the auto-masking feature is sufficient for most situations, you can manually mark/unmark additional views as sensitive. | |
| While the auto-masking feature is sufficient for most situations, you can manually mark or unmark additional views as sensitive. |
|
|
||
| To protect sensitive data, you can mask sensitive UI elements such as text fields, text views, and web views using `DevRevMask` widget, as shown below. | ||
| To protect sensitive data, you can mask sensitive UI elements such as text fields, text views using `DevRevMask` widget, as shown below. |
There was a problem hiding this comment.
| To protect sensitive data, you can mask sensitive UI elements such as text fields, text views using `DevRevMask` widget, as shown below. | |
| To protect sensitive data, you can mask sensitive UI elements such as text fields, text views using the `DevRevMask` widget. |
|
|
||
| You can also manually unmask UI elements that would otherwise be automatically masked using `DevRevUnmask`: | ||
| If any previously masked views need to be unmasked, you can unmask using `DevRevUnmask` widget: |
There was a problem hiding this comment.
| If any previously masked views need to be unmasked, you can unmask using `DevRevUnmask` widget: | |
| If any previously masked views need to be unmasked, you can unmask using the `DevRevUnmask` widget. |
| Masking elements inside web views (`WebView`) can be achieved by using the CSS class `devrev-mask` to mask an element and `devrev-unmask` to unmask an element. | ||
|
|
||
| Input views such as password text fields are automatically masked in web views. | ||
|
|
||
| While the auto-masking feature is sufficient for most situations, you can manually mark/unmark additional views as sensitive. | ||
|
|
||
| To mark elements as sensitive inside a web view (`WebView`), apply the `devrev-mask` CSS class. To unmark them, use `devrev-unmask`. |
There was a problem hiding this comment.
This is basically the same:
Masking elements inside web views (`WebView`) can be achieved by using the CSS class `devrev-mask` to mask an element and `devrev-unmask` to unmask an element.
As this:
To mark elements as sensitive inside a web view (`WebView`), apply the `devrev-mask` CSS class. To unmark them, use `devrev-unmask`.
|
|
||
| Input views such as password text fields are automatically masked in web views. | ||
|
|
||
| While the auto-masking feature is sufficient for most situations, you can manually mark/unmark additional views as sensitive. |
There was a problem hiding this comment.
| While the auto-masking feature is sufficient for most situations, you can manually mark/unmark additional views as sensitive. | |
| While the auto-masking feature is sufficient for most situations, you can manually mark or unmark additional views as sensitive. |
|
Published docs preview URL: https://devrev-preview-94816103-8918-4890-baba-31e613453ac3.docs.buildwithfern.com |
| - Mark an element as masked: | ||
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` |
There was a problem hiding this comment.
Instructional steps should use a numbered list with imperative mood and end with appropriate punctuation.
| ``` | |
| 1. Mark an element as masked. |
There was a problem hiding this comment.
Kept it the same as Android.
| - Mark an element as unmasked: | ||
| ```html | ||
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | ||
| ``` |
There was a problem hiding this comment.
Instructional steps should use a numbered list with imperative mood and end with appropriate punctuation.
| ``` | |
| 2. Mark an element as unmasked. |
There was a problem hiding this comment.
Kept it the same as Android.
| Input views such as password text fields are automatically masked in web views. | ||
|
|
||
| While the auto-masking feature is sufficient for most situations, you can manually mark or unmark additional views as sensitive. |
There was a problem hiding this comment.
This is additional but important: to tell customers about auto masking of sensitive web view elements in Flutter SDK, as our Flutter SDK currently doesn't support auto masking of the Flutter views.
There was a problem hiding this comment.
No, the problem here is the /, the other sentence is the duplicate.
|
Published docs preview URL: https://devrev-preview-df200f98-eb65-436b-af17-385d7cc058da.docs.buildwithfern.com |
| ```javascript | ||
| DevRev.unmarkSensitiveViews(tags, successCallback, errorCallback) | ||
| ``` | ||
| - Mark an element as masked: |
There was a problem hiding this comment.
Instructions should use a numbered list instead of a bulleted list.
| - Mark an element as masked: | |
| 1. Mark an element as masked. |
There was a problem hiding this comment.
Kept it the same as Android.
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` | ||
| - Mark an element as unmasked: |
There was a problem hiding this comment.
Instructions should use a numbered list instead of a bulleted list.
| - Mark an element as unmasked: | |
| 2. Mark an element as unmasked. |
There was a problem hiding this comment.
Kept it the same as Android.
| - Mark an element as masked: | ||
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` | ||
| - Mark an element as unmasked: | ||
| ```html | ||
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | ||
| ``` |
There was a problem hiding this comment.
Instructional steps should use a numbered list instead of a bulleted list. Also, list items should end with appropriate sentence-ending punctuation.
| - Mark an element as masked: | |
| ```html | |
| <label class="devrev-mask">OTP: 12345</label> | |
| ``` | |
| - Mark an element as unmasked: | |
| ```html | |
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | |
| ``` | |
| 1. Mark an element as masked. | |
| ```html | |
| <label class="devrev-mask">OTP: 12345</label> |
- Mark an element as unmasked.
<input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask">
<!-- __reviewdog__:ChA1ODIzMTg4Yjg1MmUxNmZiEgZFa0xpbmU= -->
There was a problem hiding this comment.
Kept it the same as Android.
| To mark elements as sensitive inside a web view (`WebView`), apply the `devrev-mask` CSS class. To unmark them, use `devrev-unmask`. | ||
|
|
||
| - Mark an element as masked: | ||
| ```html |
There was a problem hiding this comment.
Instructional step uses a bulleted list instead of a numbered list and is missing appropriate sentence-ending punctuation.
| ```html | |
| 1. Mark an element as masked. |
There was a problem hiding this comment.
Kept it the same as Android.
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` | ||
| - Mark an element as unmasked: | ||
| ```html |
There was a problem hiding this comment.
Instructional step uses a bulleted list instead of a numbered list and is missing appropriate sentence-ending punctuation.
| ```html | |
| 2. Mark an element as unmasked. |
There was a problem hiding this comment.
Kept it the same as Android.
|
@devrev/knowledge-team Could you please review this PR? cc: @bojan |
|
Published docs preview URL: https://devrev-preview-882669ed-d6c8-48d6-9450-8c6e65806e51.docs.buildwithfern.com |
| ``` | ||
| - Mark an element as unmasked: | ||
| ```html | ||
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | ||
| ``` | ||
|
|
||
| ### Timers | ||
|
|
There was a problem hiding this comment.
Instructional steps should be presented as a numbered list for procedures.
| ``` | |
| - Mark an element as unmasked: | |
| ```html | |
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | |
| ``` | |
| ### Timers | |
| 1. Mark an element as masked. | |
| ```html | |
| <label class="devrev-mask">OTP: 12345</label> |
- Mark an element as unmasked.
<input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask">
<!-- __reviewdog__:ChBmNjE1MjYwYzc3MjE3ZDUyEgZFa0xpbmU= -->
| - Mark an element as masked: | ||
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` |
There was a problem hiding this comment.
List item does not end with appropriate sentence-ending punctuation.
| ``` | |
| - Mark an element as masked. |
| - Mark an element as unmasked: | ||
| ```html | ||
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | ||
| ``` |
There was a problem hiding this comment.
List item does not end with appropriate sentence-ending punctuation.
| ``` | |
| - Mark an element as unmasked. |
|
|
||
| To mark elements as sensitive inside a web view (`WebView`), apply the `devrev-mask` CSS class. To unmark them, use `devrev-unmask`. | ||
|
|
||
| - Mark an element as masked: |
There was a problem hiding this comment.
List item does not end with appropriate sentence-ending punctuation. Default to a period.
| - Mark an element as masked: | |
| - Mark an element as masked. |
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` | ||
| - Mark an element as unmasked: |
There was a problem hiding this comment.
List item does not end with appropriate sentence-ending punctuation. Default to a period.
| - Mark an element as unmasked: | |
| - Mark an element as unmasked. |
| ```html | ||
| <input type="text" placeholder="Enter Username" name="username" required class="devrev-unmask"> | ||
| ``` | ||
|
|
||
| ### Advanced session recording control while masking |
There was a problem hiding this comment.
Instructional title starts with a noun phrase ('Advanced session recording control while masking') instead of an infinitive verb. Rewrite to use an infinitive verb.
| ### Advanced session recording control while masking | |
| ### Control advanced session recording while masking |
| ### Mask elements inside web views | ||
|
|
||
| To mark elements as sensitive inside a web view (`WebView`), apply the `devrev-mask` CSS class. To unmark them, use `devrev-unmask`. | ||
|
|
There was a problem hiding this comment.
List item does not end with appropriate sentence-ending punctuation. Default to a period for declarative sentences.
| - Mark an element as masked. |
| - Mark an element as masked: | ||
| ```html | ||
| <label class="devrev-mask">OTP: 12345</label> | ||
| ``` |
There was a problem hiding this comment.
List item does not end with appropriate sentence-ending punctuation. Default to a period for declarative sentences.
| ``` | |
| - Mark an element as unmasked. |
zeeshan-devrev
deleted the
feature/react-native-sdk-masking-unmasking-examples
branch
Summary
This PR adds examples of masking and unmasking, as well as refines the description of masking in the DevRev SDK for React Native and Expo. It also adds web view masking for Flutter, Cordova, and React Native SDKs.
Connected Issues
Craftsmanship, Integrity, and Devil’s Advocacy
Story of the craft