From 3be316e9dd667ef39b9faa3332996d514460094d Mon Sep 17 00:00:00 2001
From: Michael Manganiello <mike@fmanganiello.com.ar>
Date: Sun, 9 Jan 2022 14:31:58 -0300
Subject: [PATCH] Allow links for awards and certifications

Add option to set a URL for each award or certification. This is useful,
for example, when sharing verified certificates as proofs provided by
issuers.

Fixes #575
---
 src/modals/sections/AwardModal.js                      | 9 +++++++++
 src/modals/sections/CertificateModal.js                | 9 +++++++++
 src/templates/blocks/Awards/AwardsA.js                 | 8 +++++++-
 src/templates/blocks/Certifications/CertificationsA.js | 8 +++++++-
 4 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/modals/sections/AwardModal.js b/src/modals/sections/AwardModal.js
index be5a4a4e5..7460c74b5 100644
--- a/src/modals/sections/AwardModal.js
+++ b/src/modals/sections/AwardModal.js
@@ -11,6 +11,7 @@ const initialValues = {
   title: '',
   awarder: '',
   date: '',
+  url: '',
   summary: '',
 };
 
@@ -21,6 +22,7 @@ const AwardModal = () => {
     title: Yup.string().required(t('shared.forms.validation.required')),
     awarder: Yup.string().required(t('shared.forms.validation.required')),
     date: Yup.date().max(new Date()),
+    url: Yup.string().url(t('shared.forms.validation.url')),
     summary: Yup.string(),
   });
 
@@ -56,6 +58,13 @@ const AwardModal = () => {
               {...getFieldProps(formik, schema, 'date')}
             />
 
+            <Input
+              label={t('shared.forms.website')}
+              className="col-span-2"
+              placeholder="https://"
+              {...getFieldProps(formik, schema, 'url')}
+            />
+
             <Input
               type="textarea"
               label={t('shared.forms.summary')}
diff --git a/src/modals/sections/CertificateModal.js b/src/modals/sections/CertificateModal.js
index 361338190..9a5113602 100644
--- a/src/modals/sections/CertificateModal.js
+++ b/src/modals/sections/CertificateModal.js
@@ -11,6 +11,7 @@ const initialValues = {
   title: '',
   issuer: '',
   date: '',
+  url: '',
   summary: '',
 };
 
@@ -21,6 +22,7 @@ const CertificateModal = () => {
     title: Yup.string().required(t('shared.forms.validation.required')),
     issuer: Yup.string().required(t('shared.forms.validation.required')),
     date: Yup.date().max(new Date()),
+    url: Yup.string().url(t('shared.forms.validation.url')),
     summary: Yup.string(),
   });
 
@@ -56,6 +58,13 @@ const CertificateModal = () => {
               {...getFieldProps(formik, schema, 'date')}
             />
 
+            <Input
+              label={t('shared.forms.website')}
+              className="col-span-2"
+              placeholder="https://"
+              {...getFieldProps(formik, schema, 'url')}
+            />
+
             <Input
               type="textarea"
               label={t('shared.forms.summary')}
diff --git a/src/templates/blocks/Awards/AwardsA.js b/src/templates/blocks/Awards/AwardsA.js
index acd97a673..9184a0240 100644
--- a/src/templates/blocks/Awards/AwardsA.js
+++ b/src/templates/blocks/Awards/AwardsA.js
@@ -7,7 +7,13 @@ const AwardItem = ({ item, language }) => (
   <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold text-sm">{item.title}</h6>
+        {item.url ? (
+          <a href={item.url} target="_blank" rel="noopener noreferrer">
+            <h6 className="font-semibold text-sm">{item.title}</h6>
+          </a>
+        ) : (
+          <h6 className="font-semibold text-sm">{item.title}</h6>
+        )}
         <span className="text-xs">{item.awarder}</span>
       </div>
       {item.date && (
diff --git a/src/templates/blocks/Certifications/CertificationsA.js b/src/templates/blocks/Certifications/CertificationsA.js
index c830906df..d8ac359dc 100644
--- a/src/templates/blocks/Certifications/CertificationsA.js
+++ b/src/templates/blocks/Certifications/CertificationsA.js
@@ -7,7 +7,13 @@ const CertificationItem = ({ item, language }) => (
   <div>
     <div className="flex justify-between items-center">
       <div className="flex flex-col text-left mr-2">
-        <h6 className="font-semibold text-sm">{item.title}</h6>
+        {item.url ? (
+          <a href={item.url} target="_blank" rel="noopener noreferrer">
+            <h6 className="font-semibold text-sm">{item.title}</h6>
+          </a>
+        ) : (
+          <h6 className="font-semibold text-sm">{item.title}</h6>
+        )}
         <span className="text-xs">{item.issuer}</span>
       </div>
       {item.date && (