muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 12:56:41 +07:00
Code Packages Activity Actions

fixed login dialog

Browse source
This commit is contained in:
Fedor Katurov 2019-11-15 16:16:28 +07:00
parent 430b39e977
commit c2e977e48f
4 changed files with 55 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/containers/dialogs/BetterScrollDialog/styles.scss
View file

@ -95,7 +95,11 @@
width: 100%; width: 100%;
height: 40px; height: 40px;
pointer-events: none; pointer-events: none;
background: linear-gradient($red, transparentize($red, 1)); background: linear-gradient(0deg, $red 50%, transparentize($red, 1));
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 0 $radius $radius;
} }
.backdrop { .backdrop {

71
src/containers/dialogs/LoginDialog/index.tsx
View file

@ -1,35 +1,37 @@
import React, { FC, FormEvent, useCallback, useEffect, useState } from 'react'; import React, { FC, FormEvent, useCallback, useEffect, useState } from "react";
import { connect } from 'react-redux'; import { connect } from "react-redux";
import { ScrollDialog } from '../ScrollDialog'; import { ScrollDialog } from "../ScrollDialog";
import { IDialogProps } from '~/redux/modal/constants'; import { IDialogProps } from "~/redux/modal/constants";
import { useCloseOnEscape } from '~/utils/hooks'; import { useCloseOnEscape } from "~/utils/hooks";
import { Group } from '~/components/containers/Group'; import { Group } from "~/components/containers/Group";
import { InputText } from '~/components/input/InputText'; import { InputText } from "~/components/input/InputText";
import { Button } from '~/components/input/Button'; import { Button } from "~/components/input/Button";
import { Padder } from '~/components/containers/Padder'; import { Padder } from "~/components/containers/Padder";
import * as styles from './styles.scss'; import * as styles from "./styles.scss";
import { selectAuthLogin } from '~/redux/auth/selectors'; import { selectAuthLogin } from "~/redux/auth/selectors";
import * as ACTIONS from '~/redux/auth/actions'; import * as ACTIONS from "~/redux/auth/actions";
import { API } from '~/constants/api'; import { API } from "~/constants/api";
import { BetterScrollDialog } from '../BetterScrollDialog'; import { BetterScrollDialog } from "../BetterScrollDialog";
const mapStateToProps = selectAuthLogin; const mapStateToProps = selectAuthLogin;
const mapDispatchToProps = { const mapDispatchToProps = {
userSendLoginRequest: ACTIONS.userSendLoginRequest, userSendLoginRequest: ACTIONS.userSendLoginRequest,
userSetLoginError: ACTIONS.userSetLoginError, userSetLoginError: ACTIONS.userSetLoginError
}; };
type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & IDialogProps & {}; type IProps = ReturnType<typeof mapStateToProps> &
typeof mapDispatchToProps &
IDialogProps & {};
const LoginDialogUnconnected: FC<IProps> = ({ const LoginDialogUnconnected: FC<IProps> = ({
onRequestClose, onRequestClose,
error, error,
userSendLoginRequest, userSendLoginRequest,
userSetLoginError, userSetLoginError
}) => { }) => {
const [username, setUserName] = useState(''); const [username, setUserName] = useState("");
const [password, setPassword] = useState(''); const [password, setPassword] = useState("");
const onSubmit = useCallback( const onSubmit = useCallback(
(event: FormEvent) => { (event: FormEvent) => {
@ -40,7 +42,7 @@ const LoginDialogUnconnected: FC<IProps> = ({
); );
const onSocialLogin = useCallback(() => { const onSocialLogin = useCallback(() => {
window.open(API.USER.VKONTAKTE_LOGIN, '', 'width=600,height=400'); window.open(API.USER.VKONTAKTE_LOGIN, "", "width=600,height=400");
}, []); }, []);
useEffect(() => { useEffect(() => {
@ -59,17 +61,38 @@ const LoginDialogUnconnected: FC<IProps> = ({
return ( return (
<form onSubmit={onSubmit}> <form onSubmit={onSubmit}>
<BetterScrollDialog width={260} error={error} onClose={onRequestClose} footer={buttons}> <BetterScrollDialog
width={260}
error={error}
onClose={onRequestClose}
footer={buttons}
>
<Padder> <Padder>
<div className={styles.wrap}> <div className={styles.wrap}>
<Group> <Group>
<h2>РЕШИТЕЛЬНО ВОЙТИ</h2> <h2>РЕШИТЕЛЬНО ВОЙТИ</h2>
<InputText title="Логин" handler={setUserName} value={username} autoFocus /> <InputText
<InputText title="Пароль" handler={setPassword} value={password} /> title="Логин"
handler={setUserName}
value={username}
autoFocus
/>
<InputText
title="Пароль"
handler={setPassword}
value={password}
type="password"
/>
<Group className={styles.buttons}> <Group className={styles.buttons}>
<Button className={styles.vk} iconLeft="vk" type="button" onClick={onSocialLogin}> <Button
className={styles.vk}
iconLeft="vk"
type="button"
onClick={onSocialLogin}
>
<span>Вконтакте</span> <span>Вконтакте</span>
</Button> </Button>
</Group> </Group>

2
src/containers/dialogs/LoginDialog/styles.scss
View file

@ -4,7 +4,7 @@ $vk_color: darken(desaturate($blue, 100%), 30%);
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
padding: $gap; padding: $gap $gap 30px $gap;
button { button {
text-align: left; text-align: left;

2
src/styles/colors.scss
View file

@ -1,3 +1,4 @@
// color 0, 0, 68 is pretty cool, btw
// $red: #ff3344; // $red: #ff3344;
$red: #ff3344; $red: #ff3344;
$yellow: #ffd60f; $yellow: #ffd60f;
@ -9,6 +10,7 @@ $olive: #8bc12a;
$orange: #ff7549; $orange: #ff7549;
$grass: #41800d; $grass: #41800d;
$wisegreen: #007962; $wisegreen: #007962;
// $wisegreen: #006868;
$red_gradient: linear-gradient(165deg, $orange -50%, $red 150%); $red_gradient: linear-gradient(165deg, $orange -50%, $red 150%);
$blue_gradient: linear-gradient(170deg, $green, $dark_blue); $blue_gradient: linear-gradient(170deg, $green, $dark_blue);