mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
fixed input appearance
This commit is contained in:
Fedor Katurov
parent
a90285a4ac
commit
93e7b05ddf
4 changed files with 102 additions and 65 deletions
|
|
@ -1,46 +1,53 @@
|
|||
import React, { FC, useState, useEffect, useCallback } from 'react';
|
||||
import styles from './styles.scss';
|
||||
import { connect } from 'react-redux';
|
||||
import classNames from 'classnames';
|
||||
import { selectAuthUser, selectAuthProfile } from '~/redux/auth/selectors';
|
||||
import { Textarea } from '~/components/input/Textarea';
|
||||
import { Button } from '~/components/input/Button';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { Filler } from '~/components/containers/Filler';
|
||||
import { TextInput } from '~/components/input/TextInput';
|
||||
import { InputText } from '~/components/input/InputText';
|
||||
import reject from 'ramda/es/reject';
|
||||
import * as AUTH_ACTIONS from '~/redux/auth/actions';
|
||||
import { ERROR_LITERAL } from '~/constants/errors';
|
||||
import React, { FC, useState, useEffect, useCallback } from "react";
|
||||
import styles from "./styles.scss";
|
||||
import { connect } from "react-redux";
|
||||
import classNames from "classnames";
|
||||
import { selectAuthUser, selectAuthProfile } from "~/redux/auth/selectors";
|
||||
import { Textarea } from "~/components/input/Textarea";
|
||||
import { Button } from "~/components/input/Button";
|
||||
import { Group } from "~/components/containers/Group";
|
||||
import { Filler } from "~/components/containers/Filler";
|
||||
import { TextInput } from "~/components/input/TextInput";
|
||||
import { InputText } from "~/components/input/InputText";
|
||||
import reject from "ramda/es/reject";
|
||||
import * as AUTH_ACTIONS from "~/redux/auth/actions";
|
||||
import { ERROR_LITERAL } from "~/constants/errors";
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
user: selectAuthUser(state),
|
||||
profile: selectAuthProfile(state),
|
||||
profile: selectAuthProfile(state)
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
authPatchUser: AUTH_ACTIONS.authPatchUser,
|
||||
authPatchUser: AUTH_ACTIONS.authPatchUser
|
||||
};
|
||||
|
||||
type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
|
||||
type IProps = ReturnType<typeof mapStateToProps> &
|
||||
typeof mapDispatchToProps & {};
|
||||
|
||||
const ProfileSettingsUnconnected: FC<IProps> = ({
|
||||
user,
|
||||
authPatchUser,
|
||||
profile: { patch_errors },
|
||||
profile: { patch_errors }
|
||||
}) => {
|
||||
const [password, setPassword] = useState('');
|
||||
const [new_password, setNewPassword] = useState('');
|
||||
const [password, setPassword] = useState("");
|
||||
const [new_password, setNewPassword] = useState("");
|
||||
|
||||
const [data, setData] = useState(user);
|
||||
|
||||
const setDescription = useCallback(description => setData({ ...data, description }), [
|
||||
data,
|
||||
setData,
|
||||
]);
|
||||
const setDescription = useCallback(
|
||||
description => setData({ ...data, description }),
|
||||
[data, setData]
|
||||
);
|
||||
|
||||
const setEmail = useCallback(email => setData({ ...data, email }), [data, setData]);
|
||||
const setUsername = useCallback(username => setData({ ...data, username }), [data, setData]);
|
||||
const setEmail = useCallback(email => setData({ ...data, email }), [
|
||||
data,
|
||||
setData
|
||||
]);
|
||||
const setUsername = useCallback(username => setData({ ...data, username }), [
|
||||
data,
|
||||
setData
|
||||
]);
|
||||
|
||||
const onSubmit = useCallback(
|
||||
event => {
|
||||
|
|
@ -51,7 +58,7 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
|
|||
username: data.username !== user.username && data.username,
|
||||
password: password.length > 0 && password,
|
||||
new_password: new_password.length > 0 && new_password,
|
||||
description: data.description !== user.description && data.description,
|
||||
description: data.description !== user.description && data.description
|
||||
});
|
||||
|
||||
if (Object.values(fields).length === 0) return;
|
||||
|
|
@ -64,11 +71,15 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
|
|||
return (
|
||||
<form className={styles.wrap} onSubmit={onSubmit}>
|
||||
<Group>
|
||||
<Textarea value={data.description} handler={setDescription} title="Описание" />
|
||||
<Textarea
|
||||
value={data.description}
|
||||
handler={setDescription}
|
||||
title="Описание"
|
||||
/>
|
||||
|
||||
<div className={styles.small}>
|
||||
Описание будет видно на странице профиля. Здесь работают те же правила оформления, что и в
|
||||
комментариях.
|
||||
Описание будет видно на странице профиля. Здесь работают те же правила
|
||||
оформления, что и в комментариях.
|
||||
</div>
|
||||
|
||||
<Group className={styles.pad}>
|
||||
|
|
@ -76,17 +87,27 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
|
|||
value={data.username}
|
||||
handler={setUsername}
|
||||
title="Логин"
|
||||
error={patch_errors.username && ERROR_LITERAL[patch_errors.username]}
|
||||
error={
|
||||
patch_errors.username && ERROR_LITERAL[patch_errors.username]
|
||||
}
|
||||
/>
|
||||
|
||||
<InputText value={data.email} handler={setEmail} title="E-mail" />
|
||||
<InputText
|
||||
value={data.email}
|
||||
handler={setEmail}
|
||||
title="E-mail"
|
||||
error={patch_errors.email && ERROR_LITERAL[patch_errors.email]}
|
||||
/>
|
||||
|
||||
<InputText
|
||||
value={new_password}
|
||||
handler={setNewPassword}
|
||||
title="Новый пароль"
|
||||
type="password"
|
||||
error={patch_errors.new_password && ERROR_LITERAL[patch_errors.new_password]}
|
||||
error={
|
||||
patch_errors.new_password &&
|
||||
ERROR_LITERAL[patch_errors.new_password]
|
||||
}
|
||||
/>
|
||||
|
||||
<div />
|
||||
|
|
@ -96,7 +117,9 @@ const ProfileSettingsUnconnected: FC<IProps> = ({
|
|||
handler={setPassword}
|
||||
title="Старый пароль"
|
||||
type="password"
|
||||
error={patch_errors.password && ERROR_LITERAL[patch_errors.password]}
|
||||
error={
|
||||
patch_errors.password && ERROR_LITERAL[patch_errors.password]
|
||||
}
|
||||
/>
|
||||
|
||||
<div className={styles.small}>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,35 @@
|
|||
export const ERRORS = {
|
||||
NOT_AN_EMAIL: 'Not_An_Email',
|
||||
TOO_SHIRT: 'Is_Too_Shirt',
|
||||
EMPTY_RESPONSE: 'Empty_Response',
|
||||
NO_COMMENTS: 'No_Comments',
|
||||
FILES_REQUIRED: 'Files_Required',
|
||||
TEXT_REQUIRED: 'Text_Required',
|
||||
UNKNOWN_NODE_TYPE: 'Unknown_Node_Type',
|
||||
URL_INVALID: 'Url_Invalid',
|
||||
FILES_AUDIO_REQUIRED: 'Files_Audio_Required',
|
||||
NOT_ENOUGH_RIGHTS: 'Not_Enough_Rights',
|
||||
INCORRECT_DATA: 'Incorrect_Data',
|
||||
NOT_AN_EMAIL: "Not_An_Email",
|
||||
TOO_SHIRT: "Is_Too_Shirt",
|
||||
EMPTY_RESPONSE: "Empty_Response",
|
||||
NO_COMMENTS: "No_Comments",
|
||||
FILES_REQUIRED: "Files_Required",
|
||||
TEXT_REQUIRED: "Text_Required",
|
||||
UNKNOWN_NODE_TYPE: "Unknown_Node_Type",
|
||||
URL_INVALID: "Url_Invalid",
|
||||
FILES_AUDIO_REQUIRED: "Files_Audio_Required",
|
||||
NOT_ENOUGH_RIGHTS: "Not_Enough_Rights",
|
||||
INCORRECT_DATA: "Incorrect_Data",
|
||||
IMAGE_CONVERSION_FAILED: "Image_Conversion_Failed",
|
||||
USER_NOT_FOUND: "User_Not_found",
|
||||
USER_EXIST: "User_Exist",
|
||||
INCORRECT_PASSWORD: "Incorrect_Password"
|
||||
};
|
||||
|
||||
export const ERROR_LITERAL = {
|
||||
[ERRORS.NOT_AN_EMAIL]: 'Введите правильный e-mail',
|
||||
[ERRORS.TOO_SHIRT]: 'Слишком короткий',
|
||||
[ERRORS.NO_COMMENTS]: 'Комментариев пока нет',
|
||||
[ERRORS.EMPTY_RESPONSE]: 'Пустой ответ сервера',
|
||||
[ERRORS.FILES_REQUIRED]: 'Добавьте файлы',
|
||||
[ERRORS.TEXT_REQUIRED]: 'Нужно немного текста',
|
||||
[ERRORS.UNKNOWN_NODE_TYPE]: 'Неизвестный тип поста',
|
||||
[ERRORS.URL_INVALID]: 'Неизвестный адрес',
|
||||
[ERRORS.FILES_AUDIO_REQUIRED]: 'Нужна хотя бы одна песня',
|
||||
[ERRORS.NOT_ENOUGH_RIGHTS]: 'У вас недостаточно прав',
|
||||
[ERRORS.INCORRECT_DATA]: 'Недопустимые данные',
|
||||
[ERRORS.NOT_AN_EMAIL]: "Введите правильный e-mail",
|
||||
[ERRORS.TOO_SHIRT]: "Слишком короткий",
|
||||
[ERRORS.NO_COMMENTS]: "Комментариев пока нет",
|
||||
[ERRORS.EMPTY_RESPONSE]: "Пустой ответ сервера",
|
||||
[ERRORS.FILES_REQUIRED]: "Добавьте файлы",
|
||||
[ERRORS.TEXT_REQUIRED]: "Нужно немного текста",
|
||||
[ERRORS.UNKNOWN_NODE_TYPE]: "Неизвестный тип поста",
|
||||
[ERRORS.URL_INVALID]: "Неизвестный адрес",
|
||||
[ERRORS.FILES_AUDIO_REQUIRED]: "Нужна хотя бы одна песня",
|
||||
[ERRORS.NOT_ENOUGH_RIGHTS]: "У вас недостаточно прав",
|
||||
[ERRORS.INCORRECT_DATA]: "Недопустимые данные",
|
||||
[ERRORS.IMAGE_CONVERSION_FAILED]: "Не удалось изменить изображение",
|
||||
[ERRORS.USER_NOT_FOUND]: "Пользователь не найден",
|
||||
[ERRORS.USER_EXIST]: "Такой пользователь уже существует",
|
||||
[ERRORS.INCORRECT_PASSWORD]: "Неправильный пароль"
|
||||
};
|
||||
|
|
|
|||
|
|
@ -13,8 +13,12 @@
|
|||
background: $input_bg_color;
|
||||
|
||||
&::before {
|
||||
content: ' ';
|
||||
background: linear-gradient(270deg, $input_bg_color $gap, transparentize($input_bg_color, 1));
|
||||
content: " ";
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
$input_bg_color $gap,
|
||||
transparentize($input_bg_color, 1)
|
||||
);
|
||||
position: absolute;
|
||||
width: $gap * 2;
|
||||
height: $input_height;
|
||||
|
|
@ -94,7 +98,7 @@
|
|||
|
||||
&.required {
|
||||
&::after {
|
||||
content: ' ';
|
||||
content: " ";
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -129,7 +133,7 @@
|
|||
}
|
||||
|
||||
.title {
|
||||
padding-right: 40px;
|
||||
// padding-right: 40px;
|
||||
}
|
||||
|
||||
&.focused {
|
||||
|
|
@ -259,11 +263,11 @@
|
|||
.title {
|
||||
font: $font;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
left: 6px;
|
||||
// width: 100%;
|
||||
top: 12px;
|
||||
bottom: auto;
|
||||
padding: 0 16px;
|
||||
padding: 0 4px;
|
||||
box-sizing: border-box;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -273,6 +277,7 @@
|
|||
touch-action: none;
|
||||
color: transparentize(white, 0.3);
|
||||
text-transform: capitalize;
|
||||
background: $input_bg_color;
|
||||
|
||||
span {
|
||||
font: $font;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue