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

@@ -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')}

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')}

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 && (

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 && (