Wasp-lang•5mo ago

How to change the language of authentication forms?

I have noticed, that nowhere in the entire repository the lines like “Create a new account”, “Log in to your account”, “Forgot your password?” Show up. Where are they set and how can they be altered to change them to another language?

7 Replies

kapa.ai•5mo ago

Hi @fred-123. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The knowledge sources provided do not contain information on how to change the language of authentication forms in Wasp. I recommend checking the Wasp documentation (https://wasp-lang.dev/docs) or their GitHub repository (https://github.com/wasp-lang/wasp) for more information. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @fred-123, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

fred-123OP•5mo ago

How do I try again? Just message here?

Fecony•5mo ago

Note: you can ask me a follow up question by @ mentioning me again 💬

I guess there is no way to change that for now

miho•5mo ago

So far we don't really support changing the Auth UI texts. We are looking to solve it within this issue https://github.com/wasp-lang/wasp/issues/2061

GitHub

Add support for localization (l10n) and internationalization (i18n)...

miho•5mo ago

You can maybe use CSS to hide the form title in auth UI for example 😊 but I know that's of limited usefulness @kapa.ai did someone already do this?

kapa.ai•5mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, a community member in a Discord support thread (https://discord.com/channels/686873244791210014/1189296190924267551) shared a workaround using CSS to hide the form title in the Wasp authentication UI. Here's the CSS code they used:

h2 {
  display: none;
}
div:has(> input[name="username"]:not(#username)) {
  display: none;
}
div:has(> input[name="password"]:not(#password)) {
  display: none;
}

h2 {
  display: none;
}
div:has(> input[name="username"]:not(#username)) {
  display: none;
}
div:has(> input[name="password"]:not(#password)) {
  display: none;
}

They also used JavaScript to hide specific form fields:

useEffect(() => {
  const hideFirstFormField = (fieldName: string) => {
    const input = document.querySelector(
      `input[name="${fieldName}"]:not(#${fieldName})`
    ) as HTMLElement;
    if (input) {
      input.style.display = "none";

      const prevLabel = input.previousElementSibling as HTMLElement;
      if (prevLabel && prevLabel.tagName === "LABEL") {
        prevLabel.style.display = "none";
      }
    }
  };
  const defaultWaspFormFieldsToHide = ['username', 'password'];
  defaultWaspFormFieldsToHide.map(hideFirstFormField);
});

useEffect(() => {
  const hideFirstFormField = (fieldName: string) => {
    const input = document.querySelector(
      `input[name="${fieldName}"]:not(#${fieldName})`
    ) as HTMLElement;
    if (input) {
      input.style.display = "none";

      const prevLabel = input.previousElementSibling as HTMLElement;
      if (prevLabel && prevLabel.tagName === "LABEL") {
        prevLabel.style.display = "none";
      }
    }
  };
  const defaultWaspFormFieldsToHide = ['username', 'password'];
  defaultWaspFormFieldsToHide.map(hideFirstFormField);
});

Please note that this is a workaround and might not be the best practice. The community member also suggested that Wasp could add more customization options in the future. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @miho, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

fred-123OP•5mo ago

Thank you for the update on that! Will just use the css workaround for now.

Gaming

Programming

How to change the language of authentication forms?