mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
started creating login register dialog
This commit is contained in:
parent
ff8ecba6db
commit
70e08b286d
7 changed files with 42 additions and 10 deletions
10
src/components/dialogs/DialogTitle/index.tsx
Normal file
10
src/components/dialogs/DialogTitle/index.tsx
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
import React, { FC, ReactNode } from 'react';
|
||||||
|
import styles from './styles.scss';
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const DialogTitle: FC<IProps> = ({ children }) => <h2 className={styles.title}>{children}</h2>;
|
||||||
|
|
||||||
|
export { DialogTitle };
|
4
src/components/dialogs/DialogTitle/styles.scss
Normal file
4
src/components/dialogs/DialogTitle/styles.scss
Normal file
|
@ -0,0 +1,4 @@
|
||||||
|
.title {
|
||||||
|
margin: $gap 0 $gap * 4 !important;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
|
@ -17,6 +17,7 @@ import { ISocialProvider } from '~/redux/auth/types';
|
||||||
import pick from 'ramda/es/pick';
|
import pick from 'ramda/es/pick';
|
||||||
import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
|
import { LoginDialogButtons } from '~/containers/dialogs/LoginDialogButtons';
|
||||||
import { IOAuthEvent, OAUTH_EVENT_TYPES } from '~/redux/types';
|
import { IOAuthEvent, OAUTH_EVENT_TYPES } from '~/redux/types';
|
||||||
|
import { DialogTitle } from '~/components/dialogs/DialogTitle';
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
...pick(['error', 'is_registering'], selectAuthLogin(state)),
|
...pick(['error', 'is_registering'], selectAuthLogin(state)),
|
||||||
|
@ -103,7 +104,7 @@ const LoginDialogUnconnected: FC<IProps> = ({
|
||||||
<Padder>
|
<Padder>
|
||||||
<div className={styles.wrap}>
|
<div className={styles.wrap}>
|
||||||
<Group>
|
<Group>
|
||||||
<h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
|
<DialogTitle>Решительно войти</DialogTitle>
|
||||||
|
|
||||||
<InputText title="Логин" handler={setUserName} value={username} autoFocus />
|
<InputText title="Логин" handler={setUserName} value={username} autoFocus />
|
||||||
|
|
||||||
|
|
|
@ -12,10 +12,6 @@ $vk_color: $secondary_color;
|
||||||
button {
|
button {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
|
||||||
margin: $gap 0 $gap * 4 !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.secondary_button {
|
.secondary_button {
|
||||||
|
|
|
@ -1,16 +1,35 @@
|
||||||
import React, { FC } from 'react';
|
import React, { FC, useState } from 'react';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { IDialogProps } from '~/redux/modal/constants';
|
import { IDialogProps } from '~/redux/modal/constants';
|
||||||
import { BetterScrollDialog } from '~/containers/dialogs/BetterScrollDialog';
|
import { BetterScrollDialog } from '~/containers/dialogs/BetterScrollDialog';
|
||||||
|
import { Padder } from '~/components/containers/Padder';
|
||||||
|
import { DialogTitle } from '~/components/dialogs/DialogTitle';
|
||||||
|
import { Group } from '~/components/containers/Group';
|
||||||
|
import { InputText } from '~/components/input/InputText';
|
||||||
|
import styles from './styles.scss';
|
||||||
|
|
||||||
const mapStateToProps = () => ({});
|
const mapStateToProps = () => ({});
|
||||||
const mapDispatchToProps = {};
|
const mapDispatchToProps = {};
|
||||||
|
|
||||||
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
|
type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {};
|
||||||
|
|
||||||
const LoginSocialRegisterDialogUnconnected: FC<Props> = ({ onRequestClose }) => (
|
const LoginSocialRegisterDialogUnconnected: FC<Props> = ({ onRequestClose }) => {
|
||||||
<BetterScrollDialog onClose={onRequestClose}>NEEDS REGISTER!</BetterScrollDialog>
|
const [username, setUsername] = useState('');
|
||||||
);
|
|
||||||
|
return (
|
||||||
|
<BetterScrollDialog onClose={onRequestClose} width={300}>
|
||||||
|
<Padder>
|
||||||
|
<div className={styles.wrap}>
|
||||||
|
<Group>
|
||||||
|
<DialogTitle>Добро пожаловать в семью!</DialogTitle>
|
||||||
|
<InputText handler={setUsername} value={username} title="Юзернэйм" />
|
||||||
|
<InputText handler={setUsername} value={username} title="Пароль" type="password" />
|
||||||
|
</Group>
|
||||||
|
</div>
|
||||||
|
</Padder>
|
||||||
|
</BetterScrollDialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const LoginSocialRegisterDialog = connect(
|
const LoginSocialRegisterDialog = connect(
|
||||||
mapStateToProps,
|
mapStateToProps,
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
.wrap {
|
||||||
|
padding: $gap $gap 30px $gap;
|
||||||
|
}
|
|
@ -217,6 +217,5 @@ export type IOAuthEvent = {
|
||||||
payload: {
|
payload: {
|
||||||
token: string;
|
token: string;
|
||||||
error: string;
|
error: string;
|
||||||
needs_register: boolean;
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue