bit more polish

Author: sw-yx

.size-snapshot.json

@@ -1,35 +1,35 @@
 {
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.development.js": {
-    "bundled": 14407,
-    "minified": 7244,
-    "gzipped": 1917
+    "bundled": 14099,
+    "minified": 7089,
+    "gzipped": 1718
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.production.js": {
-    "bundled": 14407,
-    "minified": 7244,
-    "gzipped": 1917
+    "bundled": 14099,
+    "minified": 7089,
+    "gzipped": 1718
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.development.js": {
-    "bundled": 15516,
-    "minified": 6554,
-    "gzipped": 1892
+    "bundled": 15192,
+    "minified": 6280,
+    "gzipped": 1690
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.production.js": {
-    "bundled": 15516,
-    "minified": 6554,
-    "gzipped": 1892
+    "bundled": 15192,
+    "minified": 6280,
+    "gzipped": 1690
   },
   "/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.es.production.js": {
-    "bundled": 14204,
-    "minified": 7080,
-    "gzipped": 1875,
+    "bundled": 13864,
+    "minified": 6900,
+    "gzipped": 1662,
     "treeshaked": {
       "rollup": {
-        "code": 520,
+        "code": 524,
         "import_statements": 125
       },
       "webpack": {
-        "code": 1654
+        "code": 1683
       }
     }
   }

example/src/App.tsx

@@ -1,31 +1,35 @@
 import React from "react"
-import logo from "./logo.svg"
 import "./App.css"
-import { IdentityModal, useIdentityContext } from "react-netlify-identity-widget"
+import { IdentityModal, useNetlifyIdentity, IdentityContextProvider } from "react-netlify-identity-widget"
 import "react-netlify-identity-widget/styles.css"
 
 function App() {
   const [dialog, setDialog] = React.useState(false)
-  const identity = useIdentityContext
-  console.log("login status can be used anywhere in app", identity)
+  const identity = useNetlifyIdentity("https://netlify-gotrue-in-react.netlify.com")
+  const name =
+    (identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.name) || "NoName"
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
-          Learn React
-        </a>
-        <button onClick={() => setDialog(true)}>open modal</button>
-        <IdentityModal
-          netlifyInstance="https://netlify-gotrue-in-react.netlify.com"
-          showDialog={dialog}
-          onCloseDialog={() => setDialog(false)}
-        />
-      </header>
-    </div>
+    <IdentityContextProvider value={identity}>
+      <div className="App">
+        {identity && identity.isLoggedIn ? (
+          <header className="App-header">
+            <h1> hello {name}!</h1>
+            <button className="btn" style={{ maxWidth: 400, background: "orangered" }} onClick={() => setDialog(true)}>
+              LOG OUT
+            </button>
+            <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
+          </header>
+        ) : (
+          <header className="App-header">
+            <h1> hello! try logging in! </h1>
+            <button className="btn" style={{ maxWidth: 400, background: "darkgreen" }} onClick={() => setDialog(true)}>
+              LOG IN
+            </button>
+            <IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
+          </header>
+        )}
+      </div>
+    </IdentityContextProvider>
   )
 }
 

example/src/index.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from "react"
+import ReactDOM from "react-dom"
+import "./index.css"
+import App from "./App"
+import * as serviceWorker from "./serviceWorker"
 
-ReactDOM.render(<App />, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById("root"))
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister()

src/components/login.tsx

@@ -37,10 +37,11 @@ export function Login() {
           .catch(err => void console.error(err) || setMsg("Error: " + err.message))
       }}
     >
-      <div className="formGroup">
+      <div className="formGroup" key="email">
         <label>
           <VisuallyHidden>Enter your email</VisuallyHidden>
           <input
+            id="email"
             className="formControl"
             type="email"
             name="email"
