gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Translate sign in form to English

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-11 11:04:34 +02:00
parent 5607400156
commit b44c1a10a8
1 changed files with 21 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-register-step-1.html
+21 -47
View File
@@ -42,35 +42,35 @@
</section> </section>
<main class="sg-vsf-register-step-1"> <main class="sg-vsf-register-step-1">
<article class="sg-card sg-object-card sg-object-card--variable-height sg-vsf-register-step-1__card" data-pattern="object-card" aria-label="Registriere dich"> <article class="sg-card sg-object-card sg-object-card--variable-height sg-vsf-register-step-1__card" data-pattern="object-card" aria-label="Sign in">
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"> <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
<div class="sg-strong">Welcome back to ValueStockFinder!</div> <div class="sg-strong">Welcome back to ValueStockFinder!</div>
</header> </header>
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Registrierungsformular"> <footer class="sg-card-segment sg-card-segment--gray" aria-label="Sign in form">
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Formular mit Abschnitten"> <div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Form with sections">
<form class="sg-form-sections-card" action="#" method="post"> <form class="sg-form-sections-card" action="#" method="post">
<div class="sg-form-sections-card__body" data-pattern-part="form-body"> <div class="sg-form-sections-card__body" data-pattern-part="form-body">
<h2 class="sg-strong sg-form-sections-card__title">Sign in to your account</h2> <h2 class="sg-strong sg-form-sections-card__title">Sign in to your account</h2>
<div class="sg-form-sections-card__field-group"> <div class="sg-form-sections-card__field-group">
<label class="sg-labeled-input-row"> <label class="sg-labeled-input-row">
<span class="sg-label">E-Mail</span> <span class="sg-label">Email</span>
<input <input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="email" type="email"
placeholder="E-Mail eingeben" placeholder="Enter email"
aria-label="E-Mail" aria-label="Email"
autocomplete="email" autocomplete="email"
> >
</label> </label>
<label class="sg-labeled-input-row"> <label class="sg-labeled-input-row">
<span class="sg-label">Passwort</span> <span class="sg-label">Password</span>
<input <input
class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="password" type="password"
placeholder="Passwort eingeben" placeholder="Enter password"
aria-label="Passwort" aria-label="Password"
autocomplete="new-password" autocomplete="new-password"
> >
</label> </label>
@@ -79,35 +79,35 @@
<footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment"> <footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment">
<div class="sg-form-sections-card__actions" data-pattern-part="form-actions"> <div class="sg-form-sections-card__actions" data-pattern-part="form-actions">
<button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Abbrechen</button> <button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button">Cancel</button>
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive sg-form-sections-card__action" type="submit" disabled aria-disabled="true">Registrieren</button> <button class="sg-interaction-element sg-button sg-button--process sg-form-sections-card__action" type="submit">Sign In</button>
</div> </div>
</footer> </footer>
</form> </form>
</div> </div>
</footer> </footer>
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Registrieren mit"> <footer class="sg-card-segment sg-card-segment--gray" aria-label="Sign in with">
<div class="sg-strong">Registrieren mit</div> <div class="sg-strong">Sign in with</div>
<div class="sg-vsf-register-step-1__social-links"> <div class="sg-vsf-register-step-1__social-links">
<a class="social-logo" href="#" aria-label="Mit Google fortfahren" data-idp="google"> <a class="social-logo" href="#" aria-label="Continue with Google" data-idp="google">
<span class="kcLogoIdP-google" aria-hidden="true"></span> <span class="kcLogoIdP-google" aria-hidden="true"></span>
<span>Logo Platzhalter</span> <span>Logo placeholder</span>
</a> </a>
<a class="social-logo" href="#" aria-label="Mit LinkedIn fortfahren" data-idp="linkedin"> <a class="social-logo" href="#" aria-label="Continue with LinkedIn" data-idp="linkedin">
<span class="kcLogoIdP-linkedin" aria-hidden="true"></span> <span class="kcLogoIdP-linkedin" aria-hidden="true"></span>
<span>Logo Platzhalter</span> <span>Logo placeholder</span>
</a> </a>
<a class="social-logo" href="#" aria-label="Mit Microsoft fortfahren" data-idp="microsoft"> <a class="social-logo" href="#" aria-label="Continue with Microsoft" data-idp="microsoft">
<span class="kcLogoIdP-microsoft" aria-hidden="true"></span> <span class="kcLogoIdP-microsoft" aria-hidden="true"></span>
<span>Logo Platzhalter</span> <span>Logo placeholder</span>
</a> </a>
</div> </div>
</footer> </footer>
<footer class="sg-card-segment sg-card-segment--gray" aria-label="Bereits registriert"> <footer class="sg-card-segment sg-card-segment--gray" aria-label="Already have an account">
<div class="sg-body"> <div class="sg-body">
Du hast bereits einen Account? <a class="sg-hyperlink" href="#" data-component="hyperlink">Login</a>. Already have an account? <a class="sg-hyperlink" href="#" data-component="hyperlink">Sign in</a>.
</div> </div>
</footer> </footer>
</article> </article>
@@ -145,32 +145,6 @@
}); });
}); });
(() => {
const formCard = document.querySelector('.sg-form-sections-card');
if (!formCard) {
return;
}
const registerButton = formCard.querySelector('.sg-button--process');
if (!registerButton) {
return;
}
const updateRegisterButtonState = () => {
const requiredFields = Array.from(formCard.querySelectorAll('input[type="email"], input[type="password"]'));
const allFieldsFilled = requiredFields.every((field) => field.value.trim().length > 0);
registerButton.disabled = !allFieldsFilled;
registerButton.setAttribute('aria-disabled', String(!allFieldsFilled));
registerButton.classList.toggle('sg-button--process-inactive', !allFieldsFilled);
};
formCard.querySelectorAll('input[type="email"], input[type="password"]').forEach((field) => {
field.addEventListener('input', updateRegisterButtonState);
});
updateRegisterButtonState();
})();
</script> </script>
</body> </body>