Change WINS Form to Only Offer to Use GitHub Images

[nadiaspn0503]

Overview

We need to change the WINS form to only offer to use their GitHub image. We will not be able to display people's LinkedIn profile pictures so we need to revise the form to reflect that.

Action Items

• In the file /pages/wins/wins-share-form.html we will remove all areas for displaying the LinkedIn profile picture
  • We will not remove the LinkedIn profile url only the LinkedIn profile picture
  • Make no changes to the GitHub profile url and GitHub photo permissions
• Remove the section of the form that asks for LinkedIn photo permission from lines 49 through 68.

        <div class="form-group" id="linkedinPhotoPermission">
          <p>Can we use the photo in your linkedin profile picture?</p>
          <input
            type="radio"
            name="linkedinPhotoPermission"
            id="linkedInYes"
            value="yes"
            disabled
          />
          <label for="linkedInYes">Yes</label>
  
          <input
            type="radio"
            name="linkedinPhotoPermission"
            id="linkedInNo"
            value="no"
            disabled
          />
          <label for="linkedInNo">No</label>
        </div>
  

• Remove linkedin_permission: "", from line 203 on the formObject to look like this

      //Create formObject with the nessecary keys as specified by the google sheet and store it in local storage
      const formObj = {
        time: "",
        email: "",
        name: "",
        linkedin_url: "",
        github_url: "",
        github_permission: "",
        team: "",
        role: "",
        specific_role: "",
        join_date: "",
        win: "",
        overview: "",
      };
      localStorage.setItem("form", JSON.stringify(formObj));
  

• Remove form.linkedin_permission = this.linkedinPhotoPermission.value || ""; from line 370 on the 2nd Form to look like this

      //2nd Form -> On next hide 2nd form show 3rd form
      document
        .querySelector("#professionalLinkForm")
        .addEventListener("submit", function (e) {
          e.preventDefault();
  
          const form = JSON.parse(localStorage.getItem("form"));
          form.linkedin_url = this.linkedinurl.value || "";
          form.github_url = this.githuburl.value || "";
          form.github_permission = this.githubPhotoPermission.value || "";
          localStorage.setItem("form", JSON.stringify(form));
  
          this.style.display = "none";
          document.querySelector("#teamsRolesForm").style.display = "block";
        });
  

• Remove the entire //linked in photo permission section from lines 439 through 462

      //linked in photo permission
      document
        .querySelector("#linkedinurl")
        .addEventListener("input", function (e) {
          //If it is a valid linkedin url
          const str = e.target.value;
          if (str.match(/https:\/\/(www\.)?linkedin\.com\/.+/g).length >0) {
            //display the linkedIn photo permission question
            document.querySelector("#linkedinPhotoPermission").style.display =
              "block";
  
            //default photo usage to yes
            document.querySelector("#linkedInYes").checked = true;
  
            //enable the linnkedin photo permissions input
            document.querySelector("#linkedInYes").disabled = false;
            document.querySelector("#linkedInNo").disabled = false;
  
            //enable the next button
            document.querySelector(
              "#professionalLinkNextButton"
            ).disabled = false;
          }
        });
  

• Review the code to ensure there are no other mentions of the LinkedIn profile picture
• Use Docker to test changes locally, in both desktop and mobile views
• Save/commit the changes
• Create a pull request

Resources/Instructions

• 1.01 Wins page: https://www.hackforla.org/wins
• 1.02 Wins share form code: https://github.com/hackforla/website/blob/gh-pages/pages/wins/wins-share-form.html
• 1.05 The LinkedIn API Terms of Service disallows us from displaying people's LinkedIn profile pictures.

[github-actions]

Hi @nadiaspn0503.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:

• Complexity, Role, Size

NOTE: Please ignore this comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels