Freecodecamp: Add links to projects required to claim certificate above the certificate itself

[scissorsneedfoodtoo]

Currently when you visit a person's certificate you only see the certificate that was issued.

We should add some text and links to the projects that were required to claim the certificate above the certificate itself. Each link should go to the solution that was submitted rather than the project page.

For example:

In preparation for completing this certification, _(name)_ completed these five projects:

* Project 1
* Project 2
* Project 3
* Project 4
* Project 5

If you think there has been academic dishonesty, report it here.

However, links to the JS Algorithms and Data Structures projects will need to be handled differently -- the solutions are stored in the DB, but won't exist anywhere online.

Also, "report it here" should be the same link/method used for the current "Report This User" link on the profile page.

Cc @QuincyLarson for feedback on the text.

[raisedadead]

I am assigning this to @ahmadabdolsaheb to cut the turn around time and feedback loop.

[ahmadabdolsaheb]

I am removing my assignment in case another contributor is interested in making a pull request.

[Sky020]

I am interested in taking this up 😃

[Sky020]

@scissorsneedfoodtoo Kris, I will get a PR, once #39735 is through, also depending on if I want to leverage anything from #39695 . So, for now, clarification on styling would be very useful:

Is there anything (words) I should be deleting from the current certification? Or, just adding the OP suggestion?
Is it ok for this to go over 100vh? Or, should there be a separate view for mobile?
For the JS solutions, should the link to open up a modal like it does on the settings page?
For the backend projects, should the link be a dropdown with links to the solution/github, as it is on the settings page? (This does not sound ideal for the campers who screenshot/pdf their certs)

[raisedadead]

Probably justify the text on the certs like we have on the landing page? Other than that it looks great to me.

[ahmadabdolsaheb]

@raisedadead, here is an idea to make the project list cover all the corner cases that @Sky020 addressed above:

• The project list could be either above of below the certificate itself to avoid crowing the exiting elements.

• The list would consist of text items followed by a list to a solution. That way we could list both of links (solution, github) links in the same line.

• The JS solution could open in a modal as the settings page.

Here is an example:

Submitted projects for this certification:

• project number one: solution, source
• project number one: solution, source
• project number one: solution, source
• project number one: solution, source
• project number one: solution, source

let me know what you think?

[scissorsneedfoodtoo]

Hey @Sky020, thanks for your patience.

Awesome, it seems like you made some great progress here already! Also, thank you for bringing up all those corner cases. Those are all very good points to consider.

Like @ahmadabdolsaheb mentioned, it might be good just to have the text and links for each project above or below the certificate itself to avoid many of the issues you pointed out. Though personally I think it looks pretty good on the certificate itself.

This is something we can bring up with @QuincyLarson for additional input.

[QuincyLarson]

@scissorsneedfoodtoo Thanks for bringing this to my attention.

@Sky020 This is a good way to show people's work. Rather than list these projects on the certification itself, we should list them below the certification with the following message:

As part of this certification, {name} built the following projects and got all automated test suites to pass:

• Project 1
• Project 2
• Project 3
• Project 4
• Project 5

If you suspect that any of these projects violate the academic honesty policy, please report this to our team.

[Sky020]

@QuincyLarson and @ahmadabdolsaheb I would still like clarification about the way the projects/solutions/code will be linked to:

This was the easiest way to test (essentially, copy-pasta of the settings page)

Should the project names, just be links to:
1) Modal of code, if JS Data Structures section
2) Live App, otherwise.

Or, should it be as Ahmad has above:
1) project name: solution, source...

_I will fix the spacing between the social links and the projects, and report URL later._

[Sky020]

Also, how do we want the report to be handled? I have it routing to /user/username/report-user

This has the issue of expecting the reporter to be logged-in. Is this ok?

[nhcarrigan]

This has the issue of expecting the reporter to be logged-in. Is this ok?

I think this is a very good idea, to be honest. Allowing unauthenticated reports inhibits the ability to track spam, and prevents a report from being traced back to a source - while spam/abuse might not be likely to happen, I think it's still good to take steps to mitigate it.

[RandellDawson]

This has the issue of expecting the reporter to be logged-in. Is this ok?

At first this seemed logical to me, to create some accountability to those reporting the issue. Otherwise, we could have a bunch of random "false alarms" where someone is just spamming someone's account.

However, if someone who has never been a member of freeCodeCamp discovers someone has copied their content (i.e. from their own app or website), they should not have to signup for an account just to report a user's plagarism.

[nhcarrigan]

However, if someone who has never been a member of freeCodeCamp discovers someone has copied their content (i.e. from their own app or website), they should not have to signup for an account just to report a user's plagarism.

I think this is a valid concern - but rather than allowing unauthenticated/anonymous reports, could we add an alternate flow that allows for a direct email? Or something that does not require an fCC account but still provides some form of identification?

[ahmadabdolsaheb]

I would prefer the following format for its simplicity:
project name: solution link, source link.