encrypted Ui-Only Field

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? 

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

I haven’t tested this at all, but it’s a shot:

var field = arguments[0];<br />var value = arguments[1]&#46;toString();<br />if (value) {<br />&nbsp; &nbsp; value = Array(value&#46;length + 1)&#46;join('*');<br />}<br />skuid&#46;ui&#46;fieldRenderers&#46;TEXT[field&#46;mode](field, value); 

as an alternative, perhaps jquery mask?

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

My mistake. Try this:

<br>var field = arguments[0];<br>var value = arguments[1];<br>if (value) {<br>&nbsp; &nbsp; value = Array(value.toString().length + 1).join('*');<br>}<br>skuid.ui.fieldRenderers.TEXT[field.mode](field, value);

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

a mask would solve it.

Dave, did you ever pursue some kind of mask for this? Did you have any success? I’m about to do the same myself…

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

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;&amp;amp; displayValue !== null &amp;amp;&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>

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.

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 😉

True, I had to run the snippet after loading a popup, too. The field renderer makes the most sense.