ui: 🎨 new borgwarehouse logo and favicon

Components/UI/Layout/Header/Header.module.css

@@ -27,5 +27,5 @@
   font-weight: bold;
   color: #6d4aff;
   text-shadow: #6d4aff 0px 0px 18px;
-  margin-left: 20px;
+  margin-left: 70px;
 }

Components/UI/Layout/Header/Header.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import classes from './Header.module.css';
 import Nav from './Nav/Nav';
 
@@ -5,7 +6,16 @@ function Header() {
   return (
     <header className={classes.Header}>
       <div className={[classes.flex, 'container'].join(' ')}>
-        <div className={classes.logo}>BorgWarehouse</div>
+        <div className={classes.logo}>
+          <Image
+            src='/borgwarehouse-logo-violet.svg'
+            alt='BorgWarehouse'
+            width={225}
+            height={40}
+            className={classes.logoImage}
+            priority
+          />
+        </div>
 
         <nav>
           <Nav />

pages/login.tsx

@@ -9,7 +9,8 @@ import { authOptions } from './api/auth/[...nextauth]';
 
 //Components
 import { GetServerSidePropsContext } from 'next';
-import Error from '../Components/UI/Error/Error';
+import Image from 'next/image';
+import { ToastOptions, toast } from 'react-toastify';
 
 type LoginForm = {
   username: string;
@@ -18,15 +19,24 @@ type LoginForm = {
 
 export default function Login() {
   const { status } = useSession();
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    reset,
-  } = useForm<LoginForm>();
+  const { register, handleSubmit, reset, setFocus, watch } = useForm<LoginForm>();
   const router = useRouter();
+  const toastOptions: ToastOptions = {
+    position: 'top-center',
+    autoClose: 5000,
+    theme: 'dark',
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+    style: {
+      backgroundColor: '#212942',
+      fontSize: '1.1rem',
+    },
+  };
 
-  const { isLoading, error, setIsLoading, handleError, clearError } = useFormStatus();
+  const { isLoading, setIsLoading, handleError, clearError } = useFormStatus();
 
   useEffect(() => {
     if (status === 'authenticated') {
@@ -39,6 +49,8 @@ export default function Login() {
     return;
   }
 
+  const isFormComplete = watch('username') && watch('password');
+
   //Functions
   const formSubmitHandler = async (data: LoginForm) => {
     setIsLoading(true);
@@ -50,7 +62,9 @@ export default function Login() {
     });
 
     if (resultat?.error) {
+      setFocus('username');
       reset();
+      toast.info('Incorrect credentials', toastOptions);
       handleError(resultat.error);
     } else {
       setIsLoading(false);
@@ -80,19 +94,19 @@ export default function Login() {
             borderTop: '10px solid #704dff',
             animation: 'ease-in 0.3s 1 normal none',
             width: '310px',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
         >
-          <h1
-            style={{
-              fontSize: '1.8em',
-              fontWeight: 'bold',
-              color: '#6d4aff',
-              textShadow: '#6d4aff 0px 0px 18px',
-              textAlign: 'center',
-            }}
-          >
-            BorgWarehouse
-          </h1>
+          <Image
+            src='/borgwarehouse-logo-violet.svg'
+            alt='BorgWarehouse'
+            width={225}
+            height={40}
+            priority
+          />
           <h5
             style={{
               color: '#a1a4ad',
@@ -103,7 +117,6 @@ export default function Login() {
           >
             Sign in to your account.
           </h5>
-          {error && <Error message={error} />}
           <form onSubmit={handleSubmit(formSubmitHandler)}>
             <p>
               <input
@@ -118,17 +131,6 @@ export default function Login() {
                   },
                 })}
               />
-              {errors.username && (
-                <small
-                  style={{
-                    color: 'red',
-                    display: 'block',
-                    marginTop: '3px',
-                  }}
-                >
-                  {errors.username.message}
-                </small>
-              )}
             </p>
             <p>
               <input
@@ -139,17 +141,6 @@ export default function Login() {
                   required: 'This field is required.',
                 })}
               />
-              {errors.password && (
-                <small
-                  style={{
-                    color: 'red',
-                    display: 'block',
-                    marginTop: '3px',
-                  }}
-                >
-                  {errors.password.message}
-                </small>
-              )}
             </p>
             <div
               style={{
@@ -157,7 +148,7 @@ export default function Login() {
                 justifyContent: 'center',
               }}
             >
-              <button className='signInButton' disabled={isLoading}>
+              <button className='signInButton' disabled={isLoading || !isFormComplete}>
                 {isLoading ? (
                   <SpinnerDotted size={20} thickness={150} speed={100} color='#fff' />
                 ) : (

styles/default.css

@@ -70,23 +70,18 @@ code {
 /* signIn */
 
 .signInContainer {
-  display: 'flex';
-  flex-direction: 'column';
-  justify-content: 'center';
-  align-items: 'center';
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   height: calc(100vh - 100px);
-  animation: signInAnim 1s ease 0s 1 normal forwards;
+  animation: fadeIn 0.5s ease-out forwards;
+  opacity: 0;
 }
 
-@keyframes signInAnim {
-  0% {
-    opacity: 0;
-    transform: translateY(-250px);
-  }
-
-  100% {
+@keyframes fadeIn {
+  to {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
@@ -125,40 +120,25 @@ code {
 }
 
 .signInButton {
-  border: 0;
-  padding: 10px 15px;
-  background-color: #6d4aff;
-  color: #dfdeee;
-  margin: 5px;
-  border-radius: 100px;
+  width: 100%;
+  height: 40px;
+  padding: 10px;
+  background-color: #704dff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  font-weight: bold;
   cursor: pointer;
-  text-decoration: none;
-  font-size: 1em;
+  font-size: 0.9em;
+  transition: background 0.2s ease-in-out;
 }
 
 .signInButton:hover {
-  border: 0;
-  padding: 10px 15px;
   background-color: #4f31ce;
-  color: #dfdeee;
-  margin: 5px;
-  border-radius: 100px;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: 1em;
 }
 
 .signInButton:active {
-  border: 0;
-  padding: 10px 15px;
-  background-color: #4f31ce;
-  color: #dfdeee;
-  margin: 5px;
-  border-radius: 100px;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: 1em;
-  transform: scale(0.9);
+  transform: scale(0.95);
 }
 
 .signInButton:disabled {