mirror of
https://github.com/zitadel/zitadel.git
synced 2025-12-12 02:02:23 +00:00
feat(login): new palette based styles (#1149)
* chore(deps-dev): bump rollup from 2.33.2 to 2.34.0 in /site (#1040) Bumps [rollup](https://github.com/rollup/rollup) from 2.33.2 to 2.34.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v2.33.2...v2.34.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump svelte-i18n from 3.2.5 to 3.3.0 in /site (#1039) Bumps [svelte-i18n](https://github.com/kaisermann/svelte-i18n) from 3.2.5 to 3.3.0. - [Release notes](https://github.com/kaisermann/svelte-i18n/releases) - [Changelog](https://github.com/kaisermann/svelte-i18n/blob/main/CHANGELOG.md) - [Commits](https://github.com/kaisermann/svelte-i18n/compare/v3.2.5...v3.3.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-url from 5.0.1 to 6.0.0 in /site (#1038) Bumps [@rollup/plugin-url](https://github.com/rollup/plugins) from 5.0.1 to 6.0.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/url-v5.0.1...url-v6.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump svelte from 3.29.7 to 3.30.1 in /site (#1037) Bumps [svelte](https://github.com/sveltejs/svelte) from 3.29.7 to 3.30.1. - [Release notes](https://github.com/sveltejs/svelte/releases) - [Changelog](https://github.com/sveltejs/svelte/blob/master/CHANGELOG.md) - [Commits](https://github.com/sveltejs/svelte/compare/v3.29.7...v3.30.1) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): bump marked from 1.2.4 to 1.2.5 in /site (#1036) Bumps [marked](https://github.com/markedjs/marked) from 1.2.4 to 1.2.5. - [Release notes](https://github.com/markedjs/marked/releases) - [Changelog](https://github.com/markedjs/marked/blob/master/release.config.js) - [Commits](https://github.com/markedjs/marked/compare/v1.2.4...v1.2.5) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/core from 7.12.3 to 7.12.9 in /site (#1035) Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.12.3 to 7.12.9. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.12.9/packages/babel-core) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump rollup-plugin-svelte from 6.1.1 to 7.0.0 in /site (#1034) Bumps [rollup-plugin-svelte](https://github.com/sveltejs/rollup-plugin-svelte) from 6.1.1 to 7.0.0. - [Release notes](https://github.com/sveltejs/rollup-plugin-svelte/releases) - [Changelog](https://github.com/sveltejs/rollup-plugin-svelte/blob/master/CHANGELOG.md) - [Commits](https://github.com/sveltejs/rollup-plugin-svelte/compare/v6.1.1...v7.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-commonjs in /site (#1033) Bumps [@rollup/plugin-commonjs](https://github.com/rollup/plugins) from 15.1.0 to 17.0.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/commonjs-v15.1.0...commonjs-v17.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @rollup/plugin-node-resolve in /site (#1032) Bumps [@rollup/plugin-node-resolve](https://github.com/rollup/plugins) from 10.0.0 to 11.0.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/node-resolve-v10.0.0...commonjs-v11.0.0) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps-dev): bump @babel/preset-env from 7.12.1 to 7.12.7 in /site (#1031) Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.12.1 to 7.12.7. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.12.7/packages/babel-preset-env) Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * go * bundle files, lgn-color, legacy theme * remove old references * light dark context, button styles, zitadel brand * button theme, edit templates * typography theme mixins * input styles, container, extend light dark palette * footer, palette, container * container, label, assets, header * action container, input, typography label, adapt button theme * a and footer styles, adapt palette * user log profile, resourcetempurl * postinstall againnn * wrochage * rm local grpc * button elevation, helper for components * radio * radio button mixins, bundle * qr code styles, secret clipboard, icon pack * stroked buttons, icon buttons, header action, typography * fix password policy styles * account selection * account selection, lgn avatar * mocks * template fixes, animations scss * checkbox, register temp * checkbox appr * fix checkbox, remove input interference * select theme * avatar script, user selection, password policy validation fix * fix formfield state for register and change pwd * footer, main style, qr code fix, mfa type fix, account sel, checkbox * fotter tos, user select * reverse buttons for intial submit action * theme script, themed error messages, header img source * content wrapper, i18n, mobile * emptyline * idp mixins, fix unstyled html * register container * register layout, list themes, policy theme, register org * massive asset cleanup * fix source path, add missing icon, fix complexity refs, prefix * remove material icons, unused assets, fix icon font * move icon pack * avatar, contrast theme, error fix * zitadel css map * revert go mod * fix mfa verify actions * add idp styles * fix google colors, idp styles * fix: bugs * fix register options, google * fix script, mobile layout * precompile font selection * go mod tidy * assets and cleanup * input suffix, fix alignment, actions, add progress bar themes * progress bar mixins, layout fixes * remove test from loginname * cleanup comments, scripts * clear comments * fix external back button * fix mfa alignment * fix actions layout, on dom change listener for suffix * free tier change, success label * fix: button font line-height * remove tabindex * remove comment * remove comment * Update internal/ui/login/handler/password_handler.go Co-authored-by: Livio Amstutz <livio.a@gmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Maximilian Peintner <csaq7175@uibk.ac.at> Co-authored-by: Livio Amstutz <livio.a@gmail.com>
This commit is contained in:
Max Peintner
50
internal/ui/login/static/resources/scripts/avatar.js
Normal file
50
internal/ui/login/static/resources/scripts/avatar.js
Normal file
@@ -0,0 +1,50 @@
|
||||
const avatars = document.getElementsByClassName('lgn-avatar');
|
||||
for (let i = 0; i < avatars.length; i++) {
|
||||
const displayName = avatars[i].getAttribute('displayname');
|
||||
if (displayName) {
|
||||
const split = displayName.split(' ');
|
||||
if (split) {
|
||||
const initials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : '');
|
||||
if (initials) {
|
||||
avatars[i].getElementsByClassName('initials')[0].innerHTML = initials;
|
||||
}
|
||||
}
|
||||
|
||||
const color = this.getColor(displayName);
|
||||
avatars[i].style.background = color;
|
||||
// set default white text instead of contrast text mode
|
||||
avatars[i].style.color = '#ffffff';
|
||||
}
|
||||
}
|
||||
|
||||
function getColor(userName) {
|
||||
const colors = [
|
||||
'linear-gradient(40deg, #B44D51 30%, rgb(241,138,138))',
|
||||
'linear-gradient(40deg, #B75073 30%, rgb(234,96,143))',
|
||||
'linear-gradient(40deg, #84498E 30%, rgb(214,116,230))',
|
||||
'linear-gradient(40deg, #705998 30%, rgb(163,131,220))',
|
||||
'linear-gradient(40deg, #5C6598 30%, rgb(135,148,222))',
|
||||
'linear-gradient(40deg, #7F90D3 30%, rgb(181,196,247))',
|
||||
'linear-gradient(40deg, #3E93B9 30%, rgb(150,215,245))',
|
||||
'linear-gradient(40deg, #3494A0 30%, rgb(71,205,222))',
|
||||
'linear-gradient(40deg, #25716A 30%, rgb(58,185,173))',
|
||||
'linear-gradient(40deg, #427E41 30%, rgb(97,185,96))',
|
||||
'linear-gradient(40deg, #89A568 30%, rgb(176,212,133))',
|
||||
'linear-gradient(40deg, #90924D 30%, rgb(187,189,98))',
|
||||
'linear-gradient(40deg, #E2B032 30%, rgb(245,203,99))',
|
||||
'linear-gradient(40deg, #C97358 30%, rgb(245,148,118))',
|
||||
'linear-gradient(40deg, #6D5B54 30%, rgb(152,121,108))',
|
||||
'linear-gradient(40deg, #6B7980 30%, rgb(134,163,177))',
|
||||
];
|
||||
|
||||
let hash = 0;
|
||||
if (userName.length === 0) {
|
||||
return colors[hash];
|
||||
}
|
||||
for (let i = 0; i < userName.length; i++) {
|
||||
hash = userName.charCodeAt(i) + ((hash << 5) - hash);
|
||||
hash = hash & hash;
|
||||
}
|
||||
hash = ((hash % colors.length) + colors.length) % colors.length;
|
||||
return colors[hash];
|
||||
}
|
||||
@@ -1,10 +1,13 @@
|
||||
function CheckChangePwPolicy() {
|
||||
let policyElement = document.getElementById("change-new-password")
|
||||
let policyElement = document.getElementById("change-new-password");
|
||||
let pwNew = policyElement.value;
|
||||
let pwNewConfirmation = document.getElementById("change-password-confirmation").value;
|
||||
|
||||
if (ComplexityPolicyCheck(policyElement, pwNew) === false) {
|
||||
policyElement.setAttribute("color", "warn");
|
||||
return false;
|
||||
} else {
|
||||
policyElement.setAttribute("color", "primary");
|
||||
}
|
||||
|
||||
return pwNew == pwNewConfirmation;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
const copyToClipboard = str => {
|
||||
navigator.clipboard.writeText(str);
|
||||
}
|
||||
};
|
||||
|
||||
let copyButton = document.getElementsByClassName("copy")[0];
|
||||
let copyButton = document.getElementById("copy");
|
||||
copyButton.addEventListener("click", copyToClipboard(copyButton.getAttribute("data-copy")));
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
function disableSubmit(checks, button) {
|
||||
let form = document.getElementsByTagName('form')[0];
|
||||
let inputs = form.getElementsByTagName('input');
|
||||
button.disabled = true;
|
||||
if (button) {
|
||||
button.disabled = true;
|
||||
}
|
||||
addRequiredEventListener(inputs, checks, form, button);
|
||||
disableDoubleSubmit(form, button);
|
||||
}
|
||||
@@ -22,30 +24,31 @@ function addRequiredEventListener(inputs, checks, form, button) {
|
||||
}
|
||||
|
||||
function disableDoubleSubmit(form, button) {
|
||||
form.addEventListener('submit', function() {
|
||||
form.addEventListener('submit', function () {
|
||||
document.body.classList.add('waiting');
|
||||
button.disabled = true;
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
function toggleButton(checks, form, inputs, button) {
|
||||
if (checks !== undefined) {
|
||||
if (checks() === false) {
|
||||
button.disabled = true;
|
||||
return
|
||||
return;
|
||||
}
|
||||
}
|
||||
button.disabled = !allRequiredDone(form, inputs);
|
||||
const targetValue = !allRequiredDone(form, inputs);
|
||||
button.disabled = targetValue;
|
||||
}
|
||||
|
||||
function allRequiredDone(form, inputs) {
|
||||
for (i = 0; i < inputs.length; i++) {
|
||||
if (inputs[i].required) {
|
||||
if (inputs[i].type === 'checkbox' && !inputs[i].checked) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
if (inputs[i].value === '') {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
const suffix = document.getElementById('default-login-suffix');
|
||||
const suffixInput = document.getElementsByClassName('lgn-suffix-input')[0];
|
||||
|
||||
calculateOffset();
|
||||
suffix.addEventListener("DOMCharacterDataModified", calculateOffset);
|
||||
|
||||
function calculateOffset() {
|
||||
// add suffix width to inner right padding of the input field
|
||||
if (suffix && suffixInput) {
|
||||
suffixInput.style.paddingRight = `${(suffix.offsetWidth ?? 0) + 10}px`;
|
||||
}
|
||||
}
|
||||
@@ -7,7 +7,7 @@ function ComplexityPolicyCheck(policyElement, pwNew) {
|
||||
|
||||
let valid = true;
|
||||
|
||||
let minlengthelem = document.getElementById('minlength')
|
||||
let minlengthelem = document.getElementById('minlength');
|
||||
if (pwNew.length >= minLength) {
|
||||
ValidPolicy(minlengthelem);
|
||||
valid = true;
|
||||
@@ -15,7 +15,7 @@ function ComplexityPolicyCheck(policyElement, pwNew) {
|
||||
InvalidPolicy(minlengthelem);
|
||||
valid = false;
|
||||
}
|
||||
let upper = document.getElementById('uppercase')
|
||||
let upper = document.getElementById('uppercase');
|
||||
if (upperRegex !== "") {
|
||||
if (RegExp(upperRegex).test(pwNew)) {
|
||||
ValidPolicy(upper);
|
||||
@@ -25,7 +25,7 @@ function ComplexityPolicyCheck(policyElement, pwNew) {
|
||||
valid = false;
|
||||
}
|
||||
}
|
||||
let lower = document.getElementById('lowercase')
|
||||
let lower = document.getElementById('lowercase');
|
||||
if (lowerRegex !== "") {
|
||||
if (RegExp(lowerRegex).test(pwNew)) {
|
||||
ValidPolicy(lower);
|
||||
@@ -35,20 +35,20 @@ function ComplexityPolicyCheck(policyElement, pwNew) {
|
||||
valid = false;
|
||||
}
|
||||
}
|
||||
let number = document.getElementById('number')
|
||||
let number = document.getElementById('number');
|
||||
if (numberRegex != "") {
|
||||
if (RegExp(numberRegex).test(pwNew)) {
|
||||
ValidPolicy(number);
|
||||
valid = true;
|
||||
if (RegExp(numberRegex).test(pwNew)) {
|
||||
ValidPolicy(number);
|
||||
valid = true;
|
||||
} else {
|
||||
InvalidPolicy(number);
|
||||
valid = false;
|
||||
InvalidPolicy(number);
|
||||
valid = false;
|
||||
}
|
||||
}
|
||||
let symbol = document.getElementById('symbol')
|
||||
let symbol = document.getElementById('symbol');
|
||||
if (symbolRegex != "") {
|
||||
if (RegExp(symbolRegex).test(pwNew)) {
|
||||
ValidPolicy(symbol)
|
||||
ValidPolicy(symbol);
|
||||
valid = true;
|
||||
} else {
|
||||
InvalidPolicy(symbol);
|
||||
@@ -57,12 +57,19 @@ function ComplexityPolicyCheck(policyElement, pwNew) {
|
||||
}
|
||||
return valid;
|
||||
}
|
||||
|
||||
function ValidPolicy(element) {
|
||||
element.classList.remove('invalid')
|
||||
element.getElementsByTagName('i')[0].innerText = 'check';
|
||||
element.classList.remove('invalid');
|
||||
element.getElementsByTagName('i')[0].classList.remove('lgn-icon-times-solid');
|
||||
element.getElementsByTagName('i')[0].classList.remove('lgn-warn');
|
||||
element.getElementsByTagName('i')[0].classList.add('lgn-icon-check-solid');
|
||||
element.getElementsByTagName('i')[0].classList.add('lgn-valid');
|
||||
}
|
||||
|
||||
function InvalidPolicy(element) {
|
||||
element.classList.add('invalid')
|
||||
element.getElementsByTagName('i')[0].innerText = 'clear';
|
||||
element.classList.add('invalid');
|
||||
element.getElementsByTagName('i')[0].classList.remove('lgn-valid');
|
||||
element.getElementsByTagName('i')[0].classList.remove('lgn-icon-check-solid');
|
||||
element.getElementsByTagName('i')[0].classList.add('lgn-warn');
|
||||
element.getElementsByTagName('i')[0].classList.add('lgn-icon-times-solid');
|
||||
}
|
||||
|
||||
@@ -4,7 +4,10 @@ function CheckRegisterPwPolicy() {
|
||||
let pwNewConfirmation = document.getElementById("register-password-confirmation").value;
|
||||
|
||||
if (ComplexityPolicyCheck(policyElement, pwNew) === false) {
|
||||
policyElement.setAttribute("color", "warn");
|
||||
return false;
|
||||
} else {
|
||||
policyElement.setAttribute("color", "primary");
|
||||
}
|
||||
|
||||
return pwNew == pwNewConfirmation;
|
||||
|
||||
6
internal/ui/login/static/resources/scripts/theme.js
Normal file
6
internal/ui/login/static/resources/scripts/theme.js
Normal file
@@ -0,0 +1,6 @@
|
||||
const usesDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
if (usesDarkTheme) {
|
||||
document.documentElement.classList.replace('lgn-light-theme', 'lgn-dark-theme');
|
||||
} else {
|
||||
document.documentElement.classList.replace('lgn-dark-theme', 'lgn-light-theme');
|
||||
}
|
||||
@@ -8,7 +8,7 @@ function checkWebauthnSupported(button, func) {
|
||||
for (let item of support) {
|
||||
item.classList.add('hidden');
|
||||
}
|
||||
return
|
||||
return;
|
||||
}
|
||||
document.getElementById(button).addEventListener('click', func);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user