From c766a3aabba6fda6d9e7e13e39f8780226989fe6 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Wed, 10 Jul 2019 18:58:52 +0300
Subject: login wip
---
vnext/src/ui/Login.css | 103 ++++++++++++++++++++++++++++++++++++++++++++
vnext/src/ui/Login.js | 92 +++++++++++++++++++++++++++++++++++++++
vnext/src/ui/LoginButton.js | 90 --------------------------------------
vnext/src/ui/Modal.css | 95 ----------------------------------------
vnext/src/ui/Modal.js | 29 -------------
5 files changed, 195 insertions(+), 214 deletions(-)
create mode 100644 vnext/src/ui/Login.css
create mode 100644 vnext/src/ui/Login.js
delete mode 100644 vnext/src/ui/LoginButton.js
delete mode 100644 vnext/src/ui/Modal.css
delete mode 100644 vnext/src/ui/Modal.js
(limited to 'vnext/src/ui')
diff --git a/vnext/src/ui/Login.css b/vnext/src/ui/Login.css
new file mode 100644
index 00000000..30f107f5
--- /dev/null
+++ b/vnext/src/ui/Login.css
@@ -0,0 +1,103 @@
+@custom-media --viewport-desktop (width >=62.5rem);
+
+#dialogt {
+ height: 100%;
+ left: 0;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(0, 0, 0, 0.3);
+}
+#dialogw {
+ z-index: 11;
+ max-width: 96%;
+ max-height: calc(100% - 100px);
+ background-color: #fff;
+}
+#dialogw a {
+ display: block;
+}
+#dialogw img {
+ max-height: 100%;
+ max-height: 90vh;
+ max-width: 100%;
+}
+#dialog_header {
+ width: 100%;
+ height: 44px;
+ display: flex;
+ flex-direction: row-reverse;
+ align-items: center;
+}
+.header_image {
+ background: rgba(0, 0, 0, 0.28);
+}
+#dialogc {
+ cursor: pointer;
+ color: #ccc;
+ padding-right: 6px;
+}
+.dialoglogin {
+ background: #fff;
+ padding: 25px;
+ margin: 0 auto;
+}
+@media (--viewport-desktop) {
+ .dialoglogin {
+ width: 300px;
+ }
+}
+.dialog-opened {
+ overflow: hidden;
+}
+#signemail,
+#signfb,
+#signvk {
+ display: block;
+ line-height: 32px;
+ margin: 10px 0;
+ text-decoration: none;
+ width: 100%;
+}
+#signvk {
+ margin-bottom: 30px;
+}
+.dialoglogin form {
+ margin-top: 7px;
+}
+.signinput,
+.signsubmit {
+ border: 1px solid #CCC;
+ margin: 3px 0;
+ padding: 3px;
+}
+.signsubmit {
+ width: 70px;
+}
+.dialogshare {
+ background: #fff;
+ min-width: 300px;
+ overflow: auto;
+ padding: 20px;
+}
+.dialogl {
+ background: #fff;
+ border: 1px solid #DDD;
+ margin: 3px 0 20px;
+ padding: 5px;
+}
+.dialogshare li {
+ float: left;
+ margin: 5px 10px 0 0;
+}
+.dialogshare a {
+ display: block;
+}
+.dialogtxt {
+ background: #fff;
+ padding: 20px;
+}
diff --git a/vnext/src/ui/Login.js b/vnext/src/ui/Login.js
new file mode 100644
index 00000000..649fadd4
--- /dev/null
+++ b/vnext/src/ui/Login.js
@@ -0,0 +1,92 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import ReactRouterPropTypes from 'react-router-prop-types';
+import { withRouter } from 'react-router-dom';
+
+import { UserType } from './Types';
+import Icon from './Icon';
+import Button from './Button';
+import Input from './Input';
+import { useFormState } from 'react-use-form-state';
+
+import { me, facebookLink, vkLink } from '../api';
+
+import './Login.css';
+
+function Login({ visitor, history, location, onAuth }) {
+
+ useEffect(() => {
+ if (visitor.hash) {
+ const {retpath } = location.state;
+ console.log(retpath);
+ history.push(retpath || '/');
+ }
+ }, [history, location.state, visitor]);
+
+ const [formState, { text, password }] = useFormState();
+
+ let onSubmit = (event) => {
+ event.preventDefault();
+ me(formState.values.username, formState.values.password)
+ .then(response => {
+ onAuth(response);
+ }
+ ).catch(ex => {
+ console.log(ex);
+ });
+ };
+ return (
+
+
+
Please, introduce yourself:
+
+
Already registered?
+
+
+
+ );
+}
+
+export default withRouter(Login);
+
+Login.propTypes = {
+ visitor: UserType,
+ history: ReactRouterPropTypes.history.isRequired,
+ location: ReactRouterPropTypes.location,
+ onAuth: PropTypes.func
+};
+
+const socialButtonsStyle = {
+ display: 'flex',
+ justifyContent: 'space-evenly',
+ padding: '4px'
+};
+
+const facebookButtonStyle = {
+ color: '#fff',
+ padding: '2px 14px',
+ background: '#3b5998'
+};
+
+const vkButtonStyle = {
+ color: '#fff',
+ padding: '2px 14px',
+ background: '#4c75a3'
+};
diff --git a/vnext/src/ui/LoginButton.js b/vnext/src/ui/LoginButton.js
deleted file mode 100644
index cd26252e..00000000
--- a/vnext/src/ui/LoginButton.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import Icon from './Icon';
-import Modal from './Modal';
-import Button from './Button';
-import Input from './Input';
-import { useFormState } from 'react-use-form-state';
-
-import { me, facebookLink, vkLink } from '../api';
-
-function LoginButton({ onAuth, title }) {
- const [open, setOpen] = useState(false);
- const [formState, { text, password }] = useFormState();
-
- let onToggle = (event) => {
- if (event) {
- event.preventDefault();
- }
- setOpen(!open);
- };
- let onSubmit = (event) => {
- event.preventDefault();
- me(formState.values.username, formState.values.password)
- .then(response => {
- onToggle();
- onAuth(response);
- }
- ).catch(ex => {
- console.log(ex);
- });
- };
- return (
- <>
-
-
- {title}
-
-
-
-
Please, introduce yourself:
-
-
Already registered?
-
-
-
- >
- );
-}
-
-LoginButton.propTypes = {
- title: PropTypes.string.isRequired,
- onAuth: PropTypes.func.isRequired
-};
-
-const socialButtonsStyle = {
- display: 'flex',
- justifyContent: 'space-evenly',
- padding: '4px'
-};
-
-const facebookButtonStyle = {
- color: '#fff',
- padding: '2px 14px',
- background: '#3b5998'
-};
-
-const vkButtonStyle = {
- color: '#fff',
- padding: '2px 14px',
- background: '#4c75a3'
-};
-
-export default LoginButton;
diff --git a/vnext/src/ui/Modal.css b/vnext/src/ui/Modal.css
deleted file mode 100644
index 931b9d81..00000000
--- a/vnext/src/ui/Modal.css
+++ /dev/null
@@ -1,95 +0,0 @@
-#dialogt {
- height: 100%;
- left: 0;
- position: fixed;
- top: 0;
- width: 100%;
- z-index: 10;
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: rgba(0, 0, 0, 0.3);
-}
-#dialogw {
- z-index: 11;
- max-width: 96%;
- max-height: calc(100% - 100px);
- background-color: #fff;
-}
-#dialogw a {
- display: block;
-}
-#dialogw img {
- max-height: 100%;
- max-height: 90vh;
- max-width: 100%;
-}
-#dialog_header {
- width: 100%;
- height: 44px;
- display: flex;
- flex-direction: row-reverse;
- align-items: center;
-}
-.header_image {
- background: rgba(0, 0, 0, 0.28);
-}
-#dialogc {
- cursor: pointer;
- color: #ccc;
- padding-right: 6px;
-}
-.dialoglogin {
- background: #fff;
- padding: 25px;
-}
-.dialog-opened {
- overflow: hidden;
-}
-#signemail,
-#signfb,
-#signvk {
- display: block;
- line-height: 32px;
- margin: 10px 0;
- text-decoration: none;
- width: 100%;
-}
-#signvk {
- margin-bottom: 30px;
-}
-.dialoglogin form {
- margin-top: 7px;
-}
-.signinput,
-.signsubmit {
- border: 1px solid #CCC;
- margin: 3px 0;
- padding: 3px;
-}
-.signsubmit {
- width: 70px;
-}
-.dialogshare {
- background: #fff;
- min-width: 300px;
- overflow: auto;
- padding: 20px;
-}
-.dialogl {
- background: #fff;
- border: 1px solid #DDD;
- margin: 3px 0 20px;
- padding: 5px;
-}
-.dialogshare li {
- float: left;
- margin: 5px 10px 0 0;
-}
-.dialogshare a {
- display: block;
-}
-.dialogtxt {
- background: #fff;
- padding: 20px;
-}
diff --git a/vnext/src/ui/Modal.js b/vnext/src/ui/Modal.js
deleted file mode 100644
index 799a6f35..00000000
--- a/vnext/src/ui/Modal.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Icon from './Icon';
-
-import './Modal.css';
-
-function Modal(props) {
- return props.show ? (
-
-
-
- {props.children}
-
-
- ) : (null);
-}
-
-export default React.memo(Modal);
-
-Modal.propTypes = {
- onClose: PropTypes.func.isRequired,
- show: PropTypes.bool,
- children: PropTypes.node
-};
--
cgit v1.2.3