Appwrite/appwrite
1
0
Fork 0
mirror of https://github.com/appwrite/appwrite.git synced 2026-05-26 13:51:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

update: design changes on creds step.

Browse Source
This commit is contained in:
Darshan
2026-01-30 11:08:26 +05:30
parent a2a24ee367
commit 02ce669993
5 changed files with 67 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/views/install/installer.phtml
+4 -1
View File
@@ -208,7 +208,10 @@ $installerVersion = @filemtime(__DIR__ . '/installer/js/installer.js') ?: time()
<?php } ?>
<template id="field-error-template">
<div class="field-error typography-text-xs-400 text-error">
<div class="field-error typography-caption-400 text-error">
<span class="field-error-icon">
<?php include __DIR__ . '/installer/icons/exclamation-circle.svg'; ?>
</span>
<span class="field-error-text"></span>
</div>
</template>
app/views/install/installer/css/styles.css
+29 -5
View File
@@ -1222,23 +1222,47 @@ body {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-top: var(--space-2);
color: var(--fgcolor-error);
max-height: 0;
opacity: 0;
overflow: hidden;
padding-inline-start: var(--space-2);
/*padding-inline-start: var(--space-2);*/
transition: max-height var(--duration-extended) var(--ease-standard),
opacity var(--duration-extended) var(--ease-standard);
}
.field-error-text {
line-height: 1.4;
.field-error-icon {
display: flex;
flex-shrink: 0;
align-items: center;
}
.field-error-icon svg {
width: 1rem;
height: 1rem;
}
.field-error.is-visible {
max-height: 64px;
opacity: 1;
max-height: 64px;
}
.field-helper {
display: flex;
align-items: flex-start;
gap: var(--space-3);
color: var(--fgcolor-neutral-secondary);
}
.field-helper-icon {
display: flex;
flex-shrink: 0;
align-items: center;
}
.field-helper-icon svg {
width: 1rem;
height: 1rem;
}
.input-field {
app/views/install/installer/js/modules/ui.js
+23 -13
View File
@@ -4,10 +4,15 @@
const clearFieldErrors = (root) => {
if (!root) return;
root.querySelectorAll('.field-error').forEach((node) => node.remove());
root.querySelectorAll('.field-error').forEach((node) => {
node.classList.remove('is-visible');
});
root.querySelectorAll('.input-field.is-error, .input-action.is-error').forEach((node) => {
node.classList.remove('is-error');
});
root.querySelectorAll('.field-helper').forEach((helper) => {
helper.style.display = '';
});
};
const setFieldError = (input, message) => {
@@ -18,35 +23,39 @@
let errorText = error?.querySelector('.field-error-text');
const hasSameMessage = Boolean(errorText && errorText.textContent === message);
const alreadyVisible = Boolean(error && error.classList.contains('is-visible'));
if (hasSameMessage && alreadyVisible) {
return;
}
if (!error) {
const template = document.getElementById('field-error-template');
if (template && template.content) {
const fragment = template.content.cloneNode(true);
error = fragment.querySelector('.field-error');
group.appendChild(fragment);
} else {
error = document.createElement('div');
error.className = 'field-error typography-text-xs-400 text-error';
const text = document.createElement('span');
text.className = 'field-error-text';
error.appendChild(text);
group.appendChild(error);
}
errorText = error.querySelector('.field-error-text');
errorText = error?.querySelector('.field-error-text');
}
if (errorText) {
errorText.textContent = message;
}
if (!hasSameMessage || !alreadyVisible) {
if (!alreadyVisible) {
requestAnimationFrame(() => {
error.classList.add('is-visible');
});
}
input.classList.add('is-error');
const actionWrapper = input.closest('.input-action');
if (actionWrapper) {
actionWrapper.classList.add('is-error');
}
const helper = group.querySelector('.field-helper');
if (helper) {
helper.style.display = 'none';
}
};
const bindErrorClear = (input) => {
@@ -56,15 +65,16 @@
const error = group?.querySelector('.field-error');
if (error) {
error.classList.remove('is-visible');
setTimeout(() => {
error.remove();
}, TIMINGS?.errorClear ?? 0);
}
input.classList.remove('is-error');
const actionWrapper = input.closest('.input-action');
if (actionWrapper) {
actionWrapper.classList.remove('is-error');
}
const helper = group?.querySelector('.field-helper');
if (helper) {
helper.style.display = '';
}
};
input.addEventListener('input', handler);
input.addEventListener('change', handler);
app/views/install/installer/js/steps.js
+4 -4
View File
@@ -434,12 +434,12 @@
const password = root?.querySelector('#account-password');
if (!name || !name.value.trim()) {
setFieldError?.(name, 'Please enter a name');
setFieldError?.(name, 'This field is required');
valid = false;
}
if (!email || !email.value.trim()) {
setFieldError?.(email, 'Please enter an email address');
setFieldError?.(email, 'This field is required');
valid = false;
} else if (!isValidEmail?.(email.value.trim())) {
setFieldError?.(email, 'Please enter a valid email address');
@@ -448,10 +448,10 @@
const passwordValue = password?.value ?? '';
if (!password || !/\S/.test(passwordValue)) {
setFieldError?.(password, 'Please enter a password');
setFieldError?.(password, 'This field is required');
valid = false;
} else if (!isValidPassword?.(passwordValue)) {
setFieldError?.(password, 'Password must be at least 8 characters');
setFieldError?.(password, 'Password must be at least 8 characters long');
valid = false;
}
app/views/install/installer/templates/steps/step-3.phtml
+7 -1
View File
@@ -49,7 +49,7 @@ $accountNameValue = htmlspecialchars($defaultAccountName, ENT_QUOTES, 'UTF-8');
id="account-password"
name="accountPassword"
class="input-action-input typography-text-m-400 text-neutral-primary"
placeholder="Password must be at least 8 characters long"
placeholder="Enter password"
autocomplete="new-password"
>
<div class="input-action-buttons">
@@ -63,6 +63,12 @@ $accountNameValue = htmlspecialchars($defaultAccountName, ENT_QUOTES, 'UTF-8');
</button>
</div>
</div>
<div class="field-helper typography-caption-400 text-neutral-secondary">
<span class="field-helper-icon">
<?php include __DIR__ . '/../../icons/info.svg'; ?>
</span>
<span class="field-helper-text">Password must be at least 8 characters long</span>
</div>
</div>
</div>
</div>