@@ -51,20 +52,26 @@ export function Login() {
           <div className="inputFieldIcon inputFieldEmail" />
         </label>
       </div>
-      <div className="formGroup">
+      <div className="formGroup" key="password">
         <label>
           <VisuallyHidden>Enter your password</VisuallyHidden>
-          <input className="formControl" type="password" name="password" placeholder="Password" required={true} />
+          <input
+            id="password"
+            className="formControl"
+            type="password"
+            name="password"
+            placeholder="Password"
+            required={true}
+          />
           <div className="inputFieldIcon inputFieldPassword" />
         </label>
       </div>
 
       <div>
-        {isLoading && "loading..."}
-        <button type="submit" className="btn">
+        <button type="submit" className={isLoading ? "btn saving" : "btn"}>
           Log in
         </button>
-        {msg && <pre>{msg}</pre>}
+        {msg && <pre style={{ background: "salmon", padding: 10 }}>{msg}</pre>}
       </div>
       <button type="button" className="btnLink forgotPasswordLink">
         Forgot password?

src/components/logout.tsx

@@ -1,9 +1,11 @@
 import React from "react"
 import { useIdentityContext } from "../context"
+import useLoading from "../useLoading"
 
 export function Logout() {
   const identity = useIdentityContext()
-  console.log({ identity })
+  const [isLoading, load] = useLoading()
+  const logout = () => load(identity.logoutUser())
   return (
     <>
       <div className="header">
@@ -14,7 +16,7 @@ export function Logout() {
           Logged in as <br />
           <span className="infoTextEmail">Shawn Wang</span>
         </p>
-        <button type="submit" className="btn">
+        <button type="submit" className={isLoading ? "btn saving" : "btn"} onClick={logout}>
           Log out
         </button>
       </form>

src/components/signup.tsx

@@ -10,9 +10,10 @@ export function Signup() {
   const [isLoading, load] = useLoading()
   const signup = () => {
     if (!formRef.current) return
+    const name = formRef.current.username.value
     const email = formRef.current.email.value
     const password = formRef.current.password.value
-    const data = { signupSource: "react-netlify-identity-widget" }
+    const data = { signupSource: "react-netlify-identity-widget", name }
     load(signupUser(email, password, data))
       .then(user => {
         console.log("Success! Signed up", user)
@@ -29,24 +30,26 @@ export function Signup() {
         signup()
       }}
     >
-      <div className="formGroup">
+      <div className="formGroup" key="username">
         <label>
           <VisuallyHidden>Enter your name</VisuallyHidden>
           <input
+            id="username"
             className="formControl"
             type="name"
-            name="name"
+            name="username"
             placeholder="Name"
             autoCapitalize="off"
             required={true}
           />
           <div className="inputFieldIcon inputFieldName" />
         </label>
       </div>
-      <div className="formGroup">
+      <div className="formGroup" key="email">
         <label>
           <VisuallyHidden>Enter your email</VisuallyHidden>
           <input
+            id="email"
             className="formControl"
             type="email"
             name="email"
@@ -57,20 +60,25 @@ export function Signup() {
           <div className="inputFieldIcon inputFieldEmail" />
         </label>
       </div>
-      <div className="formGroup">
+      <div className="formGroup" key="password">
         <label>
           <VisuallyHidden>Enter your password</VisuallyHidden>
-          <input className="formControl" type="password" name="password" placeholder="Password" required={true} />
+          <input
+            id="password"
+            className="formControl"
+            type="password"
+            name="password"
+            placeholder="Password"
+            required={true}
+          />
           <div className="inputFieldIcon inputFieldPassword" />
         </label>
       </div>
-
       <div>
-        {isLoading && "loading..."}
-        <button type="submit" className="btn">
+        <button type="submit" className={isLoading ? "btn saving" : "btn"}>
           Sign Up
         </button>
-        {msg && <pre>{msg}</pre>}
+        {msg && <pre style={{ background: "salmon", padding: 10 }}>{msg}</pre>}
       </div>
     </form>
   )

src/context.tsx

@@ -1,7 +1,9 @@
 import React from "react"
 import { useNetlifyIdentity } from "react-netlify-identity"
 
-export const [useIdentityContext, IdentityContextProvider] = createUsableCtx<ReturnType<typeof useNetlifyIdentity>>()
+export const [useIdentityContext, IdentityContextProvider, IdentityContext] = createUsableCtx<
+  ReturnType<typeof useNetlifyIdentity>
+>()
 
 export const [FormStateContext, FormStateContextProvider] = createMutableCtx<"login" | "signup">("login")
 
@@ -25,5 +27,5 @@ function createUsableCtx<A>() {
     if (!c) throw new Error("useCtx must be inside a Provider with a value")
     return c
   }
-  return [useCtx, ctx.Provider] as const
+  return [useCtx, ctx.Provider, ctx] as const
 }

src/index.tsx

@@ -1,62 +1,61 @@
 import React from "react"
 import {
-  // Dialog,
-  DialogOverlay,
-  DialogContent
+  Dialog
+  // DialogOverlay, DialogContent
 } from "@reach/dialog"
 import VisuallyHidden from "@reach/visually-hidden"
 import { Widget } from "./app"
 import { FormStateContextProvider } from "./context"
 
-import { useNetlifyIdentity } from "react-netlify-identity"
+import { useNetlifyIdentity as _useNetlifyIdentity } from "react-netlify-identity"
+
+/** URL of your Netlify Instance with Identity enabled e.g. https://netlify-gotrue-in-react.netlify.com */
 
 type ModalProps = {
-  /** URL of your Netlify Instance with Identity enabled e.g. https://netlify-gotrue-in-react.netlify.com */
-  netlifyInstance: string
   /** pass a boolean to be true or false */
   showDialog: boolean
   /** modal will call this function to set the state of showDialog to false */
   onCloseDialog: () => void
 }
 
-import { IdentityContextProvider, useIdentityContext as _useIdentityContext } from "./context"
+import {
+  IdentityContextProvider as _IdentityContextProvider,
+  useIdentityContext as _useIdentityContext,
+  IdentityContext as _IdentityContext
+} from "./context"
 
+export const IdentityContextProvider = _IdentityContextProvider
+export const useNetlifyIdentity = _useNetlifyIdentity
+export const IdentityContext = _IdentityContext
 export const useIdentityContext = _useIdentityContext
-export function IdentityModal({ showDialog, onCloseDialog, netlifyInstance }: ModalProps) {
-  if (!netlifyInstance) {
-    // just a safety check in case a JS user tries to skip this
-    if (!validateUrl(netlifyInstance))
-      throw new Error(
-        "invalid netlify instance URL: " +
-          netlifyInstance +
-          ". Please check the docs for proper usage or file an issue."
-      )
-  }
-  const identity = useNetlifyIdentity(netlifyInstance)
+export function IdentityModal({ showDialog, onCloseDialog }: ModalProps) {
   return (
-    <DialogOverlay isOpen={showDialog}>
-      <DialogContent
+    // <DialogOverlay isOpen={showDialog}>
+    <Dialog
+      isOpen={showDialog}
+      onDismiss={() => void console.log("hi") || onCloseDialog()}
+      style={{
+        border: "solid 5px hsla(0, 0%, 0%, 0.5)",
+        borderRadius: "10px",
+        position: "relative",
+        maxWidth: 400
+      }}
+    >
+      {/* <DialogContent
         style={{
           border: "solid 5px hsla(0, 0%, 0%, 0.5)",
           borderRadius: "10px",
           position: "relative",
-          maxWidth: 364
+          maxWidth: 400
         }}
-      >
-        <button className="btn btnClose" onClick={onCloseDialog}>
-          <VisuallyHidden>Close</VisuallyHidden>
-        </button>
-        <FormStateContextProvider>
-          <IdentityContextProvider value={identity}>
-            <Widget onCloseDialog={onCloseDialog} />
-          </IdentityContextProvider>
-        </FormStateContextProvider>
-      </DialogContent>
-    </DialogOverlay>
-  )
-}
-function validateUrl(value: string) {
-  return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i.test(
-    value
+      > */}
+      <button className="btn btnClose" onClick={onCloseDialog}>
+        <VisuallyHidden>Close</VisuallyHidden>
+      </button>
+      <FormStateContextProvider>
+        <Widget onCloseDialog={onCloseDialog} />
+      </FormStateContextProvider>
+      {/* </DialogContent> */}
+    </Dialog>
   )
 }