страница настроек
This commit is contained in:
Denis
parent
7ea4c52966
commit
0dd77aee52
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -481,6 +481,15 @@
|
||||
justify-content: space-between;
|
||||
|
||||
.form_field {
|
||||
&.full {
|
||||
width: 100% !important;
|
||||
margin-right: 30px !important;
|
||||
|
||||
@media all and (max-width: 960px) {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
width: calc(50% - 15px);
|
||||
min-width: calc(50% - 15px);
|
||||
@ -829,3 +838,160 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.settings_user_control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 45px;
|
||||
|
||||
p {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.settings_table {
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
|
||||
.table_row {
|
||||
display: table-row;
|
||||
|
||||
.table_cell {
|
||||
display: table-cell;
|
||||
padding: 18px 12px;
|
||||
border: 1px solid #EDEFF5;
|
||||
position: relative;
|
||||
|
||||
&:last-child {
|
||||
border-left: 0;
|
||||
min-width: 36px;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
background: url("../../public/assets/images/icons/icon-delete.svg") no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-last-child(2) {
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: #fff;
|
||||
font-size: 15px;
|
||||
padding: 0;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--text_not_active);
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.settings_dropdown {
|
||||
font-family: 'Montserrat',sans-serif;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-weight: 400;
|
||||
justify-content: flex-start;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: #0C0C0C;
|
||||
padding: 0;
|
||||
background: url(/assets/images/icons/company-arrow.svg) no-repeat 100% 50%;
|
||||
|
||||
&[data-selected="false"] {
|
||||
color: var(--text_not_active);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown_list {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 412px;
|
||||
display: none;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.16);
|
||||
padding: 25px 35px;
|
||||
z-index: 9;
|
||||
|
||||
&.opened {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.list_item {
|
||||
position: relative;
|
||||
padding-bottom: 16px;
|
||||
margin-bottom: 16px;
|
||||
border-bottom: 1px solid var(--inactive);
|
||||
|
||||
label {
|
||||
font-weight: 700;
|
||||
padding-left: 0;
|
||||
padding-right: 30px;
|
||||
line-height: 23px;
|
||||
|
||||
&:before {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.table_header {
|
||||
.table_cell {
|
||||
color: #8E94A7;
|
||||
font-weight: 700;
|
||||
border: 0;
|
||||
|
||||
&:last-child {
|
||||
border-left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.editable {
|
||||
.table_row {
|
||||
.table_cell {
|
||||
&:last-child {
|
||||
border: 1px solid #EDEFF5;
|
||||
|
||||
button {
|
||||
pointer-events: all;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
201
pages/settings/index.js
Normal file
201
pages/settings/index.js
Normal file
@ -0,0 +1,201 @@
|
||||
import React from "react";
|
||||
import Head from 'next/head';
|
||||
import Image from 'next/image';
|
||||
import Link from "next/link";
|
||||
import cookie from 'cookie';
|
||||
import { connect } from "react-redux";
|
||||
import numeral from "numeral";
|
||||
import pluralize from 'pluralize-ru';
|
||||
import { SpinnerCircular } from 'spinners-react';
|
||||
|
||||
import { withRouter } from 'next/router';
|
||||
import { reduxWrapper } from '../../store';
|
||||
|
||||
import InnerMenu from "./components/InnerMenu";
|
||||
import Header from '../components/Header';
|
||||
import Footer from '../components/Footer';
|
||||
import Pagination from '../components/Pagination';
|
||||
import Company from "../components/Company";
|
||||
|
||||
import { sendPhoneChangeNumber, sendPhoneChangeNumberSmsCode, setUserPhone } from '../../actions';
|
||||
|
||||
class IndexPage extends React.Component
|
||||
{
|
||||
constructor(props)
|
||||
{
|
||||
super(props);
|
||||
this.state = {
|
||||
|
||||
user: {},
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState)
|
||||
{
|
||||
return {
|
||||
user: nextProps.user,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
render()
|
||||
{
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Head>
|
||||
<title>ЛК Эволюция автолизинга</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="ЛК Эволюция автолизинга"
|
||||
/>
|
||||
</Head>
|
||||
<Header { ...this.props }/>
|
||||
<main>
|
||||
<section>
|
||||
<div className="clear"></div>
|
||||
<div className="container">
|
||||
<div className="title_wrapper">
|
||||
<div className="left">
|
||||
<h1 className="section_title">Личный кабинет</h1>
|
||||
</div>
|
||||
<Company/>
|
||||
</div>
|
||||
<div className="aside_container about">
|
||||
<InnerMenu { ...this.props }/>
|
||||
<article>
|
||||
<div className="settings_user_control">
|
||||
<p>Настройки доступа к личному кабинету</p>
|
||||
|
||||
<div>
|
||||
<button className="button button-blue">Добавить пользователя</button>
|
||||
<button className="button button-blue">Редактировать</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings_table editable">
|
||||
<div className="table_header table_row">
|
||||
<div className="table_cell">ФИО пользователя</div>
|
||||
<div className="table_cell">Почта</div>
|
||||
<div className="table_cell">Роль</div>
|
||||
<div className="table_cell">Доступные организации</div>
|
||||
<div className="table_cell">Статус</div>
|
||||
<div className="table_cell"></div>
|
||||
</div>
|
||||
|
||||
<div className="table_row">
|
||||
<div className="table_cell">Иванов Иван Иванович</div>
|
||||
<div className="table_cell">iivanov@mail.com</div>
|
||||
<div className="table_cell">Администратор</div>
|
||||
<div className="table_cell">Все организации</div>
|
||||
<div className="table_cell">Активен</div>
|
||||
<div className="table_cell">
|
||||
<button className="delete_user" title="Удалить пользователя"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="table_row">
|
||||
<div className="table_cell">Иванов Иван Иванович</div>
|
||||
<div className="table_cell">iivanov@mail.com</div>
|
||||
<div className="table_cell">Администратор</div>
|
||||
<div className="table_cell">Все организации</div>
|
||||
<div className="table_cell">Активен</div>
|
||||
<div className="table_cell">
|
||||
<button className="delete_user" title="Удалить пользователя"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table_row editable">
|
||||
<div className="table_cell">
|
||||
<input type="text" placeholder="Введите ФИО" />
|
||||
</div>
|
||||
<div className="table_cell">
|
||||
<input type="email" placeholder="Введите почту" />
|
||||
</div>
|
||||
<div className="table_cell">Пользователь</div>
|
||||
<div className="table_cell">
|
||||
<button className="settings_dropdown" data-selected="false">Выберите организацию</button>
|
||||
<div className="dropdown_list opened">
|
||||
<div className="list_item">
|
||||
<input type="checkbox" value="" name="companies_list" id="company_1" hidden />
|
||||
<label htmlFor="company_1">
|
||||
Все организации
|
||||
</label>
|
||||
</div>
|
||||
<div className="list_item">
|
||||
<input type="checkbox" value="" name="companies_list" id="company_2" hidden />
|
||||
<label htmlFor="company_2">
|
||||
ООО “Еще одно название”
|
||||
<span>ИНН: 12345678765 КПП: 13432-02</span>
|
||||
</label>
|
||||
</div>
|
||||
<div className="list_item">
|
||||
<input type="checkbox" value="" name="companies_list" id="company_3" hidden />
|
||||
<label htmlFor="company_3">
|
||||
ООО “Друзья и КО”
|
||||
<span>ИНН: 12345678765 КПП: 13432-02</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="table_cell">-</div>
|
||||
<div className="table_cell">
|
||||
<button className="delete_user" title="Удалить пользователя"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer/>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
function mapStateToProps(state, ownProps)
|
||||
{
|
||||
return {
|
||||
user: state.user,
|
||||
}
|
||||
}
|
||||
|
||||
export const getServerSideProps = reduxWrapper.getServerSideProps(store =>
|
||||
async ({ req, res, query }) =>
|
||||
{
|
||||
let props = {};
|
||||
|
||||
if(req.headers.cookie !== undefined)
|
||||
{
|
||||
const cookies = cookie.parse(req.headers?.cookie ? req.headers?.cookie : "");
|
||||
|
||||
if(cookies.jwt === undefined || cookies.jwt === null)
|
||||
{
|
||||
res.statusCode = 302;
|
||||
res.setHeader('Location', `/login`);
|
||||
}
|
||||
else
|
||||
{
|
||||
//const tokenValid = await checkToken(cookies.jwt);
|
||||
const tokenValid = true;
|
||||
if(!tokenValid)
|
||||
{
|
||||
res.statusCode = 302;
|
||||
res.setHeader('Location', `/login`);
|
||||
}
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
res.statusCode = 302;
|
||||
res.setHeader('Location', `/login`);
|
||||
}
|
||||
|
||||
return { props: props };
|
||||
}
|
||||
);
|
||||
|
||||
export default withRouter(connect(mapStateToProps)(IndexPage));
|
||||
7
public/assets/images/icons/icon-delete.svg
Normal file
7
public/assets/images/icons/icon-delete.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.5 3.5L2.5 3.50001" stroke="#A8026B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.5 6.5V10.5" stroke="#A8026B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.5 6.5V10.5" stroke="#A8026B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.5 3.5V13C12.5 13.1326 12.4473 13.2598 12.3536 13.3536C12.2598 13.4473 12.1326 13.5 12 13.5H4C3.86739 13.5 3.74021 13.4473 3.64645 13.3536C3.55268 13.2598 3.5 13.1326 3.5 13V3.5" stroke="#A8026B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.5 3.5V2.5C10.5 2.23478 10.3946 1.98043 10.2071 1.79289C10.0196 1.60536 9.76522 1.5 9.5 1.5H6.5C6.23478 1.5 5.98043 1.60536 5.79289 1.79289C5.60536 1.98043 5.5 2.23478 5.5 2.5V3.5" stroke="#A8026B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 982 B |
Loading…
x
Reference in New Issue
Block a user