Customlogin: Difference between revisions
From Catglobe Wiki
More actions
 Created page with "'''1. Create files:<br>        1.1. Stylesheet:'''<br>        - Create stylesheet file: default.css {| cl..."  | 
				No edit summary  | 
				||
| Line 1: | Line 1: | ||
'''1. Create files:<br>        1.1. Stylesheet:'''<br>        - Create stylesheet file: default.css  | <span style="font-size: 18pt;" >'''Create catglobe custom login layout'''</span>  | ||
{| class="wikitable" style="border-collapse: collapse; width: 50%;"    | '''<br>1. Create files:<br>        1.1. Stylesheet:'''<br>        - Create stylesheet file: default.css  | ||
|-  | {| class="wikitable" style="border-collapse: collapse; width: 50%;"  | ||
| style="width: 100%;" |    | |-    | ||
| style="width: 100%;" |  | |||
:#loginBackground::before {<br> background: #595959;<br>}<br>#loginBackground form {<br> max-width: 400px;<br> margin: 0 auto;<br> box-sizing: border-box;<br>}  | :#loginBackground::before {<br> background: #595959;<br>}<br>#loginBackground form {<br> max-width: 400px;<br> margin: 0 auto;<br> box-sizing: border-box;<br>}  | ||
:#loginBackground .wrapper-logo {<br> width: 100%;<br>}  | :#loginBackground .wrapper-logo {<br> width: 100%;<br>}  | ||
:#loginBackground #loginLogo {<br> height: 50px;<br> width: auto;<br> margin: 0;<br>}  | :#loginBackground #loginLogo {<br> height: 50px;<br> width: auto;<br> margin: 0;<br>}  | ||
:#loginBackground .version {<br> margin-top: 0;<br> margin-bottom: 10px;<br> color: #fff !important;<br>}  | :#loginBackground .version {<br> margin-top: 0;<br> margin-bottom: 10px;<br> color: #fff !important;<br>}  | ||
:#loginBackground input {<br> box-sizing: border-box;<br> width: 100%;<br> min-width: 300px;<br> background: #fff;<br> border-color: rgb(var(--cg));<br> border-radius: 10px;<br> padding: 10px 15px;<br> height: unset;<br> margin-bottom: 10px;<br> color: #000;<br>}  | :#loginBackground input {<br> box-sizing: border-box;<br> width: 100%;<br> min-width: 300px;<br> background: #fff;<br> border-color: rgb(var(--cg));<br> border-radius: 10px;<br> padding: 10px 15px;<br> height: unset;<br> margin-bottom: 10px;<br> color: #000;<br>}  | ||
:#loginBackground .login-submit {<br> width: 100% !important;<br> justify-content: space-between !important;<br>}  | :#loginBackground .login-submit {<br> width: 100% !important;<br> justify-content: space-between !important;<br>}  | ||
: #loginBackground .login-submit a {<br>  color: #fff !important;<br> }  | : #loginBackground .login-submit a {<br>  color: #fff !important;<br> }  | ||
: #loginBackground .login-submit button {<br>  border-radius: 5px;<br>  height: unset;<br>  padding: 10px 30px;<br>  font-size: 14px;<br> }  | : #loginBackground .login-submit button {<br>  border-radius: 5px;<br>  height: unset;<br>  padding: 10px 30px;<br>  font-size: 14px;<br> }  | ||
:#loginBackground .bottom-logo {<br> margin-top: 50px;<br>}  | :#loginBackground .bottom-logo {<br> margin-top: 50px;<br>}  | ||
:#loginBackground .vox-logo {<br> background: url('./Voxmeter-logo.png') no-repeat;<br> height: 28px;<br> width: 100px;<br> background-size: 100px 28px;<br> margin: auto;<br>}  | :#loginBackground .vox-logo {<br> background: url('./Voxmeter-logo.png') no-repeat;<br> height: 28px;<br> width: 100px;<br> background-size: 100px 28px;<br> margin: auto;<br>}  | ||
:#loginBackground .cem-logo {<br> background: url('./CEM-intelligence-logo.png') no-repeat;<br> height: 26px;<br> width: 150px;<br> background-size: 150px 28px;<br> margin: auto;<br>}  | :#loginBackground .cem-logo {<br> background: url('./CEM-intelligence-logo.png') no-repeat;<br> height: 26px;<br> width: 150px;<br> background-size: 150px 28px;<br> margin: auto;<br>}  | ||
|}  | |}  | ||
     '''   1.2. Javascript:'''<br>        - Create javascript file: default.js  |      '''   1.2. Javascript:'''<br>        - Create javascript file: default.js  | ||
{| class="wikitable" style="border-collapse: collapse; width: 100%;"    | {| class="wikitable" style="border-collapse: collapse; width: 100%;"  | ||
|-  | |-    | ||
| style="width: 100%;" |    | | style="width: 100%;" |  | ||
:document.addEventListener('DOMContentLoaded', function () {<br> let userLang = navigator.language || navigator.userLanguage; <br> let form = document.getElementById('loginBackground').getElementsByTagName('form')[0];<br> let submit = document.querySelector('[type="submit"]');<br> submit.parentElement.className += 'login-submit';<br> let logo = document.querySelector('#loginLogo');<br> let wrapperLogo = document.createElement('div');<br> wrapperLogo.classList.add('wrapper-logo');<br> logo.parentNode.insertBefore(wrapperLogo, logo);<br> wrapperLogo.appendChild(logo);<br> let version = document.createElement('p');<br> let versionText;<br> if(userLang === 'da-DK'){<br>    versionText = document.createTextNode('Velcome to version 10.0');<br> } else {<br>    versionText = document.createTextNode('Welcome to version 10.0');<br> }<br> version.classList.add('version');<br> version.appendChild(versionText);<br> wrapperLogo.appendChild(version);<br> let vox = document.createElement('div');<br> vox.classList.add('bottom-logo');<br> vox.innerHTML = `<div class="vox-logo"></div><div class="cem-logo"></div>`;<br> form.appendChild(vox);  | :document.addEventListener('DOMContentLoaded', function () {<br> let userLang = navigator.language || navigator.userLanguage; <br> let form = document.getElementById('loginBackground').getElementsByTagName('form')[0];<br> let submit = document.querySelector('[type="submit"]');<br> submit.parentElement.className += 'login-submit';<br> let logo = document.querySelector('#loginLogo');<br> let wrapperLogo = document.createElement('div');<br> wrapperLogo.classList.add('wrapper-logo');<br> logo.parentNode.insertBefore(wrapperLogo, logo);<br> wrapperLogo.appendChild(logo);<br> let version = document.createElement('p');<br> let versionText;<br> if(userLang === 'da-DK'){<br>    versionText = document.createTextNode('Velcome to version 10.0');<br> } else {<br>    versionText = document.createTextNode('Welcome to version 10.0');<br> }<br> version.classList.add('version');<br> version.appendChild(versionText);<br> wrapperLogo.appendChild(version);<br> let vox = document.createElement('div');<br> vox.classList.add('bottom-logo');<br> vox.innerHTML = `<div class="vox-logo"></div><div class="cem-logo"></div>`;<br> form.appendChild(vox);  | ||
:}, false);<br>  | :}, false);<br>  | ||
|}  | |}  | ||
| Line 38: | Line 26: | ||
'''2. Config:'''<br>- Add config to catglobe.json on server.  | '''2. Config:'''<br>- Add config to catglobe.json on server.  | ||
{| class="wikitable" style="border-collapse: collapse; width: 100%;"    | {| class="wikitable" style="border-collapse: collapse; width: 100%;"  | ||
|-  | |-    | ||
| style="width: 100%; margin-left: 100px;" |      "loginPageCustomization": [<br>          {<br>             "name": "",<br>             "urlToExtraCss": "https://voxmeter.dk/custom-login/default.css",<br>             "urlToExtraJs": "https://voxmeter.dk/custom-login/default.js"<br>         },<br>         {<br>             "name": "/cembank",<br>             "urlToExtraCss": "https://localhost/test/cembank.css",<br>             "urlToExtraJs": "https://localhost/test/cembank.js"<br>         }<br>    ]  | | style="width: 100%; margin-left: 100px;" |      "loginPageCustomization": [<br>          {<br>             "name": "",<br>             "urlToExtraCss": "https://voxmeter.dk/custom-login/default.css",<br>             "urlToExtraJs": "https://voxmeter.dk/custom-login/default.js"<br>         },<br>         {<br>             "name": "/cembank",<br>             "urlToExtraCss": "https://localhost/test/cembank.css",<br>             "urlToExtraJs": "https://localhost/test/cembank.js"<br>         }<br>    ]  | ||
|}  | |}  | ||
Revision as of 07:20, 12 January 2023
Create catglobe custom login layout
1. Create files:
        1.1. Stylesheet:
        - Create stylesheet file: default.css
  | 
        1.2. Javascript:
        - Create javascript file: default.js
  | 
1.3. Upload: stylesheet and javascript files to location where You can get public link.
2. Config:
- Add config to catglobe.json on server.
|      "loginPageCustomization": [ { "name": "", "urlToExtraCss": "https://voxmeter.dk/custom-login/default.css", "urlToExtraJs": "https://voxmeter.dk/custom-login/default.js" }, { "name": "/cembank", "urlToExtraCss": "https://localhost/test/cembank.css", "urlToExtraJs": "https://localhost/test/cembank.js" } ]  |