-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
5e3fb31
commit 42ce55c
Showing
6 changed files
with
162 additions
and
136 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,10 @@ | ||
| /** | ||
| * Implement Gatsby's Browser APIs in this file. | ||
| * | ||
| * See: https://www.gatsbyjs.org/docs/browser-apis/ | ||
| */ | ||
| const React = require("react") | ||
| const netlifyIdentity = require("netlify-identity-widget") | ||
|
|
||
| // You can delete this file if you're not using it | ||
| window.netlifyIdentity = netlifyIdentity | ||
| // You must run this once before trying to interact with the widget | ||
| netlifyIdentity.init() | ||
|
|
||
| exports.wrapRootElement = ({ element }) => { | ||
| return <>{element}</> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,92 +1,109 @@ | ||
| import React from "react" | ||
| import React, { useState } from "react" | ||
| import { Link } from "gatsby" | ||
| const Dashboard = () => ( | ||
| <div className="container mx-auto max-w-md"> | ||
| <nav className="mb-4"> | ||
| <Link className="p-1 border-b border-purple-700" to="user/dashboard"> | ||
| Settings | ||
| </Link> | ||
| <Link className="p-1 ml-2" to="user/billing"> | ||
| Billing | ||
| </Link> | ||
| </nav> | ||
| <form className="w-full max-w-lg shadow rounded-lg p-8 bg-white"> | ||
| <div className="flex flex-wrap -mx-3 mb-6"> | ||
| <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0"> | ||
| <label | ||
| className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" | ||
| for="grid-first-name" | ||
| > | ||
| First Name | ||
| </label> | ||
| <input | ||
| className="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Jane" | ||
| /> | ||
| <p className="text-red-500 text-xs italic"> | ||
| Please fill out this field. | ||
| </p> | ||
| import { getCurrentUser, updateUserInfo } from "../services/auth" | ||
| const Dashboard = () => { | ||
| const [userMetadata, setUserMetaData] = useState( | ||
| getCurrentUser().user_metadata | ||
| ) | ||
| return ( | ||
| <div className="container mx-auto max-w-md"> | ||
| <nav className="mb-4"> | ||
| <Link className="p-1 border-b border-purple-700" to="user/dashboard"> | ||
| Settings | ||
| </Link> | ||
| <Link className="p-1 ml-2" to="user/billing"> | ||
| Billing | ||
| </Link> | ||
| </nav> | ||
| <form | ||
| className="w-full max-w-lg shadow rounded-lg p-8 bg-white" | ||
| onSubmit={async e => { | ||
| e.preventDefault() | ||
| await updateUserInfo(userMetadata) | ||
| }} | ||
| > | ||
| <div className="flex flex-wrap -mx-3 mb-6"> | ||
| <div className="w-full md:w-1/2 px-3 mb-6 md:mb-0"> | ||
| <label | ||
| className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" | ||
| for="grid-first-name" | ||
| > | ||
| First Name | ||
| </label> | ||
| <input | ||
| className="appearance-none block w-full bg-gray-200 text-gray-700 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" | ||
| id="grid-first-name" | ||
| type="text" | ||
| placeholder="Jane" | ||
| onChange={e => | ||
| setUserMetaData({ | ||
| ...userMetadata, | ||
| full_name: e.target.value, | ||
| }) | ||
| } | ||
| defaultValue={userMetadata.full_name} | ||
| /> | ||
| <p className="text-red-500 text-xs italic"></p> | ||
| </div> | ||
| <div className="w-full md:w-1/2 px-3"> | ||
| <label | ||
| className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" | ||
| for="grid-last-name" | ||
| > | ||
| Last Name | ||
| </label> | ||
| <input | ||
| className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" | ||
| id="grid-last-name" | ||
| type="text" | ||
| placeholder="Doe" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className="w-full md:w-1/2 px-3"> | ||
| <label | ||
| className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" | ||
| for="grid-last-name" | ||
| > | ||
| Last Name | ||
| </label> | ||
| <input | ||
| className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" | ||
| id="grid-last-name" | ||
| type="text" | ||
| placeholder="Doe" | ||
| /> | ||
| <div className="flex flex-wrap -mx-3 mb-6"> | ||
| <div className="w-full px-3"> | ||
| <label | ||
| className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" | ||
| for="grid-password" | ||
| > | ||
| Password | ||
| </label> | ||
| <input | ||
| className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" | ||
| id="grid-password" | ||
| type="password" | ||
| placeholder="******************" | ||
| /> | ||
| <p className="text-gray-600 text-xs italic"> | ||
| Make it as long and as crazy as you'd like | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-wrap -mx-3 mb-6"> | ||
| <div className="w-full px-3"> | ||
| <label | ||
| className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" | ||
| for="grid-password" | ||
| > | ||
| Password | ||
| </label> | ||
| <input | ||
| className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" | ||
| id="grid-password" | ||
| type="password" | ||
| placeholder="******************" | ||
| /> | ||
| <p className="text-gray-600 text-xs italic"> | ||
| Make it as long and as crazy as you'd like | ||
| </p> | ||
| <div className="flex flex-wrap -mx-3 mb-6"> | ||
| <div className="w-full px-3"> | ||
| <label | ||
| className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" | ||
| for="grid-password" | ||
| > | ||
| Password Confirmation | ||
| </label> | ||
| <input | ||
| className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" | ||
| id="grid-password" | ||
| type="password" | ||
| placeholder="******************" | ||
| /> | ||
| <p className="text-gray-600 text-xs italic"> | ||
| Make it the same as the previous one | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="flex flex-wrap -mx-3 mb-6"> | ||
| <div className="w-full px-3"> | ||
| <label | ||
| className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" | ||
| for="grid-password" | ||
| > | ||
| Password Confirmation | ||
| </label> | ||
| <input | ||
| className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" | ||
| id="grid-password" | ||
| type="password" | ||
| placeholder="******************" | ||
| /> | ||
| <p className="text-gray-600 text-xs italic"> | ||
| Make it the same as the previous one | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <button className="btn" type="submit"> | ||
| Save | ||
| </button> | ||
| </form> | ||
| </div> | ||
| ) | ||
| <button className="btn" type="submit"> | ||
| Save | ||
| </button> | ||
| </form> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Dashboard |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,53 @@ | ||
| import netlifyIdentity from "netlify-identity-widget" | ||
| export const isBrowser = () => typeof window !== "undefined" | ||
| export const getUser = () => | ||
| isBrowser() && window.localStorage.getItem("gatsbyUser") | ||
| ? JSON.parse(window.localStorage.getItem("gatsbyUser")) | ||
| : {} | ||
| const setUser = user => | ||
| window.localStorage.setItem("gatsbyUser", JSON.stringify(user)) | ||
| export const handleLogin = ({ username, password }) => { | ||
| if (username === `john` && password === `pass`) { | ||
| return setUser({ | ||
| username: `john`, | ||
| name: `Johnny`, | ||
| email: `[email protected]`, | ||
|
|
||
| export const handleLogin = navigate => { | ||
| netlifyAuth.authenticate(() => { | ||
| setUser(netlifyIdentity.currentUser()) | ||
| navigate("/user/dashboard") | ||
| }) | ||
| } | ||
|
|
||
| const netlifyAuth = { | ||
| isAuthenticated: false, | ||
| user: null, | ||
| authenticate(callback) { | ||
| this.isAuthenticated = true | ||
| netlifyIdentity.open() | ||
| netlifyIdentity.on("login", user => { | ||
| this.user = user | ||
| callback(user) | ||
| }) | ||
| }, | ||
| signout(callback) { | ||
| this.isAuthenticated = false | ||
| netlifyIdentity.logout() | ||
| netlifyIdentity.on("logout", () => { | ||
| this.user = null | ||
| callback() | ||
| }) | ||
| } | ||
| return false | ||
| }, | ||
| } | ||
|
|
||
| export const isLoggedIn = () => { | ||
| const user = getUser() | ||
| return !!user.username | ||
| return netlifyAuth.isAuthenticated | ||
| } | ||
| export const logout = callback => { | ||
| setUser({}) | ||
| callback() | ||
| netlifyAuth.signout(callback) | ||
| } | ||
|
|
||
| export const getCurrentUser = () => { | ||
| return netlifyIdentity.currentUser() | ||
| } | ||
|
|
||
| export const updateUserInfo = async user_metadata => { | ||
| console.log(user_metadata) | ||
| await netlifyIdentity.gotrue.currentUser().update({ data: user_metadata }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters