Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

upcoming: [M3-7476] - Add Verification Banner for Child Accounts #10085

Merged
merged 16 commits into from
Jan 30, 2024
Merged

upcoming: [M3-7476] - Add Verification Banner for Child Accounts #10085

merged 16 commits into from
Jan 30, 2024

Conversation

jaalah-akamai
Copy link
Contributor

@jaalah-akamai jaalah-akamai commented Jan 19, 2024 •
edited

Description 📝

This adds a verification banner to be displayed for child users lacking security questions and a phone number, So that we can prompt them to enhance the security of their accounts. The banner will display on all pages for child users.

Changes 🔄

  • The "Add Verification Details" button should direct users to the /profile/auth route, emphasizing the relevant input fields.
  • AuthenticationSettings.tsx contains logic to focus either the security questions or phone number depending on what's left to verify.

Preview 📷

Screenshot 2024-01-19 at 12 25 12 PM

How to test 🧪

Prerequisites

  • An account without a phone number or security questions
  • MSW can be used for security questions

Reproduction steps

  • Ensure user_type is 'child' in serverHandlers.ts
  • Ensure verified_phone_number is null in profile.ts
  • Using MSW, you should see the verification banner appear

Verification steps

  • Click/Press verification button and you should be brought to the first security question /profile/auth
  • Add some security questions
  • Next, to test phone number add 3 security question responses.
  • Click/Press verification button and you should be brought to the phone number text field /profile/auth

As an Author I have considered 🤔

Check all that apply

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@jaalah-akamai jaalah-akamai self-assigned this Jan 19, 2024
@jaalah-akamai
Copy link
Contributor Author

jaalah-akamai commented Jan 20, 2024 •
edited

Waiting on #10083

Edit: ✅

jaalah-akamai
jaalah-akamai commented Jan 23, 2024
View reviewed changes
packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx
}
}, 100);
}
}, [phoneNumberRef, securityQuestionRef, location.state]);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Focus and scroll to a specific input field based on the values provided in the location state.

@jaalah-akamai jaalah-akamai marked this pull request as ready for review January 23, 2024 18:17
@jaalah-akamai jaalah-akamai requested a review from a team as a code owner January 23, 2024 18:17
@jaalah-akamai jaalah-akamai requested review from bnussman-akamai and abailly-akamai and removed request for a team January 23, 2024 18:17
@jaalah-akamai @bnussman-akamai
Update packages/manager/src/features/GlobalNotifications/GlobalNotifi…
6647a57 
…cations.tsx

Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
@github-actions GitHub Actions
Copy link

github-actions bot commented Jan 24, 2024 •
edited

Coverage Report: ✅
Base Coverage: 81.21%
Current Coverage: 81.21%

@jaalah-akamai
Copy link
Contributor Author

@abailly-akamai @bnussman-akamai all set.

abailly-akamai
abailly-akamai approved these changes Jan 29, 2024
View reviewed changes
Copy link
Contributor

@abailly-akamai abailly-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested with MSW - Behavior and UI look great, saw the banner and was scrolled down to the proper field upon clicking the banner button ✅

I left non-blocking comment and question to potentially improve the code

packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx
currentTargetRef.scrollIntoView();
currentTargetRef.setAttribute('data-scrolled', 'true');
}
}, 100);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we use a MutationObserver here rather than a setTimeout? I think it's better to avoid those for this kind of case

packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx
@@ -68,7 +111,7 @@ export const AuthenticationSettings = () => {
Learn more about security options.
</Link>
</StyledMainCopy>
<PhoneVerification />
<PhoneVerification phoneNumberRef={phoneNumberRef} />
<Divider spacingBottom={16} spacingTop={22} />
<Typography variant="h3">SMS Messaging</Typography>
<SMSMessaging />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to invalidate useQueryClient or useSecurityQuestions at any point after submitting the security questions?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useMutateSecurityQuestions should handle the cache updates already

bnussman-akamai
bnussman-akamai approved these changes Jan 29, 2024
View reviewed changes
packages/manager/src/features/Profile/AuthenticationSettings/AuthenticationSettings.tsx
@@ -68,7 +111,7 @@ export const AuthenticationSettings = () => {
Learn more about security options.
</Link>
</StyledMainCopy>
<PhoneVerification />
<PhoneVerification phoneNumberRef={phoneNumberRef} />
<Divider spacingBottom={16} spacingTop={22} />
<Typography variant="h3">SMS Messaging</Typography>
<SMSMessaging />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useMutateSecurityQuestions should handle the cache updates already

@mjac0bs mjac0bs added Approved Multiple approvals and ready to merge! and removed Ready for Review labels Jan 29, 2024
@jaalah-akamai jaalah-akamai merged commit 9a50d8f into linode:develop Jan 30, 2024
5 of 7 checks passed
@cpathipa cpathipa mentioned this pull request Feb 1, 2024
Merged
12 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bnussman-akamai bnussman-akamai bnussman-akamai approved these changes

@abailly-akamai abailly-akamai abailly-akamai approved these changes

Assignees

@jaalah-akamai jaalah-akamai

Labels
Approved Multiple approvals and ready to merge! Parent / Child Account
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@jaalah-akamai @bnussman-akamai @abailly-akamai @mjac0bs @jaalah