updated drop downs

components/homepage/login.js

@@ -113,6 +113,7 @@ let Login = (props) => {
     const { locale } = router;
 
     const [showSpinnerState, setShowSpinnerState] = useState(false);
+    const [validLoginID, setValidLoginID] = useState(null);
 
     let spinnerState = () => {
         showSpinnerState == true
@@ -124,14 +125,17 @@ let Login = (props) => {
         spinnerState();
 
         getLogin(values.loginUserID, values.loginUserPassword).then((data) => {
-            setLoggedInUserId(data.value[0].contactid);
-
-            spinnerState();
-            router.replace({
-                pathname: router.locale == "cy" ? "/fymhorth" : "/myportal",
-                query: { q: data.value[0].contactid },
-                shallow: true,
-            });
+            data.value.length != 0
+                ? (setValidLoginID(true),
+                  setLoggedInUserId(data.value[0].contactid),
+                  spinnerState(),
+                  router.replace({
+                      pathname:
+                          router.locale == "cy" ? "/fymhorth" : "/myportal",
+                      query: { q: data.value[0].contactid },
+                      shallow: true,
+                  }))
+                : (setShowSpinnerState(false), setValidLoginID(false));
         });
     };
 
@@ -142,7 +146,11 @@ let Login = (props) => {
                     <h3 className="heading-small card-heading">
                         {t("home:login-card-title")}
                     </h3>
-
+                    {validLoginID == false && (
+                        <div className="govuk-error-message govuk-form-group--error">
+                            Incorrect username or password
+                        </div>
+                    )}
                     <Field
                         // validate={[
                         //     required(