encrypted Ui-Only Field

  • 1
  • Question
  • Updated 3 years ago
Hi,

I'm trying to find a way to have a UI field "Encrypted"

I found in forum post, a snippet to accomplish it, but 2 problems

1- does not seem to work on UI-Only field
2- It's not really encrypted....

var field = arguments[0];
var value = arguments[1];
var minValue = value.slice(-4);
var text = "***-**-"+minValue;
skuid.ui.fieldRenderers.TEXT[field.mode](field, text);

Any other ideas?

I do no want to use a Salesforce Encrypted field, as data  does not need to be saved 
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Yes,  that code obfuscates data displayed on a screen,  but does not really encrypt it. 

Having said that - I'm going to question whether encrypted client side data is really a thing?   Isn't encryption really only used for transfer along the wire? If you are not saving the data - I don't think you can encrypt it.  

I'm sure I'm wrong - but I'll let smarter minds chime in.  What are the use cases? 
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
I'm trying to recreate a sort of login system for my users using skuid

So they would need to enter a user and subuser code, and I would like for the subuser code to appear with ******* so that someone looking over their shoulder could not see the code itself

So probably that Snippet would work, if only i could make it work with UI-only field

But I tried and page does not load when i assign it in field renderer

Does this JS need to be modified so it cna work with Ui-Only?

Let em know

Thx
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I haven't tested this at all, but it's a shot:

var field = arguments[0];
var value = arguments[1].toString();
if (value) {
    value = Array(value.length + 1).join('*');
}
skuid.ui.fieldRenderers.TEXT[field.mode](field, value);
as an alternative, perhaps jquery mask?
(Edited)
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Hi Matt,

Thank you for snippet, but it does the same as other one I tried earlier, page is hanged on "loading"

As i know next to nothing on js/jquery if you have something handy for me to try , I would appreciate it :)

Thx
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
My mistake. Try this:

var field = arguments[0];
var value = arguments[1];
if (value) {
    value = Array(value.toString().length + 1).join('*');
}
skuid.ui.fieldRenderers.TEXT[field.mode](field, value);
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
at first it did not work either, but then tried to make field inline edit instead of edit mode, and it kind of worked

It's not live, and only after I entered whole subuser code and clicked out of field, did it turn into ***

Would a mask ,in your opinion, turn the text into ** as it's typed live?

(like any password field on websites....)

Thx
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
a mask would solve it.
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Dave, did you ever pursue some kind of mask for this? Did you have any success? I'm about to do the same myself...
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Hi Matt,

I had looked into it, but after fiddling with it for over an hour, I realized it's above my knowledge , and put it aside for now

Sorry
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey guys -

This is a variant of the idea posted in this thread and the other thread mentioned.  There are other ways to accomplish this that are more elegant but for standard "text" fields, this should do the trick for any field (UI or SObject backed) for read/readonly & edit modes.

Keep in mind that this is just "masking" the input, it is not encrypting it.  You can of course encrypt the data (even in a UI only field) but that gets much more complicated and I don't think that is what you are after here.

You'll notice that for 'edit' mode, I deferred masking over to the browser.  The reason for this is that it's the simplest approach.  The renderers mentioned previously in this post and the other wouldn't work for edit mode.  There are alternate ways to hook the input and then manually mask the character but it's just as easy to have the browser do the heavy lifting :)

(function($, $S, undefined){    
    $S.snippet.registerSnippet('passwordRenderer', function(field, value) {
        var displayType = field.metadata.displaytype
        , renderer = skuid.ui.fieldRenderers[displayType]
        , mode = field.mode
        , displayValue = $S.utils.decodeHTML(value);
        
        // if not in edit mode and we have a value, then we will 'mask' it
        if (mode !== 'edit' && displayValue !== null && displayValue !== undefined) {
            var valueAsString = value.toString()
                , stringLength = valueAsString.length;
            
            displayValue = Array(stringLength).join('*');
        }
        
        // use the standard skuid renderer for this field
        renderer[mode](field, displayValue);
        // if we are in edit mode, mark the input field to password and let the browser take care of masking the input
        if (mode === 'edit') {
            $(field.element).find('input').attr('type', 'password');
        }
    });
})(skuid.$, skuid);

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Account">   <models>
      <model id="Account" limit="1" query="true" createrowifnonefound="false" sobject="Account" adapter="" type="">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
            <field id="Code" uionly="true" displaytype="TEXT" label="Code"/>
         </fields>
         <conditions>
            <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <pagetitle model="Account" uniqueid="sk-1-E51H-70">
         <maintitle>
            <template>{{Name}}</template>
         </maintitle>
         <subtitle>
            <template>{{Model.label}}</template>
         </subtitle>
         <actions>
            <action type="delete"/>
            <action type="clone"/>
            <action type="share"/>
            <action type="savecancel" window="self"/>
         </actions>
      </pagetitle>
      <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-1-E51I-71">
         <columns>
            <column width="100%">
               <sections>
                  <section title="Basics">
                     <fields>
                        <field id="Name"/>
                        <field id="Code" valuehalign="" type="CUSTOM" cssclass="" snippet="passwordRenderer"/>
                     </fields>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript>
         <jsitem location="inline" name="newInlineJS" cachelocation="false" url="">(function($, $S, undefined){
    
    $S.snippet.registerSnippet('passwordRenderer', function(field, value) {
        var displayType = field.metadata.displaytype
        , renderer = skuid.ui.fieldRenderers[displayType]
        , mode = field.mode
        , displayValue = $S.utils.decodeHTML(value);
        
        // if not in edit mode and we have a value, then we will 'mask' it
        if (mode !== 'edit' &amp;&amp; displayValue !== null &amp;&amp; displayValue !== undefined) {
            var valueAsString = value.toString()
                , stringLength = valueAsString.length;
            
            displayValue = Array(stringLength).join('*');
        }
        
        // use the standard skuid renderer for this field
        renderer[mode](field, displayValue);
        // if we are in edit mode, mark the input field to password and let the browser take care of masking the input
        if (mode === 'edit') {
            $(field.element).find('input').attr('type', 'password');
        }
    });
})(skuid.$, skuid);</jsitem>
      </javascript>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Thanks, Barry. I just found the input type=password functionality, and was about to suggest just adding 'password' as a css class to your field, and running this one-line snippet on pageload:

$('.password').find('input').attr("type", "password");

Barry's field renderer is cooler, for sure.
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
Hey Matt - Generally speaking, the thing to be careful with regarding the pageload approaches is that it will only effect fields that are displayed on initial page load.  Fields displayed during runtime (popup, drawer, conditional rendering) wouldn't receive the password type.  Field renderers are typically the safest option ;)
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
True, I had to run the snippet after loading a popup, too. The field renderer makes the most sense.