fix merge conflict

pairent_frontend_react/package.json

@@ -9,6 +9,7 @@
     "bootstrap-icons": "^1.10.5",
     "font-awesome": "^4.7.0",
     "formik": "^2.2.9",
+    "nanoid": "^4.0.2",
     "oidc-client-ts": "^2.2.3",
     "react": "^18.2.0",
     "react-awesome-slider": "^4.1.0",

pairent_frontend_react/src/components/BlockApartment/index.jsx

@@ -5,6 +5,7 @@ import SVGIcon from '../UI/Icon/SVGIcon';
 const ApartmentBlock = styled.div`
     width: 20%;
     margin-top: 26px;
+    position:relative;
 `
 const ApartmentImage = styled.img`
     width: 100%;
@@ -48,12 +49,13 @@ const TransportIcon = styled.div`
 const ButtonContact = styled.button`
     width: 180px;
     height: 36px;
-    margin-top: 26px;
     background: #175FA9;
     border-radius: 12px;
     font-weight: 500;
     font-size: 16px;
     color: #fff;
+    position: absolute;
+    bottom:-62px;
 `
 
 const BlockApartment = function (props) {

pairent_frontend_react/src/components/ComparisonsApartamentsList/index.jsx

@@ -28,7 +28,7 @@ const ApartmentSectionTitleText = styled.h3`
 `
 
 const Separation = styled.div`
-    margin-top: 50px;
+    margin-top: 86px;
 `
 
 const SeparationText = styled.p`

pairent_frontend_react/src/components/Questions/index.jsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-import './styles/Questions.css';
-
-const MainSection = styled.section`
-    display: flex;
-    justify-content: space-between;
-    margin-top: 55px;
-`;
-
-const Button = styled.button`
-    width: 323px;
-    height: fit-content;
-    padding: 2% 5% 2% 3%;
-    border-radius: 12px;
-    text-align: left;
-
-    & h3 {
-        font-size: 18px;
-        color: #fff;
-    }
-    & p {
-        margin-top: 16px;
-        font-size: 16px;
-        line-height: 19px;
-        color: #fff;
-    }
-`;
-
-const OrangeButton = styled(Button)`
-    background: linear-gradient(180deg, #F76D09 0%, #FFA800 100%);
-    &:active {
-        background: linear-gradient(180deg, #FFA800 0%, #F76D09 100%);
-    }
-`;
-
-const GreenButton = styled(Button)`
-    background: linear-gradient(180deg, #107A34 0%, #51A633 100%);
-    &:active {
-        background: linear-gradient(180deg, #51A633 0%, #107A34 100%);
-    }
-`;
-
-const BlueButton = styled(Button)`
-    background: linear-gradient(180deg, #2E50A7 0%, #0993F7 100%);
-    &:active {
-        background: linear-gradient(180deg, #0993F7 0%, #2E50A7 100%);
-    }
-`;
-
-const Questions = function () {
-    return (
-        <MainSection>
-            <OrangeButton>
-                <h3>Рестик или кафешка?</h3>
-                <p>Какой общепит предпочтительнее для вас возле жилища?</p>
-            </OrangeButton>
-            <GreenButton>
-                <h3>Двушка или однушка?</h3>
-                <p>Как выбрать квартиру под себя, чтобы не переплачивать?</p>
-            </GreenButton>
-            <BlueButton>
-                <h3>Совмещенный или отдельно?</h3>
-                <p>Какой санузел будет для вас лучшим вариантом?</p>
-            </BlueButton>
-        </MainSection>  
-    );
-}
-
-export default Questions;

pairent_frontend_react/src/components/Questions/styles/Questions.css

@@ -1,50 +0,0 @@
-/*Кнопки с вопросами*/
-.questionBtnSection{
-    display: flex;
-    justify-content: space-between;
-    margin-top: 55px;
-}
-
-.questionBtn{
-    width: 323px;
-    height: 128px;
-    padding: 2% 5% 2% 3%;
-    border-radius: 12px;
-    text-align: left;
-}
-
-.questionBtn h3{
-    font-size: 18px;
-    color: #fff;
-}
-
-.questionBtn p{
-    margin-top: 16px;
-    font-size: 16px;
-    line-height: 19px;
-    color: #fff;
-}
-
-.orangeBtn{
-    background: linear-gradient(180deg, #F76D09 0%, #FFA800 100%);
-}
-
-.orangeBtn:active{
-    background: linear-gradient(180deg, #FFA800 0%, #F76D09 100%);
-}
-
-.greenBtn{
-    background: linear-gradient(180deg, #107A34 0%, #51A633 100%);
-}
-
-.greenBtn:active{
-    background: linear-gradient(180deg, #51A633 0%, #107A34 100%);
-}
-
-.blueBtn{
-    background: linear-gradient(180deg, #2E50A7 0%, #0993F7 100%);
-}
-
-.blueBtn:active{
-    background: linear-gradient(180deg, #0993F7 0%, #2E50A7 100%);
-}

pairent_frontend_react/src/constants.js

@@ -1,3 +1,5 @@
+import { nanoid } from 'nanoid'
+
 /**
  * Api root path 
  * @type {string}
@@ -5,4 +7,32 @@
 const API_ROOT = window.location.protocol + '//127.0.0.1:8000';
 // ДЛЯ ПРОДА ПОСТАВИТЬ ЭТО: '//pairent.vvsu.ru'
 
-export default Object.freeze({ API_ROOT });
+if (window.localStorage.getItem('oidc_client_key') == undefined) {
+    window.localStorage.setItem('oidc_client_key', nanoid(32));
+}
+
+const OIDC_CLIENT_KEY = window.localStorage.getItem('oidc_client_key');
+
+
+/** OpenID Connect Client Config
+ * @type {import('oidc-client-ts').OidcClientSettings}
+ */
+const OIDCConfig = {
+    onSignIn: () => {},
+    authority: API_ROOT + '/api/auth/vvsu/',
+    client_id: 'it-hub-client',
+    redirect_uri: 'https://pairent.vvsu.ru/sign-in/',
+    scope: [
+        'openid',
+        'vvsu_IdUser',
+        'vvsu_IdEmpl',
+        'vvsu_IdStud',
+        'vvsu_login',
+        'given_name',
+        'family_name'
+    ],
+    client_secret: OIDC_CLIENT_KEY
+};
+
+
+export default Object.freeze({ API_ROOT, OIDCConfig, OIDC_CLIENT_KEY });

pairent_frontend_react/src/pages/Comparisons/index.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import ComparisonsApartmentsList from '../../components/ComparisonsApartamentsList';
-import Questions from '../../components/Questions';
 import LastView from '../../components/LastView';
 
 const Comparisons = function () {
@@ -8,7 +7,6 @@ const Comparisons = function () {
     return(
         <>
             <ComparisonsApartmentsList/>
-            <Questions/>
             <LastView/>
         </>
     );

pairent_frontend_react/src/pages/Favorites/index.jsx

@@ -1,8 +1,7 @@
 import React from "react";
 
-import FavoritesApartamentsList from "../../components/FavoritesApartamentsList";
+import FavoritesApartamentsList from '../../components/FavoritesApartamentsList';
-import Questions from "../../components/Questions";
+import LastView from '../../components/LastView';
-import LastView from "../../components/LastView";
 
 import "./styles/Favorites.css";
 
@@ -11,7 +10,6 @@ const Favorites = function () {
         <>
             <h2>Избранное</h2>
             <FavoritesApartamentsList />
-            <Questions />
             <LastView />
         </>
     );

pairent_frontend_react/src/pages/IndexApartment/index.jsx

@@ -21,12 +21,12 @@ const SVGIcon = styled(ISVGIcon)`
 `;
 
 const ContainerLeft = styled.div`
-    width: 800px;
+    max-width: 800px;
 `
 
 const ContainerSlider = styled.div`
-    width: 800px;
+    max-width: 800px;
-    height: 500px;
+    max-height: 500px;
 
     clip-path: inset(0% 0% 5% 0% round 20px);
 `
@@ -112,13 +112,14 @@ const SeparationLine = styled.div`
 `
 
 const AdditionalItem = styled.div`
-    width: 256px;
+    max-width: 256px;
-    height: 160px;
+    max-height: 160px;
     background: #FFFFFF;
     border: 1px solid #C0C0C0;
     border-radius: 20px;
     padding: 8px;
 
+
     &:hover {
         box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.25);
         cursor: pointer;
@@ -126,8 +127,8 @@ const AdditionalItem = styled.div`
 `
 
 const AdditionalImage = styled.img`
-    width: 240px;
+    width:100%;
-    height: 100px;
+    max-height: 120px;
     margin-bottom: 4px;
     border-radius: 12px;
 `

pairent_frontend_react/src/pages/LoggedIn/index.jsx

@@ -1 +1,44 @@
-// TODO: Make a logged in handler
+import React from "react";
+import { styled } from "styled-components";
+import { HashLoader } from "react-spinners";
+import { SigninResponse, SigninState } from 'oidc-client-ts';
+
+const CenterContainer = styled.div`
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    text-align: center;
+
+    & h2 {
+        font-size: 1.8em;
+        font-weight: 600;
+        margin: 1.5em 0;
+    }
+`;
+
+export default class LoggedIn extends React.Component {
+    constructor(props) {
+        super(props);
+        this.response = new SigninResponse(new URL(window.location.href).searchParams);
+        this.signin_state = SigninState.fromStorageString(window.localStorage.getItem('oidc_signin_state'));
+    }
+
+    async componentDidMount() {
+        console.log(this.response)
+    }
+
+    render() {
+        return (
+            <div style={{height: '65vh'}}>
+                <CenterContainer>
+                    <h2>Подождите пожалуйста</h2>
+                    <div style={{margin: '36px auto', width:'fit-content'}}>
+                        <HashLoader size='80' color='#0077aa' />
+                    </div>
+                </CenterContainer>
+            </div>
+        )
+    }
+}

pairent_frontend_react/src/pages/LoginPage/index.jsx

@@ -7,7 +7,7 @@ import { HashLoader } from 'react-spinners';
 import * as OpenID from 'oidc-client-ts';
 import constants from '../../constants';
 
-const { API_ROOT } = constants;
+const { OIDCConfig } = constants;
 
 const LoginBox = styled.div`
     position: fixed;
@@ -51,30 +51,15 @@ const LoginButton = styled(BlueButton)`
     cursor: ${props => props.disabled ? 'default' : 'pointer'};
 
     & svg {
-        height: 12pt;
+        height: 14pt;
-        margin-left: 6px
+        transform: translateY(4px);
+        margin-left: 10px;
     }
     &:hover {
         background: ${props => props.disabled ? 'white' : 'royalblue'};
     }
 `;
 
-const OIDCConfig = {
-    onSignIn: () => {},
-    authority: API_ROOT + '/api/auth/vvsu/',
-    client_id: 'it-hub-client',
-    redirect_uri: 'https://pairent.vvsu.ru/sign-in/',
-    scope: [
-        'openid',
-        // 'vvsu_IdUser',
-        // 'vvsu_IdEmpl',
-        // 'vvsu_IdStud',
-        // 'vvsu_login',
-        // 'given_name',
-        // 'family_name'
-    ]
-};
-
 const VVSULogoSVG = () => {
     return <svg xmlns="http://www.w3.org/2000/svg" xmlSpace="preserve" viewBox="0 0 451.5 155.9"><path fillRule="evenodd" d="M408.7 0h42.8L416 102.5l-2.8 8.1c-8.2 23.9-33.9 43.6-58 45.2h-.6c-.8.1-1.6.1-2.5.1H348c-.8 0-1.6 0-2.4-.1h-43l15.7-45.2.3-.8h35.7c9.1 0 19.2-7.8 22.5-17.2l.4-1 1.2-3.5h-32.7c-4.4 0-19.5 0-13.1-18.5l4.4-12.9 3.9-11.2L356.5 0H393l-21.7 62.8H387c2.6-7.5 15.8-45.6 21.7-62.8zm-91.2 0h25.9l-15.7 45.3h-7c-9.6 0-20.1 7.9-23.5 17.4L265 155.9c-.5 0-1-.1-1.5-.1h-43l15.8-45.2 7.8-22.6 14.8-42.5c8.3-24.1 34.4-44 58.6-45.2V0zM208 0h48.7l-20.1 58.1c-3.2 9.1-9.4 15.2-19.4 17.2l16.8.1-12.3 35.2c-8.2 23.9-33.9 43.6-58 45.2h-.7c-.8.1-1.6.1-2.5.1h-4.1c-.8 0-1.6 0-2.4-.1h-43l38.2-110.4c8.4-24.1 34.4-44 58.7-45.2l.1-.2zm-12.7 40.8h15.4l-8.1 23h-23.9l4.4-12.5c1.7-4.6 7.3-10.5 12.2-10.5zm-25.6 48.8H194l-5.5 16.1c-1.1 3.4-6.1 10.8-13.6 10.8h-14.1l8.9-26.9zM96.9 0h48.7l-20.2 58.1c-3.2 9.1-9.4 15.2-19.4 17.2l16.8.1-9.3 27.1h-.2l-2.8 8.1c-8.2 23.9-33.9 43.6-58 45.2h-.6c-.8.1-1.7.1-2.5.1h-4.1c-.8 0-1.6 0-2.4-.1H0l15.7-45.2L23.6 88l14.7-42.5C46.7 21.4 72.7 1.5 97 .3V0zM84.2 40.8h15.4l-8.1 23H67.6L72 51.3c1.7-4.6 7.3-10.5 12.2-10.5zM58.6 89.6h24.3l-5.5 16.1c-1.1 3.4-6.1 10.8-13.5 10.8H49.7l8.9-26.9z" clipRule="evenodd"/></svg>;
 }
@@ -100,12 +85,13 @@ export default class LoginPage extends React.Component {
         let client = new OpenID.OidcClient(OIDCConfig);
 
         const req = await client.createSigninRequest({});
+        window.localStorage.setItem('oidc_signin_state', req.state.toStorageString());
         window.location.href = req.url;
     }
 
     render() {
         return (
-            <div style={{height: '50vh'}}>
+            <div style={{height: '65vh'}}>
                 <LoginBox>
                     <h2>Вход</h2>
                     <hr/>

pairent_frontend_react/src/router/index.jsx

@@ -5,6 +5,7 @@ import IndexPage from "../pages/IndexPage";
 import PsychTest from "../pages/PsychTest";
 import Tinder from "../pages/Tinder";
 import LoginPage from "../pages/LoginPage";
+import LoggedIn from "../pages/LoggedIn";
 
 // НА ПРОДАШКЕНЕ СДЕЛАТЬ ПРИВАТНЫЕ МАРШРУТЫ
 // export const privateRoutes = [
@@ -17,7 +18,6 @@ export default Object.freeze({
         { path: "/", component: <IndexPage />, exact: true },
         { path: "/favorites", component: <Favorites />, exact: true },
         { path: "/comparisons", component: <Comparisons />, exact: true },
-        { path: "/", component: <IndexPage />, exact: true },
         { path: "/apartment/:id", component: <IndexApartment />, exact: true },
         { path: "/favorites", component: <Favorites />, exact: true },
         { path: "/comparisons", component: <Comparisons />, exact: true },