fix: pass state and implement email login on integration

Author: velopert

src/components/auth/AuthEmailSuccess.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { MdCheck } from 'react-icons/md';
 import palette from '../../lib/styles/palette';
 
-const AuthEmailSuccessBlock = styled.div`
+const AuthEmailSuccessBlock = styled.div<{ isIntegrate?: boolean }>`
   display: flex;
   align-items: center;
   background: ${palette.teal1};
@@ -12,6 +12,7 @@ const AuthEmailSuccessBlock = styled.div`
   padding-right: 0.75rem;
   height: 3rem;
   color: ${palette.teal9};
+  white-space: pre;
   .icon {
     font-size: 1.5rem;
   }
@@ -20,18 +21,58 @@ const AuthEmailSuccessBlock = styled.div`
     flex: 1;
     text-align: center;
   }
+
+  ${(props) =>
+    props.isIntegrate &&
+    css`
+      height: 4rem;
+    `}
+`;
+
+const FakeLink = styled.button`
+  display: inline;
+  cursor: pointer;
+  text-decoration: underline;
+  font-weight: 600;
+  background: none;
+  padding: 0;
+  border: none;
+  outline: none;
+  color: ${palette.teal9};
+  &:hover {
+    color: ${palette.teal7};
+  }
 `;
 
 export interface AuthEmailSuccessProps {
   registered: boolean;
+  isIntegrate?: boolean;
 }
 
-const AuthEmailSuccess: React.FC<AuthEmailSuccessProps> = ({ registered }) => {
+const AuthEmailSuccess: React.FC<AuthEmailSuccessProps> = ({
+  registered,
+  isIntegrate,
+}) => {
   const text = registered ? '로그인' : '회원가입';
   return (
-    <AuthEmailSuccessBlock>
+    <AuthEmailSuccessBlock isIntegrate={isIntegrate}>
       <MdCheck className="icon" />
-      <div className="description">{text} 링크가 이메일로 전송되었습니다.</div>
+      <div className="description">
+        {text} 링크가 이메일로 전송되었습니다.
+        {isIntegrate ? (
+          <>
+            {'\n'}로그인 후 이 창에서{' '}
+            <FakeLink
+              onClick={() => {
+                window.location.reload();
+              }}
+            >
+              새로고침
+            </FakeLink>
+            을 해주세요.
+          </>
+        ) : null}
+      </div>
     </AuthEmailSuccessBlock>
   );
 };

src/components/auth/AuthForm.tsx

@@ -71,6 +71,7 @@ export interface AuthFormProps {
   registered: boolean | null;
   currentPath: string;
   isIntegrate?: boolean;
+  integrateState?: string;
 }
 
 const AuthForm: React.FC<AuthFormProps> = ({
@@ -81,6 +82,7 @@ const AuthForm: React.FC<AuthFormProps> = ({
   registered,
   currentPath,
   isIntegrate,
+  integrateState,
 }) => {
   const [email, onChangeEmail] = useInput('');
   const onSubmit = (email: string) => {
@@ -96,7 +98,10 @@ const AuthForm: React.FC<AuthFormProps> = ({
         <section>
           <h4>이메일로 {modeText}</h4>
           {registered !== null ? (
-            <AuthEmailSuccess registered={registered} />
+            <AuthEmailSuccess
+              registered={registered}
+              isIntegrate={isIntegrate}
+            />
           ) : (
             <AuthEmailForm
               value={email}
@@ -112,6 +117,7 @@ const AuthForm: React.FC<AuthFormProps> = ({
           <AuthSocialButtonGroup
             currentPath={currentPath}
             isIntegrate={isIntegrate}
+            integrateState={integrateState}
           />
         </section>
       </div>

src/components/auth/AuthSocialButton.tsx

@@ -28,6 +28,7 @@ interface AuthSocialButtonProps {
   tabIndex?: number;
   currentPath: string;
   isIntegrate?: boolean;
+  integrateState?: string;
 }
 
 const providerMap = {
@@ -53,6 +54,7 @@ const AuthSocialButton: React.FC<AuthSocialButtonProps> = ({
   tabIndex,
   currentPath,
   isIntegrate,
+  integrateState,
 }) => {
   const info = providerMap[provider];
   const { icon: Icon, color, border } = info;
@@ -64,7 +66,7 @@ const AuthSocialButton: React.FC<AuthSocialButtonProps> = ({
 
   const redirectTo = `${host}api/v2/auth/social/redirect/${provider}?next=${currentPath}&isIntegrate=${
     isIntegrate ? 1 : 0
-  }`;
+  }${integrateState ? `&integrateState=${integrateState}` : ''}`;
 
   return (
     <AuthSocialButtonBlock

src/components/auth/AuthSocialButtonGroup.tsx

@@ -11,9 +11,11 @@ const AuthSocialButtonGroupBlock = styled.div`
 const AuthSocialButtonGroup = ({
   currentPath,
   isIntegrate,
+  integrateState,
 }: {
   currentPath: string;
   isIntegrate?: boolean;
+  integrateState?: string;
 }) => {
   return (
     <AuthSocialButtonGroupBlock>
@@ -22,18 +24,21 @@ const AuthSocialButtonGroup = ({
         tabIndex={4}
         currentPath={currentPath}
         isIntegrate={isIntegrate}
+        integrateState={integrateState}
       />
       <AuthSocialButton
         provider="google"
         tabIndex={5}
         currentPath={currentPath}
         isIntegrate={isIntegrate}
+        integrateState={integrateState}
       />
       <AuthSocialButton
         provider="facebook"
         tabIndex={6}
         currentPath={currentPath}
         isIntegrate={isIntegrate}
+        integrateState={integrateState}
       />
     </AuthSocialButtonGroupBlock>
   );

src/components/user-integrate/UserIntegrateTemplate.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import styled from 'styled-components';
 import useUser from '../../lib/hooks/useUser';
 import media from '../../lib/styles/media';
@@ -11,12 +11,36 @@ import {
   ACCEPT_INTEGRATION,
   AcceptIntegrationResponse,
 } from '../../lib/graphql/user';
+import { useLocation } from 'react-router-dom';
+import qs from 'qs';
+import { toast } from 'react-toastify';
+import useRequest from '../../lib/hooks/useRequest';
+import { SendAuthEmailResponse, sendAuthEmail } from '../../lib/api/auth';
 
 function UserIntegrateTemplate() {
   const user = useUser();
+  const location = useLocation();
+  const query = qs.parse(location.search, { ignoreQueryPrefix: true });
+  const integrateState = query.state ?? '';
+  const [_sendAuthEmail, loading, data, , resetSendAuthEmail] =
+    useRequest<SendAuthEmailResponse>(sendAuthEmail);
+
   const [acceptIntegration] =
     useMutation<AcceptIntegrationResponse>(ACCEPT_INTEGRATION);
 
+  const onSendAuthEmail = useCallback(
+    async (email: string) => {
+      if (!validateEmail(email)) {
+        toast.error('잘못된 이메일 형식입니다.');
+        return;
+      }
+      _sendAuthEmail(email);
+    },
+    [_sendAuthEmail],
+  );
+
+  const registered = data && data.registered;
+
   return (
     <Block>
       <Content>
@@ -45,7 +69,7 @@ function UserIntegrateTemplate() {
                 onClick={async () => {
                   const result = await acceptIntegration();
                   if (!result.data) return;
-                  window.location.href = `https://api-dev.codenary.co.kr/contents/velog/callback?code=${result.data.acceptIntegration}`;
+                  window.location.href = `https://api-dev.codenary.co.kr/contents/velog/callback?code=${result.data.acceptIntegration}&state=${integrateState}`;
                 }}
               >
                 승인
@@ -56,11 +80,12 @@ function UserIntegrateTemplate() {
           <AuthForm
             mode="LOGIN"
             onToggleMode={() => {}}
-            onSendAuthEmail={() => {}}
-            loading={false}
-            registered={null}
+            onSendAuthEmail={onSendAuthEmail}
+            loading={loading}
+            registered={registered}
             currentPath="/user-integrate"
             isIntegrate
+            integrateState={integrateState}
           />
         )}
       </Content>
@@ -128,3 +153,9 @@ const DataRow = styled.div`
 `;
 
 export default UserIntegrateTemplate;
+
+function validateEmail(email: string) {
+  const re =
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return re.test(String(email).toLowerCase());
+}