[newcomers-form] fix: accept Google Drive links in profile picture validation #7041
Conversation
|
🚀 Preview for commit 0bc92e9 at: https://68f13121a6457b84033b3eb4--layer5.netlify.app |
Fireentity
left a comment
Fireentity
left a comment
There was a problem hiding this comment.
Hi, thanks for this contribution! The logic is looking good.
We can simplify the validation by using a single regular expression. This makes the intent clearer and is easier to maintain than multiple includes() checks.
const validGoogleDrivePattern = /drive\.google\.com\/file\/d\/.+\/(view|uc\?)/;
if (value.includes('drive.google.com') && !validGoogleDrivePattern.test(value)) {
error = "Please provide a direct Google Drive file link.";
} else {
// ...
}I also noticed the DCO check is failing. This happens when commits are not signed off. https://docs.meshery.io/project/contributing
|
This is a very important to work on as I faced this issue through while filling the form. Between, the DCO checks is failing. |
|
Thankyou for the feedback. I'll simplify the validation and also fix the DCO check issue. |
|
@hudazaan thanks for your contribution , you can check https://github.com/layer5io/layer5/pull/7041/checks?check_run_id=53083532468 to fix the DCO error |
|
🚀 Preview for commit a4dcc18 at: https://68f3b03153e83cd59ef816d1--layer5.netlify.app |
|
DCO Failed |
|
Thank you for your contribution! |
|
Thank you for your contribution! |
|
🚀 Preview for commit 6a3ff67 at: https://6910b1998306858f758ebaee--layer5.netlify.app |
|
@hudazaan, you will need to add your sign off on your commit. |
|
@hudazaan
|
|
🚀 Preview for commit 61cd707 at: https://692d3f50fe3a2e97233a6df2--layer5.netlify.app |
|
🚀 Preview for commit aba1488 at: https://692d46de73dabd993bafbeba--layer5.netlify.app |
|
🚀 Preview for commit c25cc46 at: https://692d8639d8a8d80213e2035c--layer5.netlify.app |
There was a problem hiding this comment.
Pull request overview
This PR fixes validation logic for profile picture URLs to accept Google Drive links in addition to direct image file URLs. Previously, users could not use Google Drive links as profile pictures due to the extension-based validation that rejected URLs without standard image file extensions.
Key Changes:
- Added special handling for Google Drive URLs in the picture validation function
- Implemented validation to ensure Google Drive links are properly formatted file links
- Updated the user-facing help text to clarify acceptable Google Drive link formats
| const isViewLink = value.includes("/view"); | ||
| const isDownloadLink = value.includes("/uc?"); | ||
|
|
||
| if (!isFileLink || (!isViewLink && !isDownloadLink)) { |
There was a problem hiding this comment.
The validation logic is incorrect. It requires BOTH /file/d/ AND either /view OR /uc? to be present, but Google Drive file links typically have the format drive.google.com/file/d/{ID}/view where /view and /uc? don't appear together. The condition !isFileLink || (!isViewLink && !isDownloadLink) will reject valid links like drive.google.com/file/d/abc123/view. Change to if (!isFileLink || !(isViewLink || isDownloadLink)).
| if (!isFileLink || (!isViewLink && !isDownloadLink)) { | |
| if (!isFileLink || !(isViewLink || isDownloadLink)) { |
| <Field type="url" className="text-field" id="picture" name="picture" validate={validatePictureUrl}/> | ||
| {errors.picture && touched.picture && <div style={{ margin: "0px", color: "red", fontSize: "16px" }}>{errors.picture}</div>} | ||
| <p className="para label">Please provide a link to your profile photo. Profile photos are used for <Link to="/community/members">community member profiles</Link> of longstanding community members.</p> | ||
| <p className="para label">Please provide a link to your profile photo. Profile photos are used for <Link to="/community/members">community member profiles</Link> of longstanding community members. For Google Drive links, please ensure you're using direct image links that end with .jpg, .png, etc.</p> |
There was a problem hiding this comment.
The guidance text contradicts the code logic. It states Google Drive links should 'end with .jpg, .png, etc.', but the validation code accepts Google Drive links without checking file extensions. This misleading instruction may confuse users. Either remove the extension requirement from the text or update the code to validate Google Drive link extensions.
| <p className="para label">Please provide a link to your profile photo. Profile photos are used for <Link to="/community/members">community member profiles</Link> of longstanding community members. For Google Drive links, please ensure you're using direct image links that end with .jpg, .png, etc.</p> | |
| <p className="para label">Please provide a link to your profile photo. Profile photos are used for <Link to="/community/members">community member profiles</Link> of longstanding community members. For Google Drive links, please ensure you're using a direct image link that is accessible to anyone with the link.</p> |
8 participants
Description
This PR fixes #6986
Fixed the profile picture validation to accept Google Drive links. Previously, when users tried to paste Google Drive links as profile pictures, the form showed the error "URL must point to an image file (jpg, jpeg, png, svg, webp or gif)".
Notes for Reviewers
Signed commits