@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
51 lines • 3.08 kB
JavaScript
import * as Gql from './gql';
import React from 'react';
import { Segment, Form, Button, Message } from 'semantic-ui-react';
import useReactRouter from 'use-react-router';
import { useMergeState, css } from '../../common';
import { Context } from '../../context';
const loginSegment = css `
margin: 16px !important;
`;
const buttonRow = css `
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center;
`;
const Login = () => {
const [state, changeState] = useMergeState({
login: true,
email: '',
password: '',
name: '',
error: false
});
const ctx = React.useContext(Context);
const { login, email, password, name } = state;
const { history } = useReactRouter();
const saveUserData = (ctx, token) => {
localStorage.setItem(ctx.authToken, token);
};
const confirm = async (ctx, data) => {
const login = state.login ? data.login : data.signup;
ctx.auth.user = login.user;
saveUserData(ctx, login.token);
history.push(`/`);
changeState({ error: false });
};
console.log(state.error);
return (React.createElement(Segment, { className: 'ui form ' + loginSegment },
React.createElement(Form, null,
React.createElement("h4", { className: "mv3" }, login ? 'Login' : 'Sign Up'),
state.error && React.createElement(Message, { color: "red", content: "Incorrect user name or password!" }),
React.createElement("div", { className: "flex flex-column" },
!login && (React.createElement(Form.Input, { label: "Full Name", value: name, onChange: e => changeState({ name: e.target.value }), type: "text", placeholder: "Your name" })),
React.createElement(Form.Input, { label: "Email", value: email, onChange: e => changeState({ email: e.target.value }), type: "text", placeholder: "Your email address" }),
React.createElement(Form.Input, { label: "Password", value: password, onChange: e => changeState({ password: e.target.value }), type: "password", placeholder: "Choose a safe password" })),
React.createElement("div", { className: buttonRow },
login ? (React.createElement(Gql.LoginMutationComponent, { variables: { email, password }, onCompleted: data => confirm(ctx, data), onError: () => changeState({ error: true }) }, mutation => (React.createElement(Button, { primary: true, className: "pointer mr2 button", onClick: mutation }, login ? 'Login' : 'create account')))) : (React.createElement(Gql.SignupMutationComponent, { variables: { email, password, name }, onCompleted: data => confirm(ctx, data) }, mutation => (React.createElement(Button, { primary: true, className: "pointer mr2 button", onClick: mutation }, login ? 'Login' : 'create account')))),
React.createElement("div", { className: "pointer button", onClick: () => changeState({ login: !login }) }, login ? 'need to create an account?' : 'already have an account?')))));
};
export default Login;
//# sourceMappingURL=login.js.map