CMS Admin Login Form

_emarat3 years ago

7

• 

  7wonders.3 years ago

  https://payloadcms.com/docs/admin/components
  
  

  BeforeLogin

• 

  _emarat3 years ago

  Thanks 🖤

  
  
  

  I can not understand clearly. Is there any full example? Please help me to modify the login field

• 

  squareclamp3 years ago

  Try replicating the BeforeLogin component in one of the tests -

  https://github.com/payloadcms/payload/blob/master/test/admin/config.ts#L38-L40
• 

  gregwhitworth3 years ago

  I think it would be great if this was just a view in the src, maybe under /pages or similar upon creating a new view as only being able to place items before/after the form isn't really sufficient. My expectation is that I'll need to replace the default login form with my own view and leverage the auth APIs. If someone has already done that and has a create account, reset password view - please share 🙂

• 

  exo37183 years ago

  "My expectation is that I'll need to replace the default login form with my own view and leverage the auth APIs"

  
  
  

  correct! Do you happen to know a bit of React? I think it is most common to just create some sort of "components" folder in your payload project. There you write you

  admin-login.tsx

  component and then import it in the payload config, overriding the default Admin component by setting

  { admin: { components: { routes: [ { path: '/login', component: MyAwesomeLogin } ] } } }

  
  
  

  See the link above from 7wonders for more information (and don't rely 100% on my syntax being correct here, I kinda just wrote it off my head 😄 )

• 

  gregwhitworth3 years ago

  @245330411570331648

  @274881403454226434

  ok, this is what I'm looking for; however. How can I utilize the same components and <form> used by Fields without having to re-build them which would introduce deterministic behavior.

  
  
  

  Here's what it currently looks like:

  
  
  
  
  

  And here's the code

  
  
  

  <form method="post" action="/api/createAccount"> <ul> <li> <label>Email</label> <input type="email" name="email" /> </li> <li> <label>Password</label> <input type="password" name="password" /> </li> <li> <label>First Name</label> <input type="text" name="firstName" /> </li> <li> <label>Last Name</label> <input type="text" name="lastName" /> </li> <li> <label>Option 1</label> <input type="checkbox" name="option1" /> </li> <li> <label>Option 2</label> <input type="checkbox" name="option2" /> </li> <li> <input type="submit" name="submit" /> </li> </ul> </form>
• 

  exo37183 years ago

  In your scss you need to

  @import '~payload/scss';
  
  

  and from there you can use a naming convention (of which I forgot the name haha)

  
  
  

  however, you can just inspect the existing forms from the admin dashboard with the webdev tools and use the same classes for your components, i think that should work fine 🙂

  
  
  

  Here are some more examples for that

  https://github.com/payloadcms/payload/tree/master/test/admin/components