graft-react
Version:
react admin and helper components for graft-db
266 lines (265 loc) • 14.6 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t;
return { next: verb(0), "throw": verb(1), "return": verb(2) };
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) try {
if (f = 1, y && (t = y[op[0] & 2 ? "return" : op[0] ? "throw" : "next"]) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [0, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var React = require("react");
var Dialogs_1 = require("react-md/lib/Dialogs");
var TextFields_1 = require("react-md/lib/TextFields");
var FontIcons_1 = require("react-md/lib/FontIcons");
var LinearProgress_1 = require("react-md/lib/Progress/LinearProgress");
var Button_1 = require("react-md/lib/Buttons/Button");
var fetchfill = require("fetch-ponyfill");
var getFetchFill = fetchfill;
var fetch = getFetchFill().fetch;
var LoginMode;
(function (LoginMode) {
LoginMode[LoginMode["LOGIN"] = 1] = "LOGIN";
LoginMode[LoginMode["FORGOTTEN"] = 2] = "FORGOTTEN";
LoginMode[LoginMode["SIGNUP"] = 3] = "SIGNUP";
LoginMode[LoginMode["AUTHENTICATING"] = 4] = "AUTHENTICATING";
LoginMode[LoginMode["PASSWORD_RESET"] = 5] = "PASSWORD_RESET";
})(LoginMode || (LoginMode = {}));
;
var Login = (function (_super) {
__extends(Login, _super);
function Login() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
error: null,
username: '',
password: '',
reason: '',
remember: false,
mode: LoginMode.LOGIN,
};
_this.setUsername = function (username) {
_this.setState({ username: username });
};
_this.setPassword = function (password) {
_this.setState({ password: password });
};
_this.setRemember = function (remember) {
_this.setState({ remember: remember });
};
_this.setMode = function (mode) {
_this.setState({ mode: mode, error: null });
};
_this.handleKeyPress = function (e) {
if (e.key === 'Enter') {
_this.login();
}
};
_this.login = function () { return __awaiter(_this, void 0, void 0, function () {
var _this = this;
var onSuccess, _a, username, password, fail, res, err, e_1, msg, id_token, remember, e_2;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
onSuccess = this.props.onSuccess;
_a = this.state, username = _a.username, password = _a.password;
this.setState({ error: null, mode: LoginMode.AUTHENTICATING });
fail = function (msg) {
_this.setState({ error: msg });
};
_b.label = 1;
case 1:
_b.trys.push([1, 9, 10, 11]);
return [4 /*yield*/, fetch('https://oxdi.eu.auth0.com/oauth/ro', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
client_id: 'qPNYEyyvGTdn5QE7naGsJzeGpgImnxGq',
username: username,
password: password,
connection: 'Username-Password-Authentication',
grant_type: 'password',
scope: 'openid name email app_metadata',
})
})];
case 2:
res = _b.sent();
if (!(res.status !== 200)) return [3 /*break*/, 7];
_b.label = 3;
case 3:
_b.trys.push([3, 5, , 7]);
return [4 /*yield*/, res.json()];
case 4:
err = _b.sent();
if (err.error_description) {
fail(err.error_description);
return [2 /*return*/];
}
else if (err.message) {
fail(err.message);
return [2 /*return*/];
}
else {
fail(err.toString());
return [2 /*return*/];
}
return [3 /*break*/, 7];
case 5:
e_1 = _b.sent();
return [4 /*yield*/, res.text()];
case 6:
msg = _b.sent();
fail(msg || "login failed " + res.status);
return [2 /*return*/];
case 7: return [4 /*yield*/, res.json()];
case 8:
id_token = (_b.sent()).id_token;
remember = this.state.remember;
onSuccess(id_token, remember);
return [3 /*break*/, 11];
case 9:
e_2 = _b.sent();
fail(e_2.message);
return [3 /*break*/, 11];
case 10:
this.setState({ mode: LoginMode.LOGIN });
return [7 /*endfinally*/];
case 11: return [2 /*return*/];
}
});
}); };
_this.cancel = function () {
_this.setState({ mode: LoginMode.LOGIN });
};
_this.forgot = function () { return __awaiter(_this, void 0, void 0, function () {
var username, res, _a, _b, _c;
return __generator(this, function (_d) {
switch (_d.label) {
case 0:
username = this.state.username;
if (!(/.+@.+/.test(username))) {
return [2 /*return*/];
}
return [4 /*yield*/, fetch('https://oxdi.eu.auth0.com/dbconnections/change_password', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
client_id: 'qPNYEyyvGTdn5QE7naGsJzeGpgImnxGq',
email: username,
connection: 'Username-Password-Authentication',
})
})];
case 1:
res = _d.sent();
_b = (_a = console).log;
return [4 /*yield*/, res.text()];
case 2:
_b.apply(_a, [_d.sent()]);
this.setState({ mode: LoginMode.PASSWORD_RESET });
return [2 /*return*/];
}
});
}); };
return _this;
}
Login.prototype.renderLogin = function () {
var _this = this;
var _a = this.state, username = _a.username, password = _a.password, reason = _a.reason, error = _a.error;
return (React.createElement("div", { className: 'content' },
React.createElement("div", { className: 'md-grid', style: { padding: 20, overflow: 'hidden' } },
React.createElement("p", null, reason),
React.createElement(TextFields_1.default, { id: 'email', label: 'Email', leftIcon: React.createElement(FontIcons_1.default, null, "email"), fullWidth: true, onChange: this.setUsername, value: username, error: !!error }),
React.createElement(TextFields_1.default, { id: 'password', label: 'Password', type: 'password', leftIcon: React.createElement(FontIcons_1.default, null, "lock"), fullWidth: true, onChange: this.setPassword, value: password, errorText: error, error: !!error })),
React.createElement("div", { style: { paddingLeft: 20, paddingRight: 20 } },
React.createElement(Button_1.default, { raised: true, primary: true, onClick: this.login, label: 'Login', style: { width: '100%', padding: 10 } })),
React.createElement("div", { style: { paddingLeft: 20, paddingRight: 20, paddingTop: 10, paddingBottom: 20 } },
React.createElement(Button_1.default, { flat: true, primary: true, onClick: function () { return _this.setMode(LoginMode.FORGOTTEN); }, label: 'Forgotten Password?', style: { width: '100%', padding: 10 } }))));
};
Login.prototype.renderForgotten = function () {
var _a = this.state, username = _a.username, error = _a.error;
return (React.createElement("div", { className: 'content' },
React.createElement("div", { className: 'md-grid', style: { padding: 20, overflow: 'hidden' } },
React.createElement(TextFields_1.default, { id: 'email', label: 'Email', leftIcon: React.createElement(FontIcons_1.default, null, "email"), fullWidth: true, onChange: this.setUsername, value: username, errorText: error, error: !!error })),
React.createElement("div", { style: { padding: 20 } },
React.createElement(Button_1.default, { raised: true, primary: true, onClick: this.forgot, label: 'Reset Password', style: { width: '100%', padding: 10 } }))));
};
Login.prototype.renderResetMessage = function () {
var _this = this;
var username = this.state.username;
return (React.createElement("div", { className: 'content' },
React.createElement("div", { className: 'md-grid', style: { padding: 20, overflow: 'hidden' } },
React.createElement("p", null,
"We have sent you an email to ",
username,
" with instructions on how to reset your password"),
React.createElement("p", null, "If you do not receive an email within 15mins then you should assume we did not recognise that address")),
React.createElement("div", { style: { padding: 20 } },
React.createElement(Button_1.default, { flat: true, primary: true, onClick: function () { return _this.setMode(LoginMode.LOGIN); }, label: 'Continue', style: { width: '100%', padding: 10 } }))));
};
Login.prototype.render = function () {
var mode = this.state.mode;
var content, title;
if (mode === LoginMode.AUTHENTICATING) {
title = 'Authenticating';
content = (React.createElement("div", null,
React.createElement(LinearProgress_1.default, { style: { marginTop: 0 } }),
React.createElement("div", { className: 'content', style: { padding: 20, textAlign: 'right' } },
React.createElement(Button_1.default, { flat: true, onClick: this.cancel, label: 'Cancel' }))));
}
else if (mode === LoginMode.PASSWORD_RESET) {
title = 'Password Reset';
content = this.renderResetMessage();
;
}
else if (mode === LoginMode.LOGIN) {
title = 'Welcome Back';
content = this.renderLogin();
}
else if (mode === LoginMode.FORGOTTEN) {
title = 'Forgotten';
content = this.renderForgotten();
}
return (React.createElement(Dialogs_1.default, { modal: true, visible: true, id: 'modal-login', "aria-labelledby": 'login-header', className: 'modal-login', focusOnMount: false, contentStyle: { padding: 0 }, dialogStyle: { width: 350 }, onKeyPress: this.handleKeyPress },
React.createElement("div", { id: 'login-header', className: 'login-header' },
React.createElement(FontIcons_1.default, { style: { color: 'white', fontSize: 50, paddingTop: 20, paddingLeft: 20, opacity: 0.7 } }, "person_pin"),
React.createElement("h3", { style: { opacity: 0.8 } }, title)),
content));
};
return Login;
}(React.Component));
exports.Login = Login;