Minor 1.0.1 (#96)

* bug/make register page non-scrollable, fix background shifting on scroll, add search inputs to dropdowns on register page, fix rotating animation on Iphone/safari, add toggling icon in password field

* improved images quality

* added header and removed 'flex-row' from div

* added avatar component

* added destructive color in config

* added new media icons

* added spinner component

* Create build.yml

* Create deployment.yml

* removed worflow files

* fixed: replaced hardcoded colors with 'bg-gray', removed <></>

---------

Co-authored-by: Kyryloloshka <[email protected]>
Co-authored-by: StepanPotiienko <[email protected]>
Co-authored-by: Stepan Potiienko <[email protected]>

Author: 3 people

.env.example

@@ -4,4 +4,4 @@ NEXT_PUBLIC_CAMPUS_API_BASE_URL=YOUR_CAMPUS
 
 NEXT_PUBLIC_TINYMCE_API_KEY=YOUR_TINYMCE_API_KEY
 
-GA_ID=YOUR_GA_ID
+GA_ID=YOUR_GA_ID

app/(auth)/layout.tsx

@@ -9,7 +9,7 @@ export default function AuthLayout({
   return (
     <>
       <AnimatedLogo />
-      <main className="relative min-h-[100vh] w-full overflow-x-hidden flex">
+      <main className="relative min-h-screen-dvh w-full overflow-x-hidden flex">
         {children}
       </main>
       <AnimatedBackground />

app/(auth)/login/page.tsx

@@ -8,6 +8,7 @@ import { useRouter } from 'next/navigation';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
+import { useToast } from '@/components/ui/toast/use-toast';
 import useAuth from '@/hooks/useAuth';
 import { forgetMe, getRememberedEmail, rememberMe } from '@/lib/utils/auth';
 
@@ -16,6 +17,7 @@ import { LoginFormData, loginSchema } from './_validation';
 const LoginPage = () => {
   const { login } = useAuth();
   const router = useRouter();
+  const { toast } = useToast();
   const [isRememberMe, setIsRememberMe] = useState(false);
   const {
     register,
@@ -33,14 +35,28 @@ const LoginPage = () => {
     };
     const { error, success } = await login(dto);
     if (error && !success) {
-      setError('password', {
-        type: 'manual',
-        message: 'Неправильний логін або пароль',
-      });
+      switch (error) {
+        case 'Unauthorized':
+          setError('password', {
+            type: 'manual',
+            message: 'Неправильний логін або пароль',
+          });
+          break;
+        default:
+          toast({
+            variant: 'destructive',
+            title: 'Трапилась помилка',
+            description: error,
+          });
+          break;
+      }
       return;
     }
     isRememberMe ? rememberMe(data.email) : forgetMe();
     router.push('/');
+    toast({
+      title: 'Ви успішно увійшли до системи',
+    });
   };
 
   return (
@@ -77,10 +93,10 @@ const LoginPage = () => {
                   type="email"
                   placeholder="Пошта"
                   defaultValue={getRememberedEmail() ?? ''}
-                  className={`${errors.email && 'border-red-500 focus-visible:border-red-500'}`}
+                  className={`${errors.email && 'border-destructive focus-visible:border-destructive'}`}
                 />
                 {errors.email && (
-                  <span className="text-red-500 text-m-p md:text-p">
+                  <span className="text-destructive text-m-p md:text-p">
                     {errors.email.message}
                   </span>
                 )}
@@ -90,10 +106,10 @@ const LoginPage = () => {
                   {...register('password')}
                   type="password"
                   placeholder="Пароль"
-                  className={`${errors.password && 'border-red-500 focus-visible:border-red-500'}`}
+                  className={`${errors.password && 'border-destructive focus-visible:border-destructive'}`}
                 />
                 {errors.password && (
-                  <span className="text-red-500 text-m-p md:text-p">
+                  <span className="text-destructive text-m-p md:text-p">
                     {errors.password.message}
                   </span>
                 )}