463 enhancement your signup link user experience optimization

[TheChunkyPumpkinhead]

This PR:

Resolves (#463)

1. I fixed the card issue. It is now one card and all items are centered. 2. I am having trouble with the copy-and-paste API.

Future Steps/PRs Needed to Finish This Work (optional):

I need formal help with API

Issues needing discussion/feedback (optional):

1. API for copy-and-paste

[xscottxbrownx]

I'd like to add one more thing...

lets not just have margin on the top, but also the bottom. Currently, the footer rests directly up against the rendered parent component.

src > pages > Signup.jsx - maybe for the <Box> switch the marginTop: 3 to my: 3 so there's the same margin on bottom too. (but honestly the <Box> should be a <Stack>, then we could get rid of the display: flex and the flexDirection: column too)

Ah, now that I think about it more and inspect it with Chrome dev tools... Seems like we may not even need the box/stack. May be able to put those stylings on the Paper component itself. Seems to me it's just an extra div for no real reason.

[TheChunkyPumpkinhead]

Okay! i need to stop. I did what you asked: The only issue is the Typography(I think) needs to display correctly. How do I fix this?

[leekahung]

How do I fix this?

Hm...think we could do something like splitting up the one line of text with the statement and webId into two lines of text, one line for the statement, one line for the webId.

To make it nicer, think we could also turn the 2nd line of text with the webId into a potential link (in case the person that's registering is interested in who they're registering/working with with for the new Solid Pod). If the lines get too wide for the screen, think we could employ ellipsis or the like.

[xscottxbrownx]

Okay! i need to stop. I did what you asked:

Actually you did the exact opposite - you put the Paper styling on the Stack, but that's okay it has same effect.

[xscottxbrownx]

Alright, I'm going to back up a lot because I'm a little lost here on this PR.

This PR hasn't addressed number 1 or 3 from the Issue #463

---

Number 1 I'm not exactly sure what they are looking for, but it is showing the MUI copycontent rounded icon: import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';

so I assume they wanted that icon to be next to the 'YOUR SIGNUP LINK', and maybe the onClick of the icon copies the signup link. This way the user that wants to share that link with somebody doesn't have to click on it to open it, then manually copy it from address bar?

---

Number 3 Still using the window dialog box, instead of an MUI modal to keep with rest of app styling.

---

With the above said, if you'd like to keep this PR only addressing number 2 from the issue - that would be fine, but we need to:

• edit the title and description of this PR
• edit the title and description of issue #463
• create new issues for the rest that are not being addressed in this PR

---

---

---

Now, back to the 1 thing from the issue this PR does address:

I agree with Ka Hung about splitting this text to two lines, and personally I would make the second line a little different (bold maybe 🤷🏻‍♂️) I also think his approach to minimize the text using an ellipsis (if it's too long) is a decent idea, but then it kind of loses all helpfulness and reason to be displayed at all in my opinion.

This whole display problem becomes even more compounded when we consider mobile devices - which this fails to address or keep in mind. The form has a set width that doesn't fit for mobile whatsoever.

• So that's issue 1 that I see here. This doesn't work for mobile at all, and is probably the basis to discuss/decide on what text to have here. Maybe it doesn't render here, but rather on completion of registration?

---

• Issue 2 is that there's a good amount of cleanup for styling that could still be done. Especially the PodRegistrationForm. I'm not sure what happened there, but...
  • It's using <Card> for seemingly no good reason, which is why it had card styling that you needed to get rid of with variant='none'. The only purpose I see for the <Card> is to use it's heading, this can be better accomplished with a <Typography variant='h5' component='h4'>Set Up A New Pod</Typography>
  • The <Typography> at the top of this component 'Register For PASS' has display: flex, justifyContent: center, alignItems: center which could all be replaced with a single textAlign: center, BUT looking at the card styling below also being textAlign: center, could just make the react fragment wrapper around this whole thing a <Stack textAlign='center'> and solve all of it. No longer need cardStyle or all the flex and stuff on the 'Register for PASS' element.
  • All the inputs and labels: I'm not sure what's going on here. The two <FilledInput>'s & <InputLabels>'s have props with aria-labels, but are already labeled by the label using the htmlFor and the id of the input. And the top email input is a <TextField> which handles all of these things. All 3 should just be <TextField>'s used properly. See here: https://mui.com/material-ui/react-text-field/

---

• Issue 3 is the functionality of the PodregistrationForm
  • The handleSubmit function run when submitting form has zero error handling. If user types in anything to the inputs and hits the button, they get no feedback what is wrong, why it isn't working, if it's working, etc.
  • The email input needs a type='email' for validation. Right now user can type in any text in any format.

---

• Issue 4 the Signup:
  • The <Stack> doesn't need display: flex, flexDirection: column, that is the default for <Stack>.
  • With the other things I mentioned above, you wouldn't need the justifyContent or alignItems on there either.
  • From the new styling on the <Container> it is now defeating the purpose of my: 3 on the <Stack> & that is already being defeated by the margin: auto. So, 1 - margin: auto probably should be mx:auto as I think you are using it to center this item horizontally in the container. 2 - choose to either style the container padding or the stack marginY. They are currently competing each other. Nothing on container and my: 12 on stack will be about the same visually. So, that large block of styling can be cut down to 5 lines:

Keep in mind this still doesn't address the mobile view issues.

[leekahung]

Oh, to be able to pick up the potentially long webId, think we could of course use the Clipboard API (or copy and paste functionality) as mentioned in the main issue. That'll be nice I think, since we could reuse that in other places.

[xscottxbrownx]

@TheChunkyPumpkinhead are you still interested in this issue?

[TheChunkyPumpkinhead]

Yeah

On Wed, Dec 13, 2023, 5:49 PM Scott Brown @.***> wrote:

@TheChunkyPumpkinhead https://github.com/TheChunkyPumpkinhead are you still interested in this issue?

— Reply to this email directly, view it on GitHub https://github.com/codeforpdx/PASS/pull/547#issuecomment-1854978671, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQJ4XTOU2MOS25JDREXB5ALYJJLJXAVCNFSM6AAAAAA76R4QZOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNJUHE3TQNRXGE . You are receiving this because you were mentioned.Message ID: @.***>

[andycwilliams]

@TheChunkyPumpkinhead Hey, just checking in to see what the current status is.

[andycwilliams]

Closing this PR. Will open new one pending reassessment of issue.