apps/web: add invalid credentials error

apps/web/components/Form.jsx

@@ -3,14 +3,20 @@ import Button from 'elements/Button';
 import styles from './Form.module.scss';
 import { H3 } from 'elements/H';
 import { title } from 'config/constants';
+import { useRouter } from 'next/router';
+import Error from 'elements/Error';
 
 export default function Form() {
+  const router = useRouter();
+  const { invalid } = router.query;
+  const error = invalid ? <Error>Неверный логин или пароль</Error> : null;
+
   return (
     <form className={styles.form}>
       <H3>{title}</H3>
       <Input name="login" type="text" placeholder="Логин" required autoComplete="on" />
       <Input name="password" type="password" placeholder="Пароль" required autoComplete="on" />
-      {/* {invalid ? <p>Неверный логин или пароль</p> : null} */}
+      {error}
       <Button>Войти</Button>
     </form>
   );

apps/web/elements/Error.jsx

@@ -0,0 +1,5 @@
+import styles from './Error.module.css';
+
+export default function Error({ children }) {
+  return <span className={styles.error}>{children}</span>;
+}

apps/web/elements/Error.module.css

@@ -0,0 +1,7 @@
+.error {
+  font-family: Montserrat;
+  font-size: smaller;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: red;
+}