logging in via social networks

src/containers/dialogs/LoginDialog/index.tsx

@@ -1,6 +1,4 @@
-import React, {
-  FC, FormEvent, useCallback, useEffect, useState
-} from 'react';
+import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { ScrollDialog } from '../ScrollDialog';
 import { IDialogProps } from '~/redux/modal/constants';
@@ -12,6 +10,7 @@ import { Padder } from '~/components/containers/Padder';
 import * as styles from './styles.scss';
 import { selectAuthLogin } from '~/redux/auth/selectors';
 import * as ACTIONS from '~/redux/auth/actions';
+import { API } from '~/constants/api';
 
 const mapStateToProps = selectAuthLogin;
 
@@ -23,15 +22,25 @@ const mapDispatchToProps = {
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
 
 const LoginDialogUnconnected: FC<IProps> = ({
-  onRequestClose, error, userSendLoginRequest, userSetLoginError
+  onRequestClose,
+  error,
+  userSendLoginRequest,
+  userSetLoginError,
 }) => {
   const [username, setUserName] = useState('');
   const [password, setPassword] = useState('');
 
-  const onSubmit = useCallback((event: FormEvent) => {
-    event.preventDefault();
-    userSendLoginRequest({ username, password });
-  }, [userSendLoginRequest, username, password]);
+  const onSubmit = useCallback(
+    (event: FormEvent) => {
+      event.preventDefault();
+      userSendLoginRequest({ username, password });
+    },
+    [userSendLoginRequest, username, password]
+  );
+
+  const onSocialLogin = useCallback(() => {
+    window.open(API.USER.VKONTAKTE_LOGIN, '', 'width=600,height=400');
+  }, []);
 
   useEffect(() => {
     if (error) userSetLoginError(null);
@@ -40,7 +49,9 @@ const LoginDialogUnconnected: FC<IProps> = ({
   const buttons = (
     <Padder>
       <Group horizontal>
-        <Button title="ВОЙТИ" stretchy />
+        <Button iconLeft="key" stretchy>
+          <span>Войти</span>
+        </Button>
       </Group>
     </Padder>
   );
@@ -49,17 +60,20 @@ const LoginDialogUnconnected: FC<IProps> = ({
 
   return (
     <form onSubmit={onSubmit}>
-      <ScrollDialog buttons={buttons} width={260} error={error} onClose={onRequestClose}>
+      <ScrollDialog width={260} error={error} onClose={onRequestClose} buttons={buttons}>
         <Padder>
           <div className={styles.wrap}>
             <Group>
               <h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
 
-              <div />
-              <div />
-
               <InputText title="Логин" handler={setUserName} value={username} autoFocus />
               <InputText title="Пароль" handler={setPassword} value={password} />
+
+              <Group className={styles.buttons}>
+                <Button className={styles.vk} iconLeft="vk" type="button" onClick={onSocialLogin}>
+                  <span>Вконтакте</span>
+                </Button>
+              </Group>
             </Group>
           </div>
         </Padder>
@@ -68,6 +82,9 @@ const LoginDialogUnconnected: FC<IProps> = ({
   );
 };
 
-const LoginDialog = connect(mapStateToProps, mapDispatchToProps)(LoginDialogUnconnected);
+const LoginDialog = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(LoginDialogUnconnected);
 
 export { LoginDialog };

src/containers/dialogs/LoginDialog/styles.scss

@@ -1,7 +1,32 @@
+$vk_color: darken(desaturate($blue, 70%), 20%);
+
 .wrap {
   display: flex;
   align-items: flex-start;
   justify-content: center;
-  padding: 20px 20px 60px 20px;
+  padding: 20px;
   margin: auto;
+
+  h2 {
+    margin-bottom: $gap * 3 !important;
+  }
+}
+
+.vk {
+  background: $content_bg;
+  box-shadow: inset $vk_color 0 0 0 2px;
+  color: $vk_color;
+
+  svg {
+    fill: $vk_color;
+    margin-right: $gap;
+    width: 24px;
+    height: 24px;
+  }
+}
+
+.buttons {
+  margin: $gap * 2 0 0 0 !important;
+  padding: $gap * 2 0 0 0;
+  border-top: 1px solid black;
 }