Graceful not found customer identifier handling

app/components/Landing.module.css

@@ -24,4 +24,11 @@
     border: none;
     border-radius: 0.5rem;
     cursor: pointer;
+}
+
+.notFoundMessage {
+    color: red;
+    font-weight: bold;
+    text-align: center;
+    margin-top: 1rem;
 }

app/components/Landing.tsx

@@ -21,12 +21,21 @@ export default function Landing() {
     }
 
     return (
-        customerData.identifier === 'Tuntematon' ? (
-            <form action={submitIdentifier} className={styles.identifierForm}>
-                <label htmlFor="identifier" className={styles.identifierLabel}>Tunnus</label>
-                <input name="identifier" type="password" className={styles.identifierInput} />
-                <button type="submit" className={styles.submitButton} >Kirjaudu</button>
-            </form>) : (
+        customerData.identifier === 'Tuntematon' || customerData.identifier === 'Ei löydy' ? (
+            <>
+                <form action={submitIdentifier} className={styles.identifierForm}>
+                    <label htmlFor="identifier" className={styles.identifierLabel}>Tunnus</label>
+                    <input name="identifier" type="password" className={styles.identifierInput} />
+                    <button type="submit" className={styles.submitButton} >Kirjaudu</button>
+                </form>
+
+                {customerData.identifier === 'Ei löydy' && (
+                    <div className={styles.notFoundMessage}>
+                        Tunnusta ei löydy. Ole hyvä ja tarkista tunnus.
+                    </div>
+                )}
+            </>
+        ) : (
             <Calendar />
         )
     );