feat: auth page

Author: Nilumilak

frontend/src/components/AuthPage/SignIn/BasicSignIn/BasicSignIn.styled.tsx

@@ -1,26 +1,26 @@
 import styled from 'styled-components';
 
-export const Form = styled.form`
+export const Fieldset = styled.fieldset`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 40px;
+  gap: 16px;
+  border: none;
   width: 100%;
-
-  div {
-    width: 100%;
-  }
 `;
 
-export const Fieldset = styled.fieldset`
+export const Form = styled.form`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 16px;
-  border: none;
+  gap: 40px;
   width: 100%;
+
+  ${Fieldset} div {
+    width: 100%;
+  }
 `;
 
 export const Field = styled.div`

frontend/src/components/AuthPage/SignIn/BasicSignIn/BasicSignIn.tsx

@@ -19,7 +19,7 @@ function BasicSignIn() {
     defaultValues: { username: '', password: '' },
   });
   const navigate = useNavigate();
-  const { mutateAsync } = useAuthenticate();
+  const { mutateAsync, isLoading } = useAuthenticate();
   const client = useQueryClient();
 
   const onSubmit = async (data: FormValues) => {
@@ -89,6 +89,7 @@ function BasicSignIn() {
           type="submit"
           style={{ width: '100%', borderRadius: '8px' }}
           disabled={!methods.formState.isValid}
+          inProgress={isLoading}
         >
           Log in
         </Button>

frontend/src/components/AuthPage/SignIn/OAuthSignIn/AuthCard/AuthCard.tsx

@@ -1,4 +1,4 @@
-import React, { ElementType } from 'react';
+import React, { ElementType, useState } from 'react';
 import ServiceImage from 'components/common/Icons/ServiceImage';
 
 import * as S from './AuthCard.styled';
@@ -10,6 +10,8 @@ interface Props {
 }
 
 function AuthCard({ serviceName, authPath, Icon = ServiceImage }: Props) {
+  const [isLoading, setIsLoading] = useState(false);
+
   return (
     <S.AuthCardStyled>
       <S.ServiceData>
@@ -24,7 +26,11 @@ function AuthCard({ serviceName, authPath, Icon = ServiceImage }: Props) {
       <S.ServiceButton
         buttonSize="L"
         buttonType="primary"
-        onClick={() => window.location.replace(`${window.basePath}${authPath}`)}
+        onClick={() => {
+          setIsLoading(true);
+          window.location.replace(`${window.basePath}${authPath}`);
+        }}
+        inProgress={isLoading}
       >
         Log in with {serviceName}
       </S.ServiceButton>