From 72d90dec82776d9af4c022a7e9394b9ddc05960c Mon Sep 17 00:00:00 2001
From: lunarkid <4476442+dedywahyudi@users.noreply.github.com>
Date: Fri, 19 Aug 2022 17:36:11 +0700
Subject: [PATCH] fix: missing asterisk

---
 .../Settings/ExperienceAndSkills/WorkExperience/index.jsx   | 2 +-
 .../ExperienceAndSkills/WorkSkills/Languages/index.jsx      | 2 +-
 src/shared/components/Settings/FormField/index.jsx          | 5 ++++-
 src/shared/components/Settings/FormField/styles.scss        | 5 +++++
 .../components/Settings/ProfileSettings/Hobbies/index.jsx   | 2 +-
 .../components/Settings/ProfileSettings/Learning/index.jsx  | 2 +-
 .../Settings/ProfileSettings/PersonalDetails/index.jsx      | 6 +++---
 src/shared/components/Settings/Tools/Devices/index.jsx      | 2 +-
 .../components/Settings/Tools/ServiceProviders/index.jsx    | 4 ++--
 src/shared/components/Settings/Tools/Software/index.jsx     | 4 ++--
 .../components/Settings/Tools/Subscriptions/index.jsx       | 2 +-
 11 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
index fd009111f8..58e19d8c3f 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkExperience/index.jsx
@@ -451,7 +451,7 @@ export default class Work extends ConsentComponent {
                 </div>
                 <div styleName="form-body">
                   <form styleName="workplace-form" noValidate autoComplete="off">
-                    <FormField label="Company *" style={{ flex: '0 0 100%' }}>
+                    <FormField label="Company" style={{ flex: '0 0 100%' }} required>
                       <FormInputText
                         id="company"
                         name="company"
diff --git a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
index fe9251bd52..4721e00de2 100644
--- a/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
+++ b/src/shared/components/Settings/ExperienceAndSkills/WorkSkills/Languages/index.jsx
@@ -376,7 +376,7 @@ export default class Languages extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="language-form" noValidate autoComplete="off">
-                  <FormField label="Language *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Language" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="language"
                       options={dropdowns.language}
diff --git a/src/shared/components/Settings/FormField/index.jsx b/src/shared/components/Settings/FormField/index.jsx
index d81430842f..a32768dc6b 100644
--- a/src/shared/components/Settings/FormField/index.jsx
+++ b/src/shared/components/Settings/FormField/index.jsx
@@ -9,12 +9,13 @@ import cn from 'classnames';
 import './styles.scss';
 
 const FormField = ({
-  children, label = '', disabled, style,
+  children, label = '', disabled, style, required,
 }) => (
   <div styleName="form-field-wrapper" style={style}>
     <div styleName="form-field">
       <div styleName={cn('label', disabled ? 'disabled' : null)} role="presentation">
         {label}
+        { required && <span styleName="required">*</span> }
       </div>
       {children}
     </div>
@@ -26,6 +27,7 @@ FormField.defaultProps = {
   children: null,
   disabled: false,
   style: {},
+  required: false,
 };
 
 FormField.propTypes = {
@@ -33,6 +35,7 @@ FormField.propTypes = {
   children: PT.node,
   disabled: PT.bool,
   style: PT.object,
+  required: PT.bool,
 };
 
 export default FormField;
diff --git a/src/shared/components/Settings/FormField/styles.scss b/src/shared/components/Settings/FormField/styles.scss
index fd70027cfb..699071b122 100644
--- a/src/shared/components/Settings/FormField/styles.scss
+++ b/src/shared/components/Settings/FormField/styles.scss
@@ -29,6 +29,11 @@
       &.disabled {
         color: $color-black-60;
       }
+
+      .required {
+        color: $member-red;
+        margin-left: 5px;
+      }
     }
   }
 }
diff --git a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
index 20fcdf93ac..59f283a31d 100644
--- a/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Hobbies/index.jsx
@@ -32,7 +32,7 @@ const Hobbies = (props) => {
       <div styleName="form-container-default">
         <form name="device-form" noValidate autoComplete="off">
           {/* Hobby */}
-          <FormField label="Hobby">
+          <FormField label="Hobby" required>
             <FormInputText
               id="hobby"
               name="hobby"
diff --git a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
index b7cdd3d7b7..db9064c0a8 100644
--- a/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/Learning/index.jsx
@@ -38,7 +38,7 @@ const Learning = (props) => {
       <div styleName="form-container-default">
         <form name="device-form" noValidate autoComplete="off">
           {/* Name of College or University */}
-          <FormField label="Name of College or University">
+          <FormField label="Name of College or University" required>
             <FormInputText
               id="schoolCollegeName"
               name="schoolCollegeName"
diff --git a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
index fc833fe413..88c7b0d6f7 100644
--- a/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
+++ b/src/shared/components/Settings/ProfileSettings/PersonalDetails/index.jsx
@@ -34,7 +34,7 @@ const PersonalDetails = (props) => {
         <form name="basic-info-form" noValidate autoComplete="off">
 
           {/* First Name */}
-          <FormField label="First Name">
+          <FormField label="First Name" required>
             <FormInputText
               disabled={!canModifyTrait}
               id="firstName"
@@ -57,7 +57,7 @@ const PersonalDetails = (props) => {
           </FormField>
 
           {/* Last Name */}
-          <FormField label="Last Name">
+          <FormField label="Last Name" required>
             <FormInputText
               disabled={!canModifyTrait}
               id="lastName"
@@ -192,7 +192,7 @@ const PersonalDetails = (props) => {
           </FormField>
 
           {/* Country */}
-          <FormField label="Country">
+          <FormField label="Country" required>
             <Select
               name="country"
               options={countries}
diff --git a/src/shared/components/Settings/Tools/Devices/index.jsx b/src/shared/components/Settings/Tools/Devices/index.jsx
index ff81cd191b..a4194f1303 100644
--- a/src/shared/components/Settings/Tools/Devices/index.jsx
+++ b/src/shared/components/Settings/Tools/Devices/index.jsx
@@ -497,7 +497,7 @@ export default class Devices extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="device-form" noValidate autoComplete="off">
-                  <FormField label="Device Type *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Device Type" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="Device Type"
                       options={types}
diff --git a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
index 7f94c564b0..f75225272d 100644
--- a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
+++ b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx
@@ -336,7 +336,7 @@ export default class ServiceProviders extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="service-provider-form" noValidate autoComplete="off">
-                  <FormField label="Service Provider Type *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Service Provider Type" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="serviceProviderType"
                       options={dropdowns.serviceProviderType}
@@ -355,7 +355,7 @@ export default class ServiceProviders extends ConsentComponent {
                     }
                   </FormField>
 
-                  <FormField label="Service Provider Name *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Service Provider Name" style={{ flex: '0 0 100%' }} required>
                     <FormInputText
                       disabled={!canModifyTrait}
                       id="name"
diff --git a/src/shared/components/Settings/Tools/Software/index.jsx b/src/shared/components/Settings/Tools/Software/index.jsx
index d34d36a14d..9251db202d 100644
--- a/src/shared/components/Settings/Tools/Software/index.jsx
+++ b/src/shared/components/Settings/Tools/Software/index.jsx
@@ -342,7 +342,7 @@ export default class Software extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="software-form" noValidate autoComplete="off">
-                  <FormField label="Software Type *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Software Type" style={{ flex: '0 0 100%' }} required>
                     <FormInputSelect
                       name="softwareType"
                       options={dropdowns.type}
@@ -361,7 +361,7 @@ export default class Software extends ConsentComponent {
                     }
                   </FormField>
 
-                  <FormField label="Software Name *" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Software Name" style={{ flex: '0 0 100%' }} required>
                     <FormInputText
                       disabled={!canModifyTrait}
                       id="name"
diff --git a/src/shared/components/Settings/Tools/Subscriptions/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
index b947faeab6..eb815cb425 100644
--- a/src/shared/components/Settings/Tools/Subscriptions/index.jsx
+++ b/src/shared/components/Settings/Tools/Subscriptions/index.jsx
@@ -321,7 +321,7 @@ export default class Subscription extends ConsentComponent {
               </div>
               <div styleName="form-body">
                 <form styleName="subscription-form" noValidate autoComplete="off">
-                  <FormField label="Subscription Name" style={{ flex: '0 0 100%' }}>
+                  <FormField label="Subscription Name" style={{ flex: '0 0 100%' }} required>
                     <FormInputText
                       disabled={!canModifyTrait}
                       id="name"