The user should be able to edit/change

[x] Email
[ ] Username
[x] Password (this is a little trickier, so let's wait with it) #167

This will be very similar to signup/signin form. Maybe create a new variant "update".

@olavea start with email.

Instead of doing lots of conditionals like {variant === "signup" || variant === "signin" <etc>. It could be good to do create some helper variables. For instance create const showEmail = variant === "signup" || variant === "update" and then use {showEmail && <TextField }.

Mar 12 '20 19:03 raae

ikke se på disse: Questions 1. Why is the button gray and not red?

<Button disabled={isAuthPending || isPending || !!user} Are any of these three things happening?

Is this code actually updating my profile now? How can I check?

Look into my own test userBase?

Where should I put the code from https://userbase.com/docs/sdk/update-user/ ? I tried to put it in src/components/ProfileUpdateUser.js

I couldn't get it to work, but if I do get it to work,...

where will I put

<ProfileUpdateUser /> ?

Should we have updateProfileActions in src/auth/index?

How do I check if it works? Go into userbase.com/#app=Trial And see if I get my new email I did not get my new email. But I am connected because I got "Already signed in." Which is not what I want...

Does "Already signed in." mean that I am using my new email not to update my profile, but to try to sign in again? I think so. 😸 Well well...

What I did:

TinyTask_1:

src/components/UserForm.js
...
const showEmail = variant === "signup" || variant === "update"
...
{showEmail && (
          <TextField	          
...

TinyTask_2:

src/pages/profile.js
...
import UserForm from "../components/UserForm"
...
        <Box>
          <h1>Edit Profile</h1>
          <UserForm variant="update" />
        </Box>
...

ref: https://github.com/raae/pow-app/commit/8601ace6e0e9cf5142101d6ad369d5c959ee7c93

TinyTask_3:

src/components/UserForm.js
...
{variant === "update" ? (
          <Button
            className={classes.submit}
            type="submit"
            fullWidth
            variant="contained"
            color="primary"
          >
            {updateProfile && "Update profile"}
          </Button>
        ) : (
          <Button
...
          </Button>
        )}
...

ref: https://github.com/raae/pow-app/commit/5f3b39ec5f1716ddbd7d13b34576ea002693891c

TinyTask_4:

src/pages/cycle.js
...
// navigate("/profile?payment=unfinished")
...

ref: https://github.com/raae/pow-app/commit/5f3b39ec5f1716ddbd7d13b34576ea002693891c

TinyTask_5: Put in the POW! logo where OW! is used in the profile.js text

TinyTask_6: Put screenshot 134 in where I have a warning not to change your password

TinyTask_7: separate the functionality of UserForm.js into one component separate the form of UserForm.js into another component.

Mar 13 '20 09:03 olavea

Yo @raae ! Take a look at this comment to commit 1 of 5 https://github.com/raae/pow-app/commit/e351853503e63932ed813b0138d4fba307016358

[x] go to pages/profile.js
[x] put in a Router in pages/profile.js
[x] import { Router } from "@reach/router"
[x] add a <Router inside return
[x] add path="/profile" to <Router
[x] add page.matchPath = "/profile/*" to gatsby-node.js
[x] Make the EditProfile component
[x] don't make a button or anything
[x] look in http://localhost:8000/profile/edit

POW-profile-edit-flow_commit1!?-161

[x] git init
[x] git add .
[x] write a commit message: Without past words
[x] git commit -m "I put in a Router pages/profile.js the-real-commit-1 in Edit profile #116"
[x] git push --set-upstream origin new-edit-ProfilePage-flow-#116 This Comment should end up in the Docz

Mar 25 '20 11:03 olavea

commit-2-of-5 I put in a const EditProfile in pages/profile.js, but the ToolBar is the-real-commit-2

Mar 26 '20 10:03 olavea

You want the Fab button to the right of the Avatar on the Profile component on the profile page right? See screenshot here.

POW-profile-edit-flow_commit2_Fab_skal_opp_2-164

This fab button takes the Customer to the usepow.app/profile/edit page

Mar 29 '20 06:03 olavea

const showEmail = variant === "signup" || variant === "update" and

{showEmail && (
          <TextField
...
            id="email"

I will commit this later, but now I can see the "email" <TextField inside localhost:8000/profile/edit page

POW-profile-edit-flow_commit2_email_2-165

Mar 29 '20 06:03 olavea

components/UserForm.js This is some of the code that updates the Customers profile inside Userbase


import { useAuthState, useAuthActions } from "../auth"

const UserForm = ({
...
  onSubmitFulfilled,
...
}) => {

const { signIn, signUp, updateUser } = useAuthActions()

const handleSubmit = async (event) => {
    event.preventDefault()
...
    } else if (variant === "update") {
      result = await updateUser(state, { redirect: !onSubmitFulfilled })
}

Mar 29 '20 07:03 olavea

This is some of the code that sends the Customers back to profile from profile/edit

pages/profile.js

import { navigate } from "gatsby"

const EditProfile = ({}) => { ....

const handleDone = () => { navigate(/profile/) }

Mar 29 '20 07:03 olavea

Yo @raae take a look at the comments inside the commits.

Mar 29 '20 09:03 olavea

Yo @raae take a look at the comments inside the commits:

0daf828

cdd5e15

Mar 29 '20 09:03 olavea

I have added comments inside those two commits.

Summarized, I would like the edit button in the card header see example codesandbox: https://codesandbox.io/s/pow-user-profile-edit-x7ocr

It seems you are on the right path with onDone. This will be easier for me to comment on if you push whatever you are happy with to a Pull Request and I can run it on my machine and give som feedback on the whole.

This Comment should end up in the Docz

Apr 02 '20 18:04 raae

Commit 4 on #116 Edit button is now in the card header.

Question 1 What do you want me to do with the const useStyles = ... see comment inside commit

Question 2 What do you want me to do with the newsletter thing? Now the customer gets the newsletter thing: const userEmail = user.email || userProfileProtected.stripeEmail

so what do you want here?

Apr 03 '20 05:04 olavea

Commit 5 onDone is now working on handleSubmit sending ... eb38d7d

Question 5.1 Is it in the code above inside habdleSubmit you want less "else ifs" and more for example "const update = ..." ?

see single comment inside commit 5 eb38d7d

Apr 03 '20 05:04 olavea

Commit 6 onDone is now working on handleSubmit sending ... eb38d7d

Question 6.1 Is label="Remember me" also "gone" from signup and sign in now?

Apr 03 '20 06:04 olavea

Commit 7 a new ProfileEditPage.js component 9eccc2c

Question 7.1 Did you want me to make a new ProfileEditPage.js component ?

Question 7.2 Do you want me to hide some stuff? I tried to hide for example <Profile /> and

Help make POW! better

from the customer when she is doing usepow.app/profile/edit

Could't make it work, but I can try more tomorrow.

Apr 03 '20 07:04 olavea

Answer 4, 5, 6

I would like really like a Pull Request to review for these, so I can see where you are as a whole. Get your code to work (at least almost) locally and push it to a branch. Then I can give specific feedback.

The branch you have created named "new-edit-ProfilePage-flow-#116" is branched from a very old master, so do not continue on it. Either continue on "practice-profile-edit-flow-#122" that already has Pull Request open or create a new branch from the master branch after remembering to do "git pull" so you are sure the master you are branching from is up to date.

Answer 7.1 and 7.2

To be able to be more specific follow the above request.

When the user selects the edit button they should be taken to route "/profile/edit" and on that route, there should only be the form to edit username, email, and password.

So yes you should create a ProfileEditPage component and a ProfileIndexPage component in the same way as it's done for the cycle edit flow.

Apr 04 '20 14:04 raae

The path "/edit" does not work in localhost @raae

next step tomorrow is using UserForm.js in pages/profile.js

Apr 06 '20 08:04 olavea

I would like to have it in its own branch creating its own Pull Request. But correct work!

Apr 07 '20 05:04 raae

I restarted on localhost and then Gatsby built my new path, just like he built my new pages in the old days 😸 👍

POW-profile-edit-flow_172

Apr 09 '20 05:04 olavea

ESLint said: warning A form label must be associated with a control jsx-a11y/label-has-associated-control

I did a web-search and found: https://github.com/airbnb/javascript/issues/1885

and I Nested the <input inside the <label in addition to

 <label htmlFor="emailInput">
        <TextField
                id="emailInput"

here is the relevant commit af7508c

These Comments should end up in the Docz:

Apr 20 '20 05:04 olavea

createReset(event)

229aeb0

Apr 20 '20 05:04 olavea

GLEE 0aa9189

G L E Evade that customer safely back to /profile

Apr 21 '20 05:04 olavea

I think you can start this one up again @olavea, or do some testing to see if the bug #134 is still valid.

Feb 23 '21 05:02 raae

Edit profile

Help make POW! better