Skip to content

Commit 84ccf7f

Browse files
author
sw-yx
committed
commit to go enable the providers
1 parent 9d46abb commit 84ccf7f

File tree

6 files changed

+75
-138
lines changed

6 files changed

+75
-138
lines changed

‎.size-snapshot.json

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
{
22
"/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.development.js": {
3-
"bundled": 13882,
4-
"minified": 7089,
5-
"gzipped": 1718
3+
"bundled": 11762,
4+
"minified": 7115,
5+
"gzipped": 1727
66
},
77
"/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.cjs.production.js": {
8-
"bundled": 13882,
9-
"minified": 7089,
10-
"gzipped": 1718
8+
"bundled": 11762,
9+
"minified": 7115,
10+
"gzipped": 1727
1111
},
1212
"/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.development.js": {
13-
"bundled": 14963,
14-
"minified": 6280,
15-
"gzipped": 1690
13+
"bundled": 12691,
14+
"minified": 6306,
15+
"gzipped": 1696
1616
},
1717
"/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.umd.production.js": {
18-
"bundled": 14963,
19-
"minified": 6280,
20-
"gzipped": 1690
18+
"bundled": 12691,
19+
"minified": 6306,
20+
"gzipped": 1696
2121
},
2222
"/Users/swyx/Netlify/react-netlify-identity-widget/dist/reactNetlifyIdentityWidget.es.production.js": {
23-
"bundled": 13647,
24-
"minified": 6900,
25-
"gzipped": 1662,
23+
"bundled": 11527,
24+
"minified": 6926,
25+
"gzipped": 1671,
2626
"treeshaked": {
2727
"rollup": {
2828
"code": 524,

‎README.md

+48
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,54 @@
22

33
This is a React port of https://github.com/netlify/netlify-identity-widget (48kb) taking the lightweight functionality https://github.com/sw-yx/react-netlify-identity (4kb) and adding back the nicer UI with a focus on accessibility (with @reach UI) and bundle size.
44

5+
# usage
6+
7+
we require some peer dependencies:
8+
9+
```bash
10+
yarn add react-netlify-identity-widget @reach/dialog @reach/tabs @reach/visually-hidden
11+
```
12+
13+
and the styles are optional but provided. here's how to use `IdentityModal, useNetlifyIdentity, IdentityContextProvider`:
14+
15+
```tsx
16+
import React from "react"
17+
import "./App.css"
18+
import { IdentityModal, useNetlifyIdentity, IdentityContextProvider } from "react-netlify-identity-widget"
19+
import "react-netlify-identity-widget/styles.css"
20+
21+
function App() {
22+
const [dialog, setDialog] = React.useState(false)
23+
const identity = useNetlifyIdentity("https://netlify-gotrue-in-react.netlify.com")
24+
const name =
25+
(identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.name) || "NoName"
26+
return (
27+
<IdentityContextProvider value={identity}>
28+
<div className="App">
29+
{identity && identity.isLoggedIn ? (
30+
<header className="App-header">
31+
<h1> hello {name}!</h1>
32+
<button className="btn" onClick={() => setDialog(true)}>
33+
LOG OUT
34+
</button>
35+
<IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
36+
</header>
37+
) : (
38+
<header className="App-header">
39+
<h1> hello! try logging in! </h1>
40+
<button className="btn" onClick={() => setDialog(true)}>
41+
LOG IN
42+
</button>
43+
<IdentityModal showDialog={dialog} onCloseDialog={() => setDialog(false)} />
44+
</header>
45+
)}
46+
</div>
47+
</IdentityContextProvider>
48+
)
49+
}
50+
export default App
51+
```
52+
553
# local dev
654

755
```bash

‎example/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@
1010
"react": "^16.8.6",
1111
"react-dom": "^16.8.6",
1212
"react-scripts": "3.0.0",
13-
"typescript": "3.4.5"
13+
"typescript": "3.4.5",
14+
"@reach/dialog": "^0.2.3",
15+
"@reach/tabs": "^0.1.3",
16+
"@reach/visually-hidden": "^0.1.3"
1417
},
1518
"scripts": {
1619
"start": "react-scripts start",

‎example/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import "react-netlify-identity-widget/styles.css"
55

66
function App() {
77
const [dialog, setDialog] = React.useState(false)
8-
const identity = useNetlifyIdentity("https://netlify-gotrue-in-react.netlify.com")
8+
const identity = useNetlifyIdentity("https://react-netlify-identity-widget.netlify.com")
99
const name =
1010
(identity && identity.user && identity.user.user_metadata && identity.user.user_metadata.name) || "NoName"
1111
return (

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@
3535
},
3636
"peerDependencies": {
3737
"react": "^15.0.0 || ^16.0.0",
38-
"react-dom": "^15.0.0 || ^16.0.0"
39-
},
40-
"dependencies": {
38+
"react-dom": "^15.0.0 || ^16.0.0",
4139
"@reach/dialog": "^0.2.3",
4240
"@reach/tabs": "^0.1.3",
43-
"@reach/visually-hidden": "^0.1.3",
41+
"@reach/visually-hidden": "^0.1.3"
42+
},
43+
"dependencies": {
4444
"react-netlify-identity": "^0.0.12"
4545
},
4646
"config": {

‎src/app.tsx

+3-117
Original file line numberDiff line numberDiff line change
@@ -4,57 +4,8 @@ import { Logout } from "./components/logout"
44
import { Signup } from "./components/signup"
55
import { useIdentityContext } from "./context"
66
import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs"
7-
// const pagesWithHeader = { login: true, signup: true }
8-
// const pages = {
9-
// login: {
10-
// login: true,
11-
// button: "Log in",
12-
// button_saving: "Logging in",
13-
// email: true,
14-
// password: true,
15-
// link: "amnesia",
16-
// link_text: "Forgot password?",
17-
// providers: true
18-
// },
19-
// signup: {
20-
// signup: true,
21-
// button: "Sign up",
22-
// button_saving: "Signing Up",
23-
// name: true,
24-
// email: true,
25-
// password: true,
26-
// providers: true
27-
// },
28-
// amnesia: {
29-
// title: "Recover password",
30-
// button: "Send recovery email",
31-
// button_saving: "Sending recovery email",
32-
// email: true,
33-
// link: "login",
34-
// link_text: "Never mind"
35-
// },
36-
// recovery: {
37-
// title: "Recover password",
38-
// button: "Update password",
39-
// button_saving: "Updating password",
40-
// password: true,
41-
// link: "login",
42-
// link_text: "Never mind"
43-
// },
44-
// invite: {
45-
// title: "Complete your signup",
46-
// button: "Sign up",
47-
// button_saving: "Signing Up",
48-
// password: true,
49-
// providers: true
50-
// },
51-
// user: {
52-
// title: "Logged in"
53-
// }
54-
// }
557

568
function LoggedOutScreen() {
57-
// return
589
return (
5910
<div>
6011
<Tabs defaultIndex={0}>
@@ -73,42 +24,13 @@ function LoggedOutScreen() {
7324
</TabPanels>
7425
</Tabs>
7526

76-
<div className="providersGroup">
27+
{/* <div className="providersGroup">
7728
<hr className="hr" />
7829
<button className="providerGoogle btn btnProvider">Continue with Google</button>
7930
<button className="providerGitHub btn btnProvider">Continue with GitHub</button>
8031
<button className="providerGitLab btn btnProvider">Continue with GitLab</button>
8132
<button className="providerBitBucket btn btnProvider">Continue with BitBucket</button>
82-
</div>
83-
84-
{/* <form className="form ">
85-
<div className="formGroup">
86-
<label>
87-
<span className="visuallyHidden">Enter your email</span>
88-
<input
89-
className="formControl"
90-
type="email"
91-
name="email"
92-
placeholder="Email"
93-
autocapitalize="off"
94-
required=""
95-
/>
96-
<div className="inputFieldIcon inputFieldEmail" />
97-
</label>
98-
</div>
99-
<div className="formGroup">
100-
<label>
101-
<span className="visuallyHidden">Enter your password</span>
102-
<input className="formControl" type="password" name="password" placeholder="Password" required="" />
103-
<div className="inputFieldIcon inputFieldPassword" />
104-
</label>
105-
</div>
106-
<button type="submit" className="btn">
107-
Log in
108-
</button>
109-
</form>
110-
<button className="btnLink forgotPasswordLink">Forgot password?</button>
111-
*/}
33+
</div> */}
11234
</div>
11335
)
11436
}
@@ -118,6 +40,7 @@ function LoggedInScreen() {
11840

11941
function Gate({ }: { onCloseDialog: Function }) {
12042
const identity = useIdentityContext()
43+
console.log({ identity })
12144
const isLoggedIn = Boolean(identity && identity.user)
12245
return isLoggedIn ? <LoggedInScreen /> : <LoggedOutScreen />
12346
}
@@ -126,43 +49,6 @@ export function Widget({ onCloseDialog }: { onCloseDialog: Function }) {
12649
return <Gate onCloseDialog={onCloseDialog} />
12750
}
12851

129-
// renderBody() {
130-
// const { store } = this.props
131-
// const page = pages[store.modal.page] || {}
132-
// const pageLinkHandler = () => this.handlePage(page.link)
133-
134-
// if (!store.gotrue) {
135-
// return <SiteURLForm onSiteURL={this.handleSiteURL} />
136-
// }
137-
// if (!store.settings) {
138-
// return
139-
// }
140-
// if (store.user) {
141-
// return <LogoutForm user={store.user} saving={store.saving} onLogout={this.handleLogout} />
142-
// }
143-
// if (store.modal.page === "signup" && store.settings.disable_signup) {
144-
// return <Message type="signup_disabled" />
145-
// }
146-
147-
// return (
148-
// <div>
149-
// <UserForm
150-
// page={pages[store.modal.page] || {}}
151-
// message={store.message}
152-
// saving={store.saving}
153-
// onSubmit={this.handleUser}
154-
// namePlaceholder={store.namePlaceholder}
155-
// />
156-
// {!store.user && page.link && store.gotrue && (
157-
// <button onclick={pageLinkHandler} className="btnLink forgotPasswordLink">
158-
// {page.link_text}
159-
// </button>
160-
// )}
161-
// <SiteURLForm devMode="true" onSiteURL={this.clearSiteURL} />
162-
// </div>
163-
// )
164-
// }
165-
16652
// renderProviders() {
16753
// const { store } = this.props
16854

0 commit comments

Comments
 (0)