From 0d8dc555e0b569ada0b75aa7115b47f74564cb29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Maro=C5=A1i?= <marvusm.mmi@gmail.com>
Date: Mon, 6 Apr 2020 10:31:25 +0200
Subject: [PATCH] Added profile update.
---
package.json | 2 ++
src/react-auth0-spa.js | 1 +
src/views/Profile.js | 46 ++++++++++++++++++++++++++++++++++--------
src/views/profile.css | 4 ++++
yarn.lock | 27 +++++++++++++++++++++++++
5 files changed, 72 insertions(+), 8 deletions(-)
create mode 100644 src/views/profile.css
diff --git a/package.json b/package.json
index e27c920..4e76d96 100644
--- a/package.json
+++ b/package.json
@@ -16,9 +16,11 @@
"@material-ui/lab": "^4.0.0-alpha.46",
"axios": "^0.19.0",
"clsx": "^1.1.0",
+ "final-form": "^4.19.1",
"lodash": "^4.17.15",
"react": "^16.8.6",
"react-dom": "^16.8.6",
+ "react-final-form": "^6.4.0",
"react-router-dom": "^5.0.0",
"react-scripts": "3.0.1"
},
diff --git a/src/react-auth0-spa.js b/src/react-auth0-spa.js
index e6c8786..8c58821 100644
--- a/src/react-auth0-spa.js
+++ b/src/react-auth0-spa.js
@@ -102,6 +102,7 @@ export const Auth0Provider = ({ children, onRedirectCallback = DEFAULT_REDIRECT_
loginWithPopup,
handleRedirectCallback,
updateProfile,
+ setUser,
getIdTokenClaims: (...p) => auth0Client.getIdTokenClaims(...p),
loginWithRedirect: (...p) => auth0Client.loginWithRedirect(...p),
getTokenSilently: (...p) => auth0Client.getTokenSilently(...p),
diff --git a/src/views/Profile.js b/src/views/Profile.js
index 7075da8..c6e8a73 100644
--- a/src/views/Profile.js
+++ b/src/views/Profile.js
@@ -1,24 +1,54 @@
import React from "react";
-
+import { Form, Field } from "react-final-form";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import "./profile.css";
import Loading from "../components/Loading";
import { useAuth0 } from "../react-auth0-spa";
-const Profile = () => {
- const { loading, user, updateProfile } = useAuth0();
+const FormTextField = ({ input, meta, ...props }) => (
+ <Grid item xs={12}>
+ <TextField {...input} {...props} fullWidth />
+ </Grid>
+);
- const handleNameUpdate = () => updateProfile({ user_metadata: { name: "Testing2" } });
+const Profile = () => {
+ const { loading, user, updateProfile, setUser } = useAuth0();
+ const initialValues = {
+ name: user.name,
+ nickname: user.nickname,
+ picture: user.picture
+ };
if (loading || !user) {
return <Loading />;
}
+ const handleSubmit = (values) =>
+ updateProfile(values).then(({ name, nickname, picture }) =>
+ setUser({
+ name,
+ nickname,
+ picture
+ })
+ );
+
return (
<div>
- <button onClick={handleNameUpdate}>Click</button>
- <img src={user.picture} alt="Profile" />
+ <img className="profile-image" src={user.picture} alt="Profile" />
<div>
- <h2>{user.name}</h2>
- <p className="lead text-muted">{user.email}</p>
+ <Grid container>
+ <Form initialValues={initialValues} onSubmit={handleSubmit}>
+ {({ handleSubmit }) => (
+ <form onSubmit={handleSubmit} style={{ width: "100%" }}>
+ <Field name="name" component={FormTextField} label="Name" type="text" />
+ <Field name="nickname" component={FormTextField} label="Nickname" type="text" />
+ <Field name="picture" component={FormTextField} label="Picture" type="text" />
+ <button type="submit">Submit</button>
+ </form>
+ )}
+ </Form>
+ </Grid>
</div>
<div>
<pre>{JSON.stringify(user, null, 2)}</pre>
diff --git a/src/views/profile.css b/src/views/profile.css
new file mode 100644
index 0000000..1d9e5ce
--- /dev/null
+++ b/src/views/profile.css
@@ -0,0 +1,4 @@
+.profile-image {
+ max-width: 200px;
+ height: auto;
+}
diff --git a/yarn.lock b/yarn.lock
index 2520460..17164db 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -959,6 +959,13 @@
dependencies:
regenerator-runtime "^0.13.4"
+"@babel/runtime@^7.8.3", "@babel/runtime@^7.9.2":
+ version "7.9.2"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
+ integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
+ dependencies:
+ regenerator-runtime "^0.13.4"
+
"@babel/template@^7.4.0", "@babel/template@^7.7.4":
version "7.7.4"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.7.4.tgz#428a7d9eecffe27deac0a98e23bf8e3675d2a77b"
@@ -4195,6 +4202,13 @@ fill-range@^4.0.0:
repeat-string "^1.6.1"
to-regex-range "^2.1.0"
+final-form@^4.19.1:
+ version "4.19.1"
+ resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.19.1.tgz#1aa1a3bf67f7399b54ed6185d56f9a8d74cfda5a"
+ integrity sha512-C4RldRCUs8YZod91ydtrsT+TOeG3fwU4ip9oBDXhvbWdQ6iXl4cIrTAQkqpWijbnI3XFVA0akV7YTjSFJMJ2uw==
+ dependencies:
+ "@babel/runtime" "^7.8.3"
+
finalhandler@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
@@ -8232,6 +8246,14 @@ react-error-overlay@^6.0.3:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.4.tgz#0d165d6d27488e660bc08e57bdabaad741366f7a"
integrity sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA==
+react-final-form@^6.4.0:
+ version "6.4.0"
+ resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-6.4.0.tgz#7f9064c10a8bee6a02cd3e9b8aff06fa07f9c908"
+ integrity sha512-M7J7f0pnoj0o8sBq3iG6jsWJEh08pNUyl2D4wBC9SJvCNkGdol2UdyjMiEFYD3rz9LIFzQqFSG0kbRBCadqzhA==
+ dependencies:
+ "@babel/runtime" "^7.9.2"
+ ts-essentials "^6.0.3"
+
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
@@ -9628,6 +9650,11 @@ tr46@^1.0.1:
dependencies:
punycode "^2.1.0"
+ts-essentials@^6.0.3:
+ version "6.0.4"
+ resolved "https://registry.yarnpkg.com/ts-essentials/-/ts-essentials-6.0.4.tgz#d36055bf0a7620b1338da6aafd2268787e208aab"
+ integrity sha512-ZtU9zgSnn8DcAxDZY1DJF8rnxsen8M0IVkO7dVB5fTEOVs7o/0RA4V6i99PIg99bpX81Sgb0FCLjQqD5Ufz3rQ==
+
ts-pnp@1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.2.tgz#be8e4bfce5d00f0f58e0666a82260c34a57af552"
--
GitLab