Wasp•2w ago

How to change the form in .wasp

I need to change tag <ResetPasswordForm>, like add the button to see the password and fix title, but this tag is in .wasp which will render default file, How I can handle this

8 Replies

kapa.ai•2w ago

Hi @Phuong. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To customize the <ResetPasswordForm> component in Wasp, you have a few options: 1. Use the customization props: Wasp allows you to customize the appearance of auth forms by passing props. You can modify colors, add a logo, and change the social layout. However, this doesn't allow for structural changes like adding a "show password" button or changing the title directly.

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

   export function ResetPasswordPage() {
     return (
       <ResetPasswordForm
         appearance={authAppearance}
         // Other customization props
       />
     )
   }

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

   export function ResetPasswordPage() {
     return (
       <ResetPasswordForm
         appearance={authAppearance}
         // Other customization props
       />
     )
   }

Auth UI Customization (https://wasp-lang.dev/docs/auth/ui#customization-) 2. Create your own form: For more extensive customization, you can create your own reset password form using Wasp's lower-level primitives. This gives you full control over the form's structure and functionality.

   import { resetPassword } from 'wasp/client/auth'

   // Create your custom form component
   function CustomResetPasswordForm() {
     // Implement your form logic here
     // Use the resetPassword function when submitting
   }

   import { resetPassword } from 'wasp/client/auth'

   // Create your custom form component
   function CustomResetPasswordForm() {
     // Implement your form logic here
     // Use the resetPassword function when submitting
   }

Auth Primitives (https://wasp-lang.dev/docs/auth/email#4-create-the-client-pages) 3. Modify Wasp templates (not recommended): While it's possible to modify Wasp's internal templates, this is considered a hack and is not recommended. It won't persist between Wasp versions and could cause issues. Discord Thread (https://discord.com/channels/686873244791210014/1189296190924267551) The recommended approach is to create your own custom form component (#2) using Wasp's auth primitives. This gives you the flexibility to add features like a "show password" button and customize the title while still leveraging Wasp's authentication functionality. Remember, you should never modify files directly in the .wasp directory, as these are generated by Wasp and changes will be overwritten. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Phuong, 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?

PhuongOP•2w ago

ok, I will do option 2 but I want to keep that style

miho•2w ago

Did you try taking the source code of the form and just putting in your file? I'm not sure if that would work - but I don't see why not 😄

PhuongOP•2w ago

I did try but not work 🙂

miho•2w ago

What kind of error did you get?

PhuongOP•2w ago

I tried to get that form, but it referenced many files that do not exist yet

MEE6•2w ago

Wohooo @Phuong, you just became a Waspeteer level 1!

miho•2w ago

If you want the same style, you could replicate the CSS, it should be fine. We should rework our Auth UI code to make it easier to customise. Sorry about it 🙂

Gaming

Programming

How to change the form in .wasp