Opexflow · bachokhachvani · Apr 10, 2022 · Apr 10, 2022
diff --git a/pages/index.jsx b/pages/index.jsx
@@ -1,16 +1,16 @@
-import React from 'react'
-import { useIntl } from '../hooks-utils/useIntl'
-import styled, { css } from 'styled-components'
-import HeaderLayout from '../components/layout/HeaderLayout'
-import Image from 'next/image'
-import Link from 'next/link'
+import React from "react";
+import { useIntl } from "../hooks-utils/useIntl";
+import styled, { css } from "styled-components";
+import HeaderLayout from "../components/layout/HeaderLayout";
+import Image from "next/image";
+import Link from "next/link";
 
 const Main = styled.main`
   margin-top: 45px;
   display: flex;
   flex-direction: column;
   align-items: center;
-`
+`;
 const Authentication = styled.h1`
   font-weight: bold;
   font-size: 60px;
@@ -20,7 +20,7 @@ const Authentication = styled.h1`
   @media (max-width: 1044px) {
     display: none;
   }
-`
+`;
 
 const AuthWithLink = styled.a`
   margin-top: 40px;
@@ -40,23 +40,22 @@ const AuthWithLink = styled.a`
     css`
       opacity: 0.5;
     `}
-`
+`;
 const BrokerTitle = styled.h4`
   margin-left: 10px;
-`
+`;
 const BrokerIcon = styled.div`
   display: inline-block;
   width: 70px;
   height: 70px;
   font-size: 39px;
   text-align: center;
   line-height: 70px;
-`
+`;
 
 function Home() {
-
-const { f } = useIntl()
-console.log(f)
+  const { f } = useIntl();
+  console.log(f);
   return (
     <>
       <HeaderLayout />
@@ -71,12 +70,11 @@ console.log(f)
         <Link passHref href="/tinkoff">
           <AuthWithLink>
             <Image
-              width="70"
-              height="70"
-              src="/images/tinkoff.png"
+              width="190"
+              height="43"
+              src="/images/tinkoff-new.svg"
               alt="Tinkoff"
             />
-            <BrokerTitle>Tinkoff</BrokerTitle>
           </AuthWithLink>
         </Link>
         {/* <Link passHref href="/Ib"> */}
@@ -94,7 +92,7 @@ console.log(f)
         </Link>
       </Main>
     </>
-  )
+  );
 }
 
-export default Home
+export default Home;
diff --git a/pages/tinkoff.jsx b/pages/tinkoff.jsx
@@ -1,60 +1,116 @@
-import styled from 'styled-components'
-import HeaderLayout from '../components/layout/HeaderLayout'
-import { ButtonStyled } from '../styled/Buttons'
-import { AuthenticationTitle } from '../styled/Texts'
-import { AuthInput, AuthForm } from '../styled/inputs'
+import styled from "styled-components";
+import HeaderLayout from "../components/layout/HeaderLayout";
+import { ButtonStyled } from "../styled/Buttons";
+import { AuthenticationTitle, LinkStyled } from "../styled/Texts";
+import { AuthInput, AuthForm } from "../styled/inputs";
+import { useState } from "react";
+import Link from "next/link";
+import Checkbox from "../components/checkbox/Checkbox";
+import useInputOnChange from "../hooks-utils/useInputOnChange";
 
 const Main = styled.main`
   margin-top: 45px;
   display: flex;
   flex-direction: column;
   align-items: center;
-`
+`;
+const ChangePassLinkStyled = styled(LinkStyled)`
+  margin-left: auto;
+  margin-top: 10px;
+`;
+
+const CheckboxesWrapper = styled.div`
+  width: 85%;
+  max-width: 600px;
+  display: flex;
+  justify-content: space-around;
+  margin-top: 20px;
+`;
 
 function TinkoffAuth() {
+  const [loginValue, loginOnChange] = useInputOnChange();
+  const [passValue, passOnChange] = useInputOnChange();
+  const [addresValue, addresOnChange] = useInputOnChange("tinkoff");
+  const [isSecretToken, setIsSecretToken] = useState(false);
+
+  const handleOnSecretTokenChange = () => {
+    setIsSecretToken((prev) => !prev);
+  };
+
   return (
     <>
       <HeaderLayout />
       <Main>
         <AuthenticationTitle>Tinkoff</AuthenticationTitle>
         <AuthForm>
-          <AuthInput placeholder="secret token" />
+          <AuthInput
+            placeholder="Login"
+            value={loginValue}
+            onChange={loginOnChange}
+          ></AuthInput>
+          <AuthInput
+            placeholder="Password"
+            value={passValue}
+            onChange={passOnChange}
+          ></AuthInput>
+          <AuthInput
+            placeholder="Adress and Port"
+            value={addresValue}
+            onChange={addresOnChange}
+          ></AuthInput>
+          <Link href="changepassword">
+            <ChangePassLinkStyled>change pass</ChangePassLinkStyled>
+          </Link>
+          <CheckboxesWrapper>
+            <Checkbox
+              handleOnChange={handleOnSecretTokenChange}
+              checkedBox={isSecretToken}
+            >
+              Secret Token
+            </Checkbox>
+            <Checkbox
+              handleOnChange={handleOnSecretTokenChange}
+              checkedBox={!isSecretToken}
+            >
+              Sandbox Token
+            </Checkbox>
+          </CheckboxesWrapper>
         </AuthForm>
         <ButtonStyled>Submit</ButtonStyled>
       </Main>
     </>
-  )
+  );
 }
 
-const brokers = ['Finam', 'Tinkoff']
-const apiURL = 'https://api-invest.tinkoff.ru/openapi/sandbox' // Для Production-окружения будет https://api-invest.tinkoff.ru/openapi
-const socketURL = 'wss://api-invest.tinkoff.ru/openapi/md/v1/md-openapi/ws'
-const secretToken = process.env.secretToken // токен для сандбокса
+// const brokers = ["Finam", "Tinkoff"];
+// const apiURL = "https://api-invest.tinkoff.ru/openapi/sandbox"; // Для Production-окружения будет https://api-invest.tinkoff.ru/openapi
+// const socketURL = "wss://api-invest.tinkoff.ru/openapi/md/v1/md-openapi/ws";
+// const secretToken = process.env.secretToken; // токен для сандбокса
 
-export const getServerSideProps = ({ query }) => {
-  const api = new OpenAPI({ apiURL, secretToken, socketURL })
-  !(async function run() {
-    console.log(api, secretToken)
-    const { figi } = await api.searchOne({ ticker: 'AAPL' })
-    console.log({ figi })
-    // const { commission, orderId } = await api.limitOrder({
-    //   operation: 'Buy',
-    //   figi,
-    //   lots: 1,
-    //   price: 100,
-    // }) // Покупаем AAPL
-    // console.log(commission) // Комиссия за сделку
-    // await api.cancelOrder({ orderId }) // Отменяем заявку
-  })()
-  let returnedObj = {
-    props: {},
-  }
-  if (!brokers.includes(query.with)) {
-    returnedObj.redirect = {
-      permanent: false,
-      destination: '/',
-    }
-  }
-  return returnedObj
-}
-export default TinkoffAuth
+// export const getServerSideProps = ({ query }) => {
+//   const api = new OpenAPI({ apiURL, secretToken, socketURL });
+//   !(async function run() {
+//     console.log(api, secretToken);
+//     const { figi } = await api.searchOne({ ticker: "AAPL" });
+//     console.log({ figi });
+//     const { commission, orderId } = await api.limitOrder({
+//       operation: 'Buy',
+//       figi,
+//       lots: 1,
+//       price: 100,
+//     }) // Покупаем AAPL
+//     console.log(commission) // Комиссия за сделку
+//     await api.cancelOrder({ orderId }) // Отменяем заявку
+//   })();
+//   let returnedObj = {
+//     props: {},
+//   };
+//   if (!brokers.includes(query.with)) {
+//     returnedObj.redirect = {
+//       permanent: false,
+//       destination: "/",
+//     };
+//   }
+//   return returnedObj;
+// };
+export default TinkoffAuth;