@tomino/dynamic-form-semantic-ui
Version:
Semantic UI form renderer based on dynamic form generation
54 lines • 3.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const Gql = tslib_1.__importStar(require("./gql"));
const react_1 = tslib_1.__importDefault(require("react"));
const semantic_ui_react_1 = require("semantic-ui-react");
const use_react_router_1 = tslib_1.__importDefault(require("use-react-router"));
const common_1 = require("../../common");
const context_1 = require("../../context");
const loginSegment = common_1.css `
margin: 16px !important;
`;
const buttonRow = common_1.css `
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center;
`;
const Login = () => {
const [state, changeState] = common_1.useMergeState({
login: true,
email: '',
password: '',
name: '',
error: false
});
const ctx = react_1.default.useContext(context_1.Context);
const { login, email, password, name } = state;
const { history } = use_react_router_1.default();
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_1.default.createElement(semantic_ui_react_1.Segment, { className: 'ui form ' + loginSegment },
react_1.default.createElement(semantic_ui_react_1.Form, null,
react_1.default.createElement("h4", { className: "mv3" }, login ? 'Login' : 'Sign Up'),
state.error && react_1.default.createElement(semantic_ui_react_1.Message, { color: "red", content: "Incorrect user name or password!" }),
react_1.default.createElement("div", { className: "flex flex-column" },
!login && (react_1.default.createElement(semantic_ui_react_1.Form.Input, { label: "Full Name", value: name, onChange: e => changeState({ name: e.target.value }), type: "text", placeholder: "Your name" })),
react_1.default.createElement(semantic_ui_react_1.Form.Input, { label: "Email", value: email, onChange: e => changeState({ email: e.target.value }), type: "text", placeholder: "Your email address" }),
react_1.default.createElement(semantic_ui_react_1.Form.Input, { label: "Password", value: password, onChange: e => changeState({ password: e.target.value }), type: "password", placeholder: "Choose a safe password" })),
react_1.default.createElement("div", { className: buttonRow },
login ? (react_1.default.createElement(Gql.LoginMutationComponent, { variables: { email, password }, onCompleted: data => confirm(ctx, data), onError: () => changeState({ error: true }) }, mutation => (react_1.default.createElement(semantic_ui_react_1.Button, { primary: true, className: "pointer mr2 button", onClick: mutation }, login ? 'Login' : 'create account')))) : (react_1.default.createElement(Gql.SignupMutationComponent, { variables: { email, password, name }, onCompleted: data => confirm(ctx, data) }, mutation => (react_1.default.createElement(semantic_ui_react_1.Button, { primary: true, className: "pointer mr2 button", onClick: mutation }, login ? 'Login' : 'create account')))),
react_1.default.createElement("div", { className: "pointer button", onClick: () => changeState({ login: !login }) }, login ? 'need to create an account?' : 'already have an account?')))));
};
exports.default = Login;
//# sourceMappingURL=login.js.map