Skip to content

Commit ef916b1

Browse files
author
sw-yx
committed
docs: docs
1 parent c486d88 commit ef916b1

File tree

9 files changed

+258
-49
lines changed

9 files changed

+258
-49
lines changed

‎CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
77

88
Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
99

10+
## v0.0.2 - 2019-04-22
11+
12+
potato
13+
1014
## v0.0.1 - 2019-04-22
1115

16+
bum
17+
1218
## [v0.0.0-development](https://github.com/sw-yx/react-netlify-identity-widget/compare/v0.0.1...v0.0.0-development) - 2019-04-22
1319

1420
### Commits

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
# TSDX Bootstrap
1+
# React Netlify Identity Widget
22

3-
This project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx).
3+
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.

‎package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
{
22
"name": "react-netlify-identity-widget",
3-
"version": "0.0.0-development",
3+
"version": "0.0.2",
44
"main": "dist/index.js",
55
"umd:main": "dist/reactNetlifyIdentityWidget.umd.production.js",
66
"module": "dist/reactNetlifyIdentityWidget.es.production.js",
77
"typings": "dist/index.d.ts",
88
"files": [
9-
"dist"
9+
"dist",
10+
"styles.css"
1011
],
1112
"license": "MIT",
1213
"scripts": {
@@ -42,7 +43,7 @@
4243
"dependencies": {
4344
"@reach/dialog": "^0.2.3",
4445
"@reach/visually-hidden": "^0.1.3",
45-
"react-netlify-identity": "^0.0.7"
46+
"react-netlify-identity": "^0.0.9"
4647
},
4748
"config": {
4849
"commitizen": {

‎src/app.tsx

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
import React from "react"
2+
import { useNetlifyIdentity } from "react-netlify-identity"
3+
4+
// import Modal from "./modal"
5+
// import SiteURLForm from "./forms/siteurl"
6+
// import LogoutForm from "./forms/logout"
7+
// import UserForm from "./forms/user"
8+
// import Providers from "./forms/providers"
9+
// import Message from "./forms/message"
10+
import { IdentityContext } from "./context"
11+
12+
const pagesWithHeader = { login: true, signup: true }
13+
const pages = {
14+
login: {
15+
login: true,
16+
button: "Log in",
17+
button_saving: "Logging in",
18+
email: true,
19+
password: true,
20+
link: "amnesia",
21+
link_text: "Forgot password?",
22+
providers: true
23+
},
24+
signup: {
25+
signup: true,
26+
button: "Sign up",
27+
button_saving: "Signing Up",
28+
name: true,
29+
email: true,
30+
password: true,
31+
providers: true
32+
},
33+
amnesia: {
34+
title: "Recover password",
35+
button: "Send recovery email",
36+
button_saving: "Sending recovery email",
37+
email: true,
38+
link: "login",
39+
link_text: "Never mind"
40+
},
41+
recovery: {
42+
title: "Recover password",
43+
button: "Update password",
44+
button_saving: "Updating password",
45+
password: true,
46+
link: "login",
47+
link_text: "Never mind"
48+
},
49+
invite: {
50+
title: "Complete your signup",
51+
button: "Sign up",
52+
button_saving: "Signing Up",
53+
password: true,
54+
providers: true
55+
},
56+
user: {
57+
title: "Logged in"
58+
}
59+
}
60+
61+
function App() {
62+
const identity = useNetlifyIdentity("https://identity.netlify.com/") // supply the url of your Netlify site instance. VERY IMPORTANT
63+
64+
return <IdentityContext.Provider value={identity}>div</IdentityContext.Provider>
65+
}
66+
67+
export default App
68+
69+
// renderBody() {
70+
// const { store } = this.props
71+
// const page = pages[store.modal.page] || {}
72+
// const pageLinkHandler = () => this.handlePage(page.link)
73+
74+
// if (!store.gotrue) {
75+
// return <SiteURLForm onSiteURL={this.handleSiteURL} />
76+
// }
77+
// if (!store.settings) {
78+
// return
79+
// }
80+
// if (store.user) {
81+
// return <LogoutForm user={store.user} saving={store.saving} onLogout={this.handleLogout} />
82+
// }
83+
// if (store.modal.page === "signup" && store.settings.disable_signup) {
84+
// return <Message type="signup_disabled" />
85+
// }
86+
87+
// return (
88+
// <div>
89+
// <UserForm
90+
// page={pages[store.modal.page] || {}}
91+
// message={store.message}
92+
// saving={store.saving}
93+
// onSubmit={this.handleUser}
94+
// namePlaceholder={store.namePlaceholder}
95+
// />
96+
// {!store.user && page.link && store.gotrue && (
97+
// <button onclick={pageLinkHandler} className="btnLink forgotPasswordLink">
98+
// {page.link_text}
99+
// </button>
100+
// )}
101+
// <SiteURLForm devMode="true" onSiteURL={this.clearSiteURL} />
102+
// </div>
103+
// )
104+
// }
105+
106+
// renderProviders() {
107+
// const { store } = this.props
108+
109+
// if (!(store.gotrue && store.settings)) {
110+
// return null
111+
// }
112+
// if (store.modal.page === "signup" && store.settings.disable_signup) {
113+
// return null
114+
// }
115+
// const page = pages[store.modal.page] || {}
116+
117+
// if (!page.providers) {
118+
// return null
119+
// }
120+
121+
// const providers = ["Google", "GitHub", "GitLab", "BitBucket", "SAML"].filter(
122+
// p => store.settings.external[p.toLowerCase()]
123+
// )
124+
125+
// return providers.length ? (
126+
// <Providers
127+
// providers={providers}
128+
// labels={store.settings.external_labels || {}}
129+
// onLogin={this.handleExternalLogin}
130+
// />
131+
// ) : null
132+
// }

‎src/context.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import React from "react"
2+
import { useNetlifyIdentity } from "react-netlify-identity"
3+
4+
export const IdentityContext = React.createContext<ReturnType<typeof useNetlifyIdentity> | undefined>(undefined) // not necessary but recommended

‎src/index.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,16 @@ export function Modal({ showDialog, onCloseDialog }: ModalProps) {
2121
borderRadius: "10px"
2222
}}
2323
>
24-
<p>I have a nice border now.</p>
25-
<p>
26-
Note that we could have used the simpler <code>Dialog</code> instead.
27-
</p>
28-
2924
<button className="close-button" onClick={onCloseDialog}>
3025
<VisuallyHidden>Close</VisuallyHidden>
3126
<span aria-hidden>×</span>
3227
</button>
28+
<div>
29+
<p>I have a nice border now.</p>
30+
<p>
31+
Note that we could have used the simpler <code>Dialog</code> instead.
32+
</p>
33+
</div>
3334
</DialogContent>
3435
</DialogOverlay>
3536
)

‎src/login.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from "react"
2+
import { IdentityContext } from "./context"
3+
// import { User } from "react-netlify-identity"
4+
5+
// log in/sign up example
6+
7+
export function Login() {
8+
const ctx = React.useContext(IdentityContext)
9+
if (!ctx) return
10+
const { loginUser, signupUser } = ctx
11+
const formRef = React.useRef<HTMLFormElement>(null)
12+
const [msg, setMsg] = React.useState("")
13+
const signup = () => {
14+
if (!formRef.current) return
15+
const email = formRef.current.email.value
16+
const password = formRef.current.password.value
17+
const data = { signupSource: "react-netlify-identity-widget" }
18+
signupUser(email, password, data)
19+
.then(user => {
20+
console.log("Success! Signed up", user)
21+
navigate("/dashboard")
22+
})
23+
.catch(err => console.error(err) || setMsg("Error: " + err.message))
24+
}
25+
return (
26+
<form
27+
ref={formRef}
28+
onSubmit={e => {
29+
e.preventDefault()
30+
const email = e.target.email.value
31+
const password = e.target.password.value
32+
load(loginUser(email, password, true))
33+
.then(user => {
34+
console.log("Success! Logged in", user)
35+
navigate("/dashboard")
36+
})
37+
.catch(err => console.error(err) || setMsg("Error: " + err.message))
38+
}}
39+
>
40+
<div>
41+
<label>
42+
Email:
43+
<input type="email" name="email" />
44+
</label>
45+
</div>
46+
<div>
47+
<label>
48+
Password:
49+
<input type="password" name="password" />
50+
</label>
51+
</div>
52+
<div>
53+
<input type="submit" value="Log in" />
54+
<button onClick={signup}>Sign Up </button>
55+
{msg && <pre>{msg}</pre>}
56+
</div>
57+
</form>
58+
)
59+
}

‎styles.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* This code is subject to LICENSE in root of this repository */
2+
3+
/* Used to detect in JavaScript if apps have loaded styles or not. */
4+
:root {
5+
--reach-dialog: 1;
6+
}
7+
8+
[data-reach-dialog-overlay] {
9+
background: hsla(0, 0%, 0%, 0.33);
10+
position: fixed;
11+
top: 0;
12+
right: 0;
13+
bottom: 0;
14+
left: 0;
15+
overflow: auto;
16+
}
17+
18+
[data-reach-dialog-content] {
19+
width: 50vw;
20+
margin: 10vh auto;
21+
background: white;
22+
padding: 2rem;
23+
outline: none;
24+
}

0 commit comments

Comments
 (0)