Is it possible to customize the login page in portal for arcgis.

akshayloya · ‎08-22-2017

I've portal for Arcgis 10.5 (behind the firewall). I have to customize the login page with the client's company logo, banner and all those. How can I do this. Any work around ?

LindsayMaier · ‎02-14-2020

That's kind of what I figured. Thanks for the help - really appreciate it!

EricPeña · ‎02-14-2020

I'd appreciate the vote up...

https://community.esri.com/ideas/18029

Thanks.

LindsayMaier · ‎02-14-2020

Done!

MNIT-Kitty-Hurley · ‎07-13-2021

Thanks for submitting this idea, just upvoted. This is a huge issue in our organization's Portal (10.7) administration, so hope this is addressed soon!

AbeCoughlin · ‎11-12-2021

Thanks Eric! Very nice, simple work-around! I'm implementing in my new install.

FYI, there is a div that has a custom-logo class..., so maybe there is a way?

{{#info.signinThumbnail}}\n 
               
<div class="custom-logo">\n                    
  <img src="{{info.hostname}}{{info.contextPath}}/rest/oauth2/orgInfo/{{info.signinThumbnail}}" alt="" />\n                
</div>\n    
            
{{/info.signinThumbnail}}

ChristinaCurry · ‎12-03-2021

Did you have any luck? I'm still hunting for the correct div 🙂

AbeCoughlin · ‎12-10-2021

Christina,

This is what I achieved...

To get this look, try this:

Find the <div> with class = "content-wrap" in oauth2.js (copy file and keep original safe).
Replace it with the code below (If you ignore the svg path, it's fairly simple).
Modify the text, id and logo for your organization.
Done.

Note that this does not change any functionality, just layout.

[ I'm quite sure that this is the only change I implemented at the time - if for some reason this does not work as intended, simply replace the original file and it will fix itself. I would appreciate feedback if it doesn't work and I'll explore if I made any other change and advise. ]

<div class="content-wrap">
    <div class="js-header header-bar flex flex-justify">
        <div class="font-size-1 page-title width-full"> <!-- Add own text/instruction/logo -->
            <span class="js-orgname"><b>City of Escondido</b></span>
            <small><br>Sign in with Windows credentials as below:<br>Username: <b>user@ecity</b><br>Password: <b>password</b></small>        
            <span class="js-orgname"><img src="https://gisp.escondido.org/img/CityofChoiceBlue.png" style="float:right;" alt="Escondido City of Choice blue logo"></span><br>
        </div>
    </div>
    <div id="loginComponents">
        <div tabindex="0" class="alert alert-red js-message" id="errMessage"></div>
        <section class="arcgis-login">
            <div class=" accordion">
                <div class="js-flat-section flat-section is-active">
                    <div class="flat-title font-size--1 trailer-quarter" id="loginTitle" aria-expanded="true" role="heading" aria-level="4">
                        <span>Staff GIS Portal</span> <!-- Modify title -->
                    </div>
                    <div class="flat-content" role="region" aria-labelledby="loginTitle" id="loginPanel">
                        <form class="container" id="oauth" name="f" method="POST" action="https://gisp.escondido.org/portal/sharing/oauth2/signin" novalidate="" autocomplete="off">
                            <input type="hidden" id="oauth_state" name="oauth_state" value="XXX"> <!-- replace with value from your existing oauth2.js file -->
                            <input type="hidden" id="authorize" name="authorize" value="true">
                            <label class="field-icon">
                                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false">
                                    <path d="M11 3a3 3 0 1 0-3 3 3 3 0 0 0 3-3zM8 5a2 2 0 1 1 2-2 2 2 0 0 1-2 2zm3 1H5a2 2 0 0 0-2 2v6a1 1 0 0 0 1 1h1a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1h1a1 1 0 0 0 1-1V8a2 2 0 0 0-2-2zm1 3v5h-1V9h-1v6H6V9H5v5H4V8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"></path>
                                </svg>
                                <input type="text" name="username" id="user_username" placeholder="Username" aria-label="Username" class="padding-left-2" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" required="">
                                <div class="input-error-message js-username-error"></div>
                            </label>
                            <label class="field-icon">
                                <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false">
                                    <path d="M13 7V5A5 5 0 0 0 3 5v2a1.003 1.003 0 0 0-1 1v7a1.003 1.003 0 0 0 1 1h10a1.003 1.003 0 0 0 1-1V8a1.003 1.003 0 0 0-1-1zM4 5a4 4 0 0 1 8 0v2h-1V5a3 3 0 0 0-6 0v2H4zm6 2H6V5a2 2 0 0 1 4 0zm3 8H3V8h10zm-5-1H7V9h1v1h1v1H8v1h1v1H8z"></path>
                                </svg>
                                <input required="" type="password" name="password" id="user_password" placeholder="Password" aria-label="Password" class="padding-left-2">
                                <div class="input-error-message js-password-error"></div>
                            </label>
                            <label id="persistUserLabel" class=""><input type="checkbox" name="persist" id="persistUser">Keep me signed in</label>
                            <div class="flex">
                                <button id="signIn" type="submit" class="btn btn-small btn-fill margin-right-half">Sign In</button>
                                <button id="cancel" type="button" class="btn btn-small btn-fill btn-clear margin-left-half hide">Cancel</button>
                            </div>
                        </form>
                        <div class="leader-quarter btn-fill font-size--3"> <!-- Move ESRI logo [must keep ESRI for licensing purposes, probably] -->
                            <svg id="gnav-dist-esri-Australia-tm" xmlns="http://www.w3.org/2000/svg" width="84" height="30" viewBox="0 0 84 30" focusable="false"><title>Esri</title><g><path d="M77.377.695a2.51615,2.51615,0,0,0-2.5536,2.4884,2.58969,2.58969,0,0,0,5.1756,0A2.512,2.512,0,0,0,77.377.695ZM75.4635,24.12065h3.892V8.5485h-3.892ZM40.615,8.1597c-4.7019,0-8.4646,3.2749-8.4646,8.1744,0,4.89828,3.7627,8.17661,8.4646,8.17661a8.08656,8.08656,0,0,0,5.8516-2.31047L44.0102,19.7439a4.96654,4.96654,0,0,1-3.781,1.65148,4.03745,4.03745,0,0,1-4.1869-3.69818H47.9167V16.6269C47.9167,11.2076,44.9662,8.1597,40.615,8.1597Zm-4.5727,6.6168a3.87339,3.87339,0,0,1,4.023-3.6991c2.4334,0,3.9261,1.4292,3.9603,3.6991Zm17.3044-1.8482c0-1.1689,1.2333-1.655,2.2729-1.655a3.53132,3.53132,0,0,1,3.0376,1.5764l2.476-2.4735a6.83011,6.83011,0,0,0-5.418-2.2165c-3.1469,0-6.2621,1.5555-6.2621,5.0284,0,5.9379,8.4026,3.4059,8.4026,6.6172,0,1.23253-1.4594,1.78384-2.5946,1.78384a4.75239,4.75239,0,0,1-3.6905-1.905l-2.5144,2.5136a7.64753,7.64753,0,0,0,5.9779,2.313c3.1784,0,6.717-1.29823,6.717-4.99731C61.7511,13.4459,53.3467,15.7175,53.3467,12.9283Zm14.151-1.9166h-.0623V8.5485H63.5426V24.12065h3.8928V15.7815a3.91438,3.91438,0,0,1,4.1848-3.9252,7.452,7.452,0,0,1,1.7181.253l.1519-3.7259a5.03109,5.03109,0,0,0-1.3826-.2237A4.96277,4.96277,0,0,0,67.4977,11.0117ZM14.782,2.9606a10.41336,10.41336,0,0,0-2.651.2599.49091.49091,0,0,0-.6431.4729.65358.65358,0,0,0,.2394.5615,20.045,20.045,0,0,1,2.4735,2.1423c-.4694.0517-.9807.1379-1.5039.2462-.5847-1.264-2.4653-.1147-3.71354-.0648-.14639.006-.28684.0252-.43149.035A20.32772,20.32772,0,0,1,8.3415,3.6934a17.20722,17.20722,0,0,1,6.875-1.6255l.3721-.0098c.3124-.0027.3371-.2514.0435-.2915A13.53793,13.53793,0,0,0,8.35348,2.9124,14.41291,14.41291,0,0,0,.89854,10.791c-.44337,1.2475-2.21826,7.1947.935,12.29948a13.20182,13.20182,0,0,0,9.88737,6.6769,14.15347,14.15347,0,0,0,8.7522-1.05577c5.9511-2.64154,10.4956-12.55841,5.9499-19.747C24.6289,5.6461,19.9278,2.7361,14.782,2.9606ZM12.5233,7.6083a17.75423,17.75423,0,0,1,2.3616-.3686,15.74087,15.74087,0,0,1,1.7479,2.5404c-.8053.3896-1.8781.6879-2.3146,1.3123a1.78056,1.78056,0,0,0-.2318.9943,23.589,23.589,0,0,0-3.8774,1.2862c-.45286-1.3319-.85009-2.659-1.12365-3.8421C10.3814,8.2941,11.8985,8.0927,12.5233,7.6083Zm6.6103,15.87993c-.3546.03749-.7071.08277-1.0169.13057a14.62456,14.62456,0,0,0-2.6843.72209,43.94209,43.94209,0,0,1-2.6676-4.43649A15.48586,15.48586,0,0,1,18.54,18.4602a4.61747,4.61747,0,0,0,.6909.9559C19.9871,20.1902,18.7892,21.299,19.1336,23.48823ZM10.5303,14.3485a19.29324,19.29324,0,0,1,3.5604-1.2862,2.03511,2.03511,0,0,1-.1827.903,2.50151,2.50151,0,0,0,.1336,1.7748c.7549,1.0985,2.0083.4882,2.9518.8834a2.15739,2.15739,0,0,1,.9633.8389,16.049,16.049,0,0,0-5.7053,1.4109A41.82526,41.82526,0,0,1,10.5303,14.3485Zm.8321,4.9371c-.0699.0333-.145.0742-.2171.1101-1.1019-.3073-1.78517-.478-3.25617-.7801a3.08944,3.08944,0,0,0-2.15123.1758c-.15959.0461-.3128.0879-.46173.1323-.14893-.3815-.29663-.7768-.44556-1.2018a27.12084,27.12084,0,0,1,4.82187-2.9851C10.1514,16.2283,10.8665,18.2204,11.3624,19.2856Zm.7674,4.52863a9.48665,9.48665,0,0,0,.6047-1.88965c.5692.95763,1.2487,1.9989,1.7744,2.814A17.3346,17.3346,0,0,0,11.837,26.4243,11.23781,11.23781,0,0,1,12.1298,23.81423ZM17.4642,9.1779c-.0102.0145-.0282.0261-.0393.0401a23.04534,23.04534,0,0,0-1.3771-2.1111,21.90906,21.90906,0,0,1,3.3743.1084C18.4082,7.5781,17.9609,8.4687,17.4642,9.1779Zm-9.028,1.0938c.01836-.0256.03837-.0465.05716-.0717.23344,1.1821.51294,2.1606.88552,3.5178a33.49783,33.49783,0,0,0-4.976,2.9723,17.18753,17.18753,0,0,1-.5889-1.9465,1.77168,1.77168,0,0,1,1.47617-1.325C6.51758,13.2957,7.57083,11.4696,8.43624,10.2717ZM3.0267,8.4883A15.96075,15.96075,0,0,1,7.74876,3.9686a26.225,26.225,0,0,0,.21806,2.6928q-.85463.0852-1.69211.2109a12.08231,12.08231,0,0,0-3.11438,4.0878A14.926,14.926,0,0,1,3.0267,8.4883ZM2.16984,9.9256s.06188,1.0601.1131,1.8329a11.90283,11.90283,0,0,0-1.17919,1.5914A9.53467,9.53467,0,0,1,2.16984,9.9256Zm7.664,18.35671A12.62638,12.62638,0,0,1,1.72131,20.029a17.47511,17.47511,0,0,1-.65164-6.473.65293.65293,0,0,0,.38018.0167c.13486-.0922.61581-.4302.95763-.7277.00472.0393.01241.0892.01792.1314a12.04271,12.04271,0,0,0-.40064,2.7099,19.25881,19.25881,0,0,1,1.28616,1.7062c-.31061.2304-.9051.6418-1.04468.7417a.62859.62859,0,0,0-.114,1.0148.56565.56565,0,0,0,.6124-.0103,10.69141,10.69141,0,0,1,1.06609-.769c.151.3926.29182.7468.43052,1.0848a1.34447,1.34447,0,0,0-.34269.79893,2.46079,2.46079,0,0,0,1.91875,2.35994c.035.01022.06057.01363.09388.02307.0499.07508.09517.14674.14761.22357A5.74221,5.74221,0,0,0,5.03032,23.9226c-.13189.17244-.28125.43018-.15959.48139a2.1227,2.1227,0,0,0,.71824-.03408c.46644-.08967.82618-.606,1.14833-.7955a17.99721,17.99721,0,0,0,1.67159,1.87942c.02866.11947.05506.24576.08792.3516a7.47254,7.47254,0,0,0,.495,1.19578A12.16213,12.16213,0,0,0,10.456,27.562,8.34474,8.34474,0,0,0,9.83383,28.28231Zm.98917.31236a4.36881,4.36881,0,0,1,.5054-.6256c.4672.30983.9682.66493,1.3677.89366A9.59947,9.59947,0,0,1,10.823,28.59467Zm3.1128.30983a22.07987,22.07987,0,0,1-2.0088-1.47057,14.04631,14.04631,0,0,1,3.1281-1.88878c.4016.63076,1.7267,2.50678,2.2575,3.11184A17.30216,17.30216,0,0,1,13.9358,28.9045Zm6.7055-1.50806a16.58869,16.58869,0,0,1-2.2045.98742,23.42994,23.42994,0,0,1-2.4402-3.20141,13.9527,13.9527,0,0,1,3.3466-.82111,7.49493,7.49493,0,0,0,.4438,1.09423,2.51925,2.51925,0,0,0,.6486.85345c.0853-.05287.1644-.11519.2484-.16981C20.678,26.55828,20.6665,26.98505,20.6413,27.39644ZM20.3106,5.9188c-.2702-.1719-.6068-.1079-.4669.1933a4.06966,4.06966,0,0,0,.4272.5122,19.53821,19.53821,0,0,0-4.856-.3645,15.62334,15.62334,0,0,0-2.8614-2.7649c4.999-.3111,9.4897,1.7565,11.4737,4.1856a15.42616,15.42616,0,0,0-2.6677-.9628A5.95374,5.95374,0,0,0,20.3106,5.9188Zm1.0946,21.06538c.023-.40711.0402-.92267.0529-1.39637a12.11693,12.11693,0,0,0,1.3695-1.23757,12.42379,12.42379,0,0,1,1.4275.23895A11.02525,11.02525,0,0,1,21.4052,26.98418Zm3.8245-3.72467a4.1318,4.1318,0,0,1-.6328.89444,9.77165,9.77165,0,0,0-1.2722-.37468c.0786-.09387.1635-.18267.2395-.27915.2688-1.7957-.3376-2.371.4211-4.01392.053-.1144.111-.2407.1716-.3713a11.3497,11.3497,0,0,1,1.1526.3858A30.26049,30.26049,0,0,1,25.2297,23.25951Zm-.7079-4.91621c.1959-.4072.4118-.8399.6456-1.2708.0607.5479.1042,1.0813.1307,1.5635C25.0578,18.5302,24.7936,18.4346,24.5218,18.3433Zm2.2178,1.1257-.1937.75629a18.08656,18.08656,0,0,1-.8318,2.22245,25.61647,25.61647,0,0,0,.1481-2.72944.59489.59489,0,0,0,.5586-.3414c.0568-.1946-.5637-.495-.5637-.495a20.74328,20.74328,0,0,0-.1725-2.7001c.1426-.2292.2869-.452.4341-.6551a12.095,12.095,0,0,0-.1852-1.5743,1.21486,1.21486,0,0,0,.323.0747c.2825.0043.2817-.1899.1912-.2978a3.78494,3.78494,0,0,0-.6423-.4195,12.02044,12.02044,0,0,0-2.7811-5.3203,14.9875,14.9875,0,0,1,1.7548.7732,9.39245,9.39245,0,0,1,2.2114,4.9204A12.16755,12.16755,0,0,1,26.7396,19.469Z"></path><path d="M80.9857,8.7917V8.5528h1.2188v.2389H81.736V9.9832h-.2835V8.7917Zm1.87-.2389L83.221,9.577l.3679-1.0242h.4062V9.9832h-.262V8.8293l-.396,1.1539h-.2287l-.3995-1.1539V9.9832h-.262V8.5528Z"></path></g></svg>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

ChristinaCurry · ‎01-03-2022

Oh great! Attempt 1 did not work out (sign-in page was just blank) but it's very possible I made a mistake. I will give it another go sometime this week and let you know!

RuchiraWelikala2 · ‎01-13-2023

Thank you for this. It works for the most part but when ever I remove one of the dynamic keys from the existing code, it errors out.

For instance, I tried removing this: {{^info.orgName}}\n and it just errors out. Wondering if there's a way around it.

AbeCoughlin · ‎01-17-2023

I presume that it needs 'org.Name' to relate it with the organization that you are signing in under. As I didn't change that, nor have a need to, I don't have an answer for you.

My only thought would be that:

if you want the login to work for any organization, then you have to allow the user to input the organization - as it is now.
if you want the login to work for one organization only, then you could hard-code this value into the code.