Login page customisation config syntax

[casp4]

Affected page(s):
https://github.com/okta/okta-developer-docs/blob/master/packages/%40okta/vuepress-site/docs/guides/style-the-widget/style-okta-hosted/index.md

https://github.com/okta/okta-developer-docs/blob/master/packages/%40okta/vuepress-site/docs/guides/style-the-widget/style-self-hosted/index.md

Describe the problem(s):

The piece on /style-self-hosted/index.md doesn't have a small warning saying this syntax won't work on Okta hosted customisation. Would be fantastic to add a warning on that page that there is a different way of doing that.

var config = {
  baseUrl: 'https://${yourOktaDomain}',
  ...
  i18n: {
    'en': {
      'primaryauth.title': 'Sign in to ExampleApp'
    },
    'es': {
      'primaryauth.title': 'Iniciar sesión en ExampleApp'
    },
    'zh-CN': {
      'primaryauth.title': '登录 ExampleApp'
    },
    'zh-TW': {
      'primaryauth.title': '登錄入 ExampleApp'
    }
  },
  ...
};

When adding this style syntax to the config object in the customisation window in the Admin console (we're Okta hosted) and selecting preview from within Okta, we get Uncaught TypeError: Cannot set property 'title' of undefined and a blank login screen in chrome. I console logged the config object and on hover the inspector showed me I could use a slightly different syntax.

That leads me to the /style-okta-hosted/index.md page that actually doesn't go over this at all, which inevitably makes people land on the self-hosted documentation page. I initially didn't even notice this and wasted some time working out why that method was not working.

Proposed fix:

So proposed fix is to add 2 sections:

1. /style-self-hosted/index.md: add a warning that there is a different way of overriding the default text provided by Okta so that the go-to fix isn't something hacky like document.getElementById('some-id-here').innerHTML = 'Custom text';.

   E.g.

   Warning: Please see the <okta hosted url here> if you are not self-hosting.

2. /style-okta-hosted/index.md: add section that shows a small snippet and a link to the list of text that can be set.

   E.g.

   config.i18n.en['primaryauth.title'] = 'Sign In test';   // Changes the sign in text
   config.i18n.en['primaryauth.submit'] = 'Sign In test';  // Changes the sign in button
   
   config.i18n['zh-CN.primaryauth.title'] =  '登录 ExampleApp';   // 'Sign In test'
   config.i18n['zh-CN.primaryauth.submit'] = '登錄入 ExampleApp';  // 'Sign In test'
   

   Overriding the default text this way ensures that you are not relying on Okta owned html and you can debug at any time by inspecting the config object content. See more options of Okta default text at https://github.com/okta/okta-signin-widget/blob/master/packages/@okta/i18n/src/properties/login.properties

[casp4]

As an aside, unrelated to this ticket, there are instances through the docs where https://github.com/okta/okta-signin-widget/blob/master/packages/@okta/i18n/src/properties/login.properties is being referenced but uses an incorrect URL.

I had to go back to https://github.com/okta/okta-signin-widget/blob/master/packages/@okta to then work out where the file might be.

It's being referenced with ......../dist/properties/login.properties - notice the dist folder instead of the src folder.

Update: I've noticed it here

[casp4]

For us passing it in via the config object in JS or code of any kind is not an option at this stage.

Reference : https://github.com/okta/okta-auth-js#configuration-options

[aarongranick-okta]

@casp4 Thank you for this very helpful report. We will test the documentation for correctness and update it appropriately. I've created an internal issue (OKTA-401812) to track this work.