nitro-web 0.0.102 → 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({ className }: { className?: string }) {
+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)
@@ -32,13 +41,13 @@ export function ResetInstructions({ className }: { className?: string }) {
           <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({ className }: { className?: string }) {
+export function ResetPassword({ className, elements }: resetInstructionsProps) {
   const navigate = useNavigate()
   const params = useParams()
   const isLoading = useState(false)
@@ -49,6 +58,10 @@ export function ResetPassword({ className }: { className?: string }) {
     token: params.token,
     errors: [] as Errors,
   }))
+  
+  const Elements = {
+    Button: elements?.Button || Button,
+  }
 
   async function onSubmit (event: React.FormEvent<HTMLFormElement>) {
     try {
@@ -79,7 +92,7 @@ export function ResetPassword({ className }: { className?: string }) {
           <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({ className }: { className?: string }) {
+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({ className }: { className?: string }) {
     password: injectedConfig.env == 'development' ? '1234' : '',
     errors: [] as Errors,
   })
+  
+  const Elements = {
+    Button: elements?.Button || Button,
+  }
 
   useEffect(() => {
     // Autofill the email input from ?email=
@@ -69,7 +78,7 @@ export function Signin({ className }: { className?: string }) {
           <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({ className }: { className?: string }) {
+type signupProps = {
+  className?: string,
+  elements?: { Button?: typeof Button },
+}
+
+export function Signup({ className, elements }: signupProps) {
   const navigate = useNavigate()
   const isLoading = useState(false)
   const [, setStore] = useTracked()
@@ -13,6 +18,10 @@ export function Signup({ className }: { className?: string }) {
     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)
@@ -55,7 +64,7 @@ export function Signup({ className }: { className?: string }) {
           <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.102",
+  "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 🚀",