Wasp•2w ago

Customize Login Text

There's a way to customize login text component?

3 Replies

Hi @Kbral. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, there are ways to customize the login text component in Wasp. The Auth UI components in Wasp offer some customization options. Here's what you can do: 1. Customizing Colors and Appearance: You can customize the colors and appearance of the login form by passing an appearance prop to the LoginForm component. This allows you to override the default theme tokens.

   import { LoginForm } from 'wasp/client/auth'
   import { authAppearance } from './appearance'

   export function LoginPage() {
     return <LoginForm appearance={authAppearance} />
   }

   import { LoginForm } from 'wasp/client/auth'
   import { authAppearance } from './appearance'

   export function LoginPage() {
     return <LoginForm appearance={authAppearance} />
   }

Auth UI Customization 2. Adding a Logo: You can add your own logo to the login form by passing a logo prop:

   import { LoginForm } from 'wasp/client/auth'
   import todoLogo from './todoLogo.png'

   export function LoginPage() {
     return <LoginForm logo={todoLogo} />
   }

   import { LoginForm } from 'wasp/client/auth'
   import todoLogo from './todoLogo.png'

   export function LoginPage() {
     return <LoginForm logo={todoLogo} />
   }

Auth UI Customization 3. Custom Form Layout: If you need more control over the layout and text, you can create your own custom login form using the login function provided by Wasp:

   import { login } from "wasp/client/auth";

   import { login } from "wasp/client/auth";

This allows you to build your own form with custom text and layout while still using Wasp's authentication functionality. Discord Support Thread 4. Hiding Default Fields: If you want to hide certain default fields and add your own custom text, you can use CSS to hide the default elements and add your own:

   const defaultWaspFormFieldsToHide = ["username", "password"];
   // ... (code to hide fields and add custom text)

   const defaultWaspFormFieldsToHide = ["username", "password"];
   // ... (code to hide fields and add custom text)

Discord Support Thread Keep in mind that while these options provide some level of customization, the ability to directly modify the text of the default LoginForm component is limited. For more extensive customization, you might need to create your own form component using the login function. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kbral, 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?

KbralOP•2w ago

@kapa.ai i'm saying, change the text that is fixed as: "Create a new account"

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're specifically looking to change the fixed text "Create a new account" in the login or signup form. Unfortunately, based on the knowledge sources provided, there isn't a direct, out-of-the-box way to change this specific text in Wasp's default Auth UI components. However, there are a couple of workarounds that have been discussed: 1. CSS Hiding: One community member found a way to hide the default title using CSS. Here's an example:

   h2 {
     display: none;
   }

   h2 {
     display: none;
   }

Discord support thread 2. Custom Implementation: Another approach is to not use Wasp's SignupForm component and instead implement your own form using Wasp's lower-level primitives. This would allow you to have full control over the text and layout. Discord support thread It's worth noting that the Wasp team is aware of the need for more customization options. They've created an issue to make the signup form more flexible in future versions: GitHub Issue For now, if you need to change this specific text, the most reliable approach would be to create your own custom signup form using Wasp's authentication actions, which would give you full control over all text and layout elements. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Kbral, 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?

Gaming

Programming

Customize Login Text

Did you find this page helpful?