nitro-web 0.0.101 → 0.0.103

package/components/auth/reset.tsx

@@ -1,12 +1,21 @@
 import { Topbar, Field, FormError, Button, request, onChange } from 'nitro-web'
 import { Errors } from 'nitro-web/types'
 
-export function ResetInstructions() {
+type resetInstructionsProps = {
+  className?: string,
+  elements?: { Button?: typeof Button },
+}
+
+export function ResetInstructions({ className, elements }: resetInstructionsProps) {
   const navigate = useNavigate()
   const isLoading = useState(false)
   const [, setStore] = useTracked()
   const [state, setState] = useState({ email: '', errors: [] as Errors })
 
+  const Elements = {
+    Button: elements?.Button || Button,
+  }
+
   async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
       await request('post /api/reset-instructions', state, event, isLoading, setState)
@@ -18,10 +27,10 @@ export function ResetInstructions() {
   }
 
   return (
-    <div class="">
+    <div className={className}>
       <Topbar title={<>Reset your Password</>} />
 
-      <form onSubmit={onSubmit}>
+      <form onSubmit={onSubmit} class="mb-0">
         <div>
           <label for="email">Email Address</label>
           <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)} placeholder="Your email address..." />
@@ -32,13 +41,13 @@ export function ResetInstructions() {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button className="w-full" isLoading={isLoading[0]} type="submit">Email me a reset password link</Button>
+        <Elements.Button className="w-full" isLoading={isLoading[0]} type="submit">Email me a reset password link</Elements.Button>
       </form>
     </div>
   )
 }
 
-export function ResetPassword() {
+export function ResetPassword({ className, elements }: resetInstructionsProps) {
   const navigate = useNavigate()
   const params = useParams()
   const isLoading = useState(false)
@@ -49,6 +58,10 @@ export function ResetPassword() {
     token: params.token,
     errors: [] as Errors,
   }))
+  
+  const Elements = {
+    Button: elements?.Button || Button,
+  }
 
   async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
@@ -61,10 +74,10 @@ export function ResetPassword() {
   }
 
   return (
-    <div class="">
+    <div className={className}>
       <Topbar title={<>Reset your Password</>} />
 
-      <form onSubmit={onSubmit}>
+      <form onSubmit={onSubmit} class="mb-0">
         <div>
           <label for="password">Your New Password</label>
           <Field name="password" type="password" state={state} onChange={(e) => onChange(setState, e)} />
@@ -79,7 +92,7 @@ export function ResetPassword() {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={isLoading[0]} type="submit">Reset Password</Button>
+        <Elements.Button class="w-full" isLoading={isLoading[0]} type="submit">Reset Password</Elements.Button>
       </form>
     </div>
   )

package/components/auth/signin.tsx

@@ -1,7 +1,12 @@
 import { Topbar, Field, Button, FormError, request, queryObject, injectedConfig, updateJwt, onChange } from 'nitro-web'
 import { Errors } from 'nitro-web/types'
 
-export function Signin() {
+type signinProps = {
+  className?: string,
+  elements?: { Button?: typeof Button },
+}
+
+export function Signin({ className, elements }: signinProps) {
   const navigate = useNavigate()
   const location = useLocation()
   const isSignout = location.pathname == '/signout'
@@ -12,6 +17,10 @@ export function Signin() {
     password: injectedConfig.env == 'development' ? '1234' : '',
     errors: [] as Errors,
   })
+  
+  const Elements = {
+    Button: elements?.Button || Button,
+  }
 
   useEffect(() => {
     // Autofill the email input from ?email=
@@ -47,10 +56,10 @@ export function Signin() {
   }
 
   return (
-    <div>
+    <div className={className}>
       <Topbar title={<>Sign in to your Account</>} />
 
-      <form onSubmit={onSubmit}>
+      <form onSubmit={onSubmit} class="mb-0">
         <div>
           <label for="email">Email Address</label>
           <Field name="email" type="email" state={state} onChange={(e) => onChange(setState, e)}
@@ -69,7 +78,7 @@ export function Signin() {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={isLoading[0]} type="submit">Sign In</Button>
+        <Elements.Button class="w-full" isLoading={isLoading[0]} type="submit">Sign In</Elements.Button>
       </form>
     </div>
   )

package/components/auth/signup.tsx

@@ -1,7 +1,12 @@
 import { Button, Field, FormError, Topbar, request, injectedConfig, onChange } from 'nitro-web'
 import { Errors } from 'nitro-web/types'
 
-export function Signup() {
+type signupProps = {
+  className?: string,
+  elements?: { Button?: typeof Button },
+}
+
+export function Signup({ className, elements }: signupProps) {
   const navigate = useNavigate()
   const isLoading = useState(false)
   const [, setStore] = useTracked()
@@ -9,10 +14,14 @@ export function Signup() {
     email: injectedConfig.env === 'development' ? (injectedConfig.placeholderEmail || '') : '',
     name: injectedConfig.env === 'development' ? 'Bruce Wayne' : '',
     business: { name: injectedConfig.env === 'development' ? 'Wayne Enterprises' : '' },
-    password: injectedConfig.env === 'development' ? '1234' : '',
+    password: injectedConfig.env === 'development' ? '' : '',
     errors: [] as Errors,
   })
 
+  const Elements = {
+    Button: elements?.Button || Button,
+  }
+
   async function onSubmit (e: React.FormEvent<HTMLFormElement>) {
     try {
       const data = await request('post /api/signup', state, e, isLoading, setState)
@@ -24,10 +33,10 @@ export function Signup() {
   }
   
   return (
-    <div class="">
+    <div className={className}>
       <Topbar title={<>Start your 21 day Free Trial</>} />
 
-      <form onSubmit={onSubmit}>
+      <form onSubmit={onSubmit} class="mb-0">
         <div class="grid grid-cols-2 gap-6">  
           <div>
             <label for="name">Your Name</label>
@@ -55,7 +64,7 @@ export function Signup() {
           <FormError state={state} className="pt-2" />
         </div>
 
-        <Button class="w-full" isLoading={isLoading[0]} type="submit">Create Account</Button>
+        <Elements.Button class="w-full" isLoading={isLoading[0]} type="submit">Create Account</Elements.Button>
       </form>
     </div>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitro-web",
-  "version": "0.0.101",
+  "version": "0.0.103",
   "repository": "github:boycce/nitro-web",
   "homepage": "https://boycce.github.io/nitro-web/",
   "description": "Nitro is a battle-tested, modular base project to turbocharge your projects, styled using Tailwind 🚀",

package/server/email/invite-user.html

@@ -7,7 +7,7 @@
   [[ subject = You've been invited to join IMG ]]
   <b>%recipient.greet%</b>,<br/>
   <br/>
-  You've been invited to join IMG.<br/>
+  You've been invited to join <b>%recipient.configName%</b>.<br/>
   <br/>
   If you didn't expect to receive this email, feel free to disregard this email.<br/>
   <br/>