12 |
38 | );
39 | };
40 |
41 | export default Description;
42 |
--------------------------------------------------------------------------------
/src/components/Auth/ForgotPassword/ForgotPassword.css:
--------------------------------------------------------------------------------
1 | .forgotPwdForm {
2 | width: 270px;
3 | margin: 0 auto;
4 | }
5 |
6 | .forgotPwdContainer {
7 | display: flex;
8 | flex-direction: column;
9 | height: 100vh;
10 | }
11 |
12 | .modalDiv > div > div > div {
13 | width: 50%;
14 | margin: 0px auto;
15 | }
16 |
17 | @media screen and (max-width : 783px) {
18 | .modalDiv > div > div > div {
19 | width: 80%;
20 | margin: 0px auto;
21 | }
22 | }
23 |
24 | @media screen and (max-width: 768px) {
25 | .forgotPwdForm h1{
26 | font-size: 16px;
27 | }
28 | .forgotPwdForm {
29 | width: unset;
30 | margin: 0 auto;
31 | }
32 | }
33 | .app-bar-div{
34 | position: fixed;
35 | top: 0;
36 | left: 0;
37 | z-index: 1000;
38 | height: 46px;
39 | width: 100vw;
40 | user-select: none;
41 | -webkit-user-select: none;
42 | }
43 |
44 | @media screen and (max-width: 490px) {
45 | .forgotPwdForm {
46 | padding: 2em 1px;
47 | }
48 | }
49 | @media screen and (max-width: 460px) {
50 | .modalDiv > div > div > div {
51 | width: 100%;
52 | margin: 0px auto;
53 | }
54 | }
55 | @media screen and (max-width: 362px) {
56 | .forgotPwdForm {
57 | padding: 2em 0;
58 | }
59 | .modalDiv>div>div {
60 | width: 95% !important; /* csslint allow: known-properties, important */
61 | }
62 | }
63 |
--------------------------------------------------------------------------------
/src/actions/API.actions.js:
--------------------------------------------------------------------------------
1 | import Cookies from 'universal-cookie';
2 | import $ from 'jquery';
3 | import { urls } from '../Utils';
4 |
5 | const cookies = new Cookies();
6 |
7 | // Update Changed Settings on server
8 | export function pushSettingsToServer(settings) {
9 | if (
10 | cookies.get('loggedIn') === null ||
11 | cookies.get('loggedIn') === undefined
12 | ) {
13 | return;
14 | }
15 |
16 | let url =
17 | `${urls.API_URL}/aaa/changeUserSettings.json?` +
18 | '&access_token=' +
19 | cookies.get('loggedIn');
20 |
21 | Object.keys(settings).forEach((key, index) => {
22 | if (key) {
23 | url +=
24 | '&key' +
25 | (index + 1) +
26 | '=' +
27 | key +
28 | '&value' +
29 | (index + 1) +
30 | '=' +
31 | settings[key] || '';
32 | }
33 | });
34 | url += '&count=' + Object.keys(settings).length.toString();
35 | // push settings to server
36 | makeServerCall(url);
37 | }
38 |
39 | // Helper function for making server call
40 | export function makeServerCall(url) {
41 | $.ajax({
42 | url: url,
43 | dataType: 'jsonp',
44 | crossDomain: true,
45 | timeout: 3000,
46 | async: false,
47 | error: function(errorThrown) {
48 | console.log(errorThrown);
49 | return null;
50 | },
51 | });
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/Admin/ListUser/ListUser.css:
--------------------------------------------------------------------------------
1 | .banner{
2 | background-color: #f7f7f7;
3 | }
4 | .h1{
5 | padding-top: 4%;
6 | font-size: 50px;
7 | }
8 | .table{
9 | margin-left: 30px;
10 | margin-right: 30px;
11 | }
12 |
13 | @font-face {
14 | font-family: 'anticon';
15 | src: url('https://at.alicdn.com/t/font_zck90zmlh7hf47vi.eot');
16 | /* IE9*/
17 | src: url('https://at.alicdn.com/t/font_zck90zmlh7hf47vi.eot?#iefix')
18 | format('embedded-opentype'),
19 | /* chrome、firefox */
20 | url('https://at.alicdn.com/t/font_zck90zmlh7hf47vi.woff')
21 | format('woff'),
22 | /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
23 | url('https://at.alicdn.com/t/font_zck90zmlh7hf47vi.ttf')
24 | format('truetype'),
25 | /* iOS 4.1- */
26 | url('https://at.alicdn.com/t/font_zck90zmlh7hf47vi.svg#iconfont')
27 | format('svg');
28 | }
29 | .anticon {
30 | display: inline-block;
31 | font-style: normal;
32 | vertical-align: baseline;
33 | text-align: center;
34 | text-transform: none;
35 | line-height: 1;
36 | text-rendering: optimizeLegibility;
37 | -webkit-font-smoothing: antialiased;
38 | -moz-osx-font-smoothing: grayscale;
39 | }
40 | .anticon:before {
41 | display: block;
42 | font-family: "anticon";
43 | }
44 | .anticon-step-forward:before {
45 | content: "\e600";
46 | }
47 | .anticon-step-backward:before {
48 | content: "\e601";
49 | }
50 | .anticon-forward:before {
51 | content: "\e602";
52 | }
53 | .anticon-backward:before {
54 | content: "\e603";
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/images/android.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Admin/Admin.css:
--------------------------------------------------------------------------------
1 | .SettingsTab{
2 | padding: 0px;
3 | width: auto;
4 | margin: 0 auto;
5 | }
6 | .heading{
7 | height: 150px;
8 | }
9 | .tabs{
10 | margin-top: -10px;
11 | padding-left: 25px;
12 | padding-right: 30px;
13 | }
14 | .containerDiv{
15 | background-color: #ffffff;
16 | }
17 |
18 | .container{
19 | margin-top: 30px;
20 | margin-left: 20px;
21 | margin-right: 20px;
22 | background-color: #ffffff;
23 | }
24 |
25 | .h2{
26 | padding-top: 72px;
27 | margin-left: 23px;
28 | font-size: 35px;
29 | font-family: Helvetica Neue For Number,-apple-system,
30 | BlinkMacSystemFont,Segoe UI,
31 | Roboto,PingFang SC,
32 | Hiragino Sans GB,Microsoft YaHei,
33 | Helvetica Neue,Helvetica,Arial,sans-serif;
34 | color: rgba(0,0,0,.65);
35 | font-weight: bold;
36 | }
37 |
38 | .h3{
39 | font-size: 25px;
40 | margin-top: 30px;
41 | margin-bottom: 20px;
42 | font-family: Helvetica Neue For Number,-apple-system,
43 | BlinkMacSystemFont,Segoe UI,Roboto,
44 | PingFang SC,Hiragino Sans GB,
45 | Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
46 | color: rgba(0,0,0);
47 | font-weight: bold;
48 | }
49 |
50 | .containerPaper{
51 | margin-top: -68px;
52 | margin-left: 60px;
53 | margin-right: 40px;
54 | }
55 |
56 | .flexCard{
57 | width: 400px;
58 | height: 310px;
59 | margin-bottom: 20px;
60 | font-size: 18px;
61 | font-weight: bold;
62 | line-height: 2;
63 | }
64 |
65 | @media screen and (max-width: 520px) {
66 | .flexCard {
67 | width: 310px;
68 | }
69 | }
70 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.react.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import susi from '../../images/susi-logo.svg';
3 | import './Footer.css';
4 | import { Link } from 'react-router-dom';
5 | import { urls } from '../../Utils';
6 |
7 | const Footer = () => {
8 | // Footer Component
9 | return (
10 |
13 |
37 | 14 | Meet SUSI.AI, Your Artificial Intelligence for Personal Assistants, 15 | Robots, Help Desks and Chatbots. 16 |
17 |
18 |
22 |
27 | Ask it questions.
19 |Tell it to do things.
20 |Always ready to help.
21 |
28 |
35 |
36 |
11 |
47 |
48 | );
49 | };
50 |
51 | export default Footer;
52 |
--------------------------------------------------------------------------------
/src/components/Settings/WebChat/WebchatSettings.react.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { addUrlProps, UrlQueryParamTypes } from 'react-url-query';
3 | import PropTypes from 'prop-types';
4 | import Snackbar from 'material-ui/Snackbar';
5 |
6 | const urlPropsQueryConfig = {
7 | client: { type: UrlQueryParamTypes.string },
8 | };
9 |
10 | class WebChatSettings extends Component {
11 | static propTypes = {
12 | // URL props are automatically decoded and passed in based on the config
13 | client: PropTypes.string,
14 | // change handlers are automatically generated when given a config.
15 | // By default they update that single query parameter and maintain existing
16 | // values in the other parameters.
17 | onChangeClient: PropTypes.func,
18 | };
19 |
20 | static defaultProps = {
21 | client: 'null',
22 | };
23 | constructor(props) {
24 | super(props);
25 | this.state = {
26 | openSnackbar: false,
27 | msgSnackbar: '',
28 | };
29 | }
30 | ComponentDidMount() {
31 | const { client } = this.props;
32 |
33 | if (
34 | client !== 'android' ||
35 | client !== 'iOS' ||
36 | client !== 'cms' ||
37 | client !== 'web'
38 | ) {
39 | this.setState({
40 | openSnackbar: true,
41 | msgSnackbar: 'Invalid client name',
42 | });
43 | }
44 | }
45 |
46 | render() {
47 | return (
48 |
49 | {
54 | this.setState({ openSnackbar: false });
55 | }}
56 | />
57 |
58 | );
59 | }
60 | }
61 |
62 | WebChatSettings.propTypes = {
63 | history: PropTypes.object,
64 | };
65 |
66 | export default addUrlProps({ urlPropsQueryConfig })(WebChatSettings);
67 |
--------------------------------------------------------------------------------
/src/components/Settings/PreviewThemeChat.css:
--------------------------------------------------------------------------------
1 | .chat-message-container{
2 | font-size: 15px;
3 | min-height:330px;
4 | padding-bottom: 60px;
5 | box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23);
6 | }
7 | .susi-chat-container{
8 | border:1px solid #000000;
9 | height: 420px;
10 | overflow-y: auto;
11 | overflow-x: hidden;
12 | }
13 | .chat-input{
14 | border-radius: 6px;
15 | padding: 0 20px 0 5px;
16 | border: none;
17 | font-size: 14px;
18 | }
19 | .chat-footer{
20 | height: 40px;
21 | border-radius: 8px;
22 | }
23 | .chat-footer-container{
24 | height: 50px;
25 | display: flex;
26 | align-items: center;
27 | padding: 6px;
28 | position: absolute;
29 | bottom: 11px;
30 | justify-content: space-evenly;
31 | box-shadow: 0 -1px 4px 0 rgba(0,0,0,.12);
32 | width: 238px;
33 | }
34 | .chat-window{
35 | margin: 0 20px 0 20px;
36 | background-color: #000000;
37 | min-width:250px;
38 | }
39 | .susi-chat-navbar{
40 | display: flex;
41 | height: 30px;
42 | justify-content: space-between;
43 | }
44 | .chat-input-send{
45 | cursor: pointer;
46 | }
47 | .susi-comment-box{
48 | box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
49 | border-radius: 8px;
50 | margin:10px;
51 | min-width: 50px;
52 | max-width: 150px;
53 | padding: 12.1px 16.5px;
54 | text-align: left;
55 | }
56 | .susi-comment-you{
57 | background-color: #e0e0e0;
58 | align-self: flex-end;
59 | text-align: left;
60 | }
61 | .susi-comment-susi{
62 | background-color: #ffffff;
63 | align-self: flex-start;
64 | }
65 | .chat-messages{
66 | display: flex;
67 | flex-direction: column;
68 | }
69 |
70 | .circleChoose{
71 | margin: 0 auto;
72 | position: relative;
73 | text-align: left;
74 | margin-left: 20px;
75 | margin-right: 0;
76 | }
77 | .circleChoose label{
78 | font-size:unset;
79 | }
80 |
81 |
--------------------------------------------------------------------------------
/src/components/images/susi.svg:
--------------------------------------------------------------------------------
1 |
2 |
4 |
32 |
--------------------------------------------------------------------------------
/src/components/Auth/ChangePassword/ChangePassword.css:
--------------------------------------------------------------------------------
1 | .changePasswordForm {
2 | margin: 0 auto;
3 | padding:0;
4 | }
5 |
6 | .changePasswordForm h3 {
7 | font-family: 'Open Sans', sans-serif;
8 | margin: 5px 0;
9 | font-weight: 500;
10 | }
11 |
12 | @media screen and (max-width: 768px) {
13 | .changePasswordForm h3 {
14 | font-size: 16px;
15 | }
16 | }
17 |
18 | .forgot {
19 | margin-top : 20px;
20 | color : #1DA1F5;
21 | }
22 |
23 | .forgot a {
24 | color : #1DA1F5;
25 | font-size: 14px;
26 | }
27 |
28 | .forgot:hover {
29 | text-decoration: underline;
30 | }
31 |
32 | .is-strength-0 { color: #D1462F; width: 263px; display: inline-block; }
33 | .is-strength-1 { color: #D1462F; width: 263px; display: inline-block; }
34 | .is-strength-2 { color: #57B8FF; width: 263px; display: inline-block; }
35 | .is-strength-3 { color: #57B8FF; width: 263px; display: inline-block; }
36 | .is-strength-4 { color: #2FBF71; width: 263px; display: inline-block; }
37 |
38 | .is-strength-name { margin-left: 43%; }
39 |
40 | .ReactPasswordStrength-strength-bar {
41 | box-sizing: border-box;
42 | height: 2px;
43 | position: relative; top: 1px; right: 1px;
44 | transition: width 300ms ease-out;
45 | margin: 0 auto;
46 | }
47 | .is-strength--1 .ReactPasswordStrength-strength-bar {
48 | background: #D1462F;
49 | display: none;
50 | }
51 | .is-strength-0 .ReactPasswordStrength-strength-bar {
52 | background: #D1462F;
53 | width: 50px;
54 | display: block;
55 | left: 0;
56 | }
57 | .is-strength-1 .ReactPasswordStrength-strength-bar {
58 | background: #D1462F;
59 | width: 70px;
60 | display: block;
61 | left: 0;
62 | }
63 | .is-strength-2 .ReactPasswordStrength-strength-bar {
64 | background: #57B8FF;
65 | width: 141px;
66 | display: block;
67 | left: 0;
68 | }
69 | .is-strength-3 .ReactPasswordStrength-strength-bar {
70 | background: #57B8FF;
71 | width: 192px;
72 | display: block;
73 | left: 0;
74 | }
75 | .is-strength-4 .ReactPasswordStrength-strength-bar {
76 | background: #2FBF71;
77 | width: 256px;
78 | display: block;
79 | left: 0;
80 | }
81 |
--------------------------------------------------------------------------------
/commitStyle.md:
--------------------------------------------------------------------------------
1 | ## Commit Style Guidelines for accounts.susi.ai
2 |
3 | ### Message Structure
4 | Commit messages consist of three distinct parts, separated by a blank line: the title, an optional body/content, and an optional footer/metadata. The layout looks like this:
5 |
6 | type: subject
7 |
8 | body
9 |
10 | footer
11 |
12 | ***
13 |
14 | ### Title
15 | The title consists of the subject and type of the commit message.
16 |
17 | ### Type
18 | The type is contained within the title and can be one of the following types:
19 |
20 | * **feat:** a new feature
21 | * **fix:** a bug fix
22 | * **docs:** changes to documentation
23 | * **style:** formatting, missing semi-colons, etc; no code change
24 | * **refactor:** refactoring production code
25 | * **test:** adding tests, refactoring test; no production code change
26 | * **chore:** updating build tasks, package manager configs, etc; no production code change
27 |
28 | ### Subject
29 | The subject is a single short line summarising the change. It should be no greater than 50 characters, should begin with a capital letter and do not end with a period.
30 |
31 | Use an imperative tone to describe what a commit does, rather than what it did. For example, use fix; not fixed or fixes or fixing.
32 |
33 | For example:
34 | - fix: Typo in Commit Style guidelines
35 | - feat: Update UI of SessionDetailsActivity
36 | - fix: Remove deprecated methods
37 | - refactor: API endpoints and JSON assets
38 | instead of writing the following:
39 | - Fixed bug with Y
40 | - Changing behaviour of X
41 |
42 | ### Body
43 | The body includes the kind of information commit message (if any) should contain.
44 |
45 | Not every commit requires both a subject and a body. Sometimes a single line is fine, especially when the change is self-explanatory and no further context is necessary, therefore it is optional. The body is used to explain the what and why of a commit, not the how.
46 |
47 | When writing a body, the blank line between the title and the body is required and we should try to limit the length of each line to no more than 72 characters.
48 |
49 | ### The Footer
50 | The footer is optional and is used to reference issue tracker IDs.
51 |
52 | For example:
53 | Fixes #1170
54 |
55 | ***
56 |
--------------------------------------------------------------------------------
/src/components/images/android1.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
16 |
--------------------------------------------------------------------------------
/deploy.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | SOURCE_BRANCH="master"
4 | TARGET_BRANCH="gh-pages"
5 |
6 | # Pull requests and commits to other branches shouldn't try to deploy.
7 | if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$SOURCE_BRANCH" ]; then
8 | echo "Skipping deploy; The request or commit is not on master"
9 | exit 0
10 | fi
11 |
12 | # Save some useful information
13 | REPO=`git config remote.origin.url`
14 | SSH_REPO=${REPO/https:\/\/github.com\//git@github.com:}
15 | SHA=`git rev-parse --verify HEAD`
16 |
17 | ENCRYPTED_KEY_VAR="encrypted_${ENCRYPTION_LABEL}_key"
18 | ENCRYPTED_IV_VAR="encrypted_${ENCRYPTION_LABEL}_iv"
19 | ENCRYPTED_KEY=${!ENCRYPTED_KEY_VAR}
20 | ENCRYPTED_IV=${!ENCRYPTED_IV_VAR}
21 | openssl aes-256-cbc -K $encrypted_8de7f111ae22_key -iv $encrypted_8de7f111ae22_iv -in deploy_key.enc -out ../deploy_key -d
22 |
23 |
24 |
25 |
26 |
27 | chmod 600 ../deploy_key
28 | eval `ssh-agent -s`
29 | ssh-add ../deploy_key
30 |
31 | # Cloning the repository to repo/ directory,
32 | # Creating gh-pages branch if it doesn't exists else moving to that branch
33 | git clone $REPO repo
34 | cd repo
35 | git checkout $TARGET_BRANCH || git checkout --orphan $TARGET_BRANCH
36 | cd ..
37 |
38 | # Setting up the username and email.
39 | git config user.name "Travis CI"
40 | git config user.email "$COMMIT_AUTHOR_EMAIL"
41 |
42 | # Cleaning up the old repo's gh-pages branch except CNAME file and 404.html
43 | find repo/* ! -name "CNAME" ! -name "404.html" -maxdepth 1 -exec rm -rf {} \; 2> /dev/null
44 | cd repo
45 |
46 | git add --all
47 | git commit -m "Travis CI Clean Deploy : ${SHA}"
48 |
49 | git checkout $SOURCE_BRANCH
50 |
51 | # Actual building and setup of current push or PR.
52 | npm install
53 | npm run build
54 | mv build ../build/
55 |
56 | git checkout $TARGET_BRANCH
57 | rm -rf node_modules/
58 | mv ../build/* .
59 | cp index.html 404.html
60 |
61 | # Staging the new build for commit; and then commiting the lastest build
62 | git add -A
63 | git commit --amend --no-edit --allow-empty
64 |
65 | # Deploying only if the build has changed
66 | if [ -z `git diff --name-only HEAD HEAD~1` ]; then
67 |
68 | echo "No Changes in the Build; exiting"
69 | exit 0
70 |
71 | else
72 | # There are changes in the Build; push the changes to gh-pages
73 | echo "There are changes in the Build; pushing the changes to gh-pages"
74 |
75 | # Actual push to gh-pages branch via Travis
76 | git push --force $SSH_REPO $TARGET_BRANCH
77 | fi
78 |
--------------------------------------------------------------------------------
/src/stores/UserPreferencesStore.js:
--------------------------------------------------------------------------------
1 | import ChatAppDispatcher from '../dispatcher/ChatAppDispatcher';
2 | import ChatConstants from '../constants/ChatConstants';
3 | import { EventEmitter } from 'events';
4 | import { urls } from '../Utils';
5 |
6 | let ActionTypes = ChatConstants.ActionTypes;
7 | let CHANGE_EVENT = 'change';
8 |
9 | let _defaults = {
10 | Theme: 'light',
11 | ThemeValues: '',
12 | BackgroundImage: '',
13 | Server: `${urls.API_URL}`,
14 | StandardServer: `${urls.API_URL}`,
15 | avatarType: 'default',
16 | };
17 |
18 | let UserPreferencesStore = {
19 | ...EventEmitter.prototype,
20 |
21 | emitChange() {
22 | this.emit(CHANGE_EVENT);
23 | },
24 |
25 | getPreferences() {
26 | return _defaults;
27 | },
28 |
29 | getTheme() {
30 | return _defaults.Theme;
31 | },
32 |
33 | getThemeValues() {
34 | return _defaults.ThemeValues;
35 | },
36 |
37 | getBackgroundImage() {
38 | return _defaults.BackgroundImage;
39 | },
40 |
41 | getAvatarType() {
42 | return _defaults.avatarType;
43 | },
44 |
45 | addChangeListener(callback) {
46 | this.on(CHANGE_EVENT, callback);
47 | },
48 |
49 | removeChangeListener(callback) {
50 | this.removeListener(CHANGE_EVENT, callback);
51 | },
52 | };
53 |
54 | UserPreferencesStore.dispatchToken = ChatAppDispatcher.register(action => {
55 | switch (action.type) {
56 | case ActionTypes.THEME_CHANGED: {
57 | _defaults.Theme = action.theme;
58 | UserPreferencesStore.emitChange();
59 | break;
60 | }
61 | case ActionTypes.SERVER_CHANGED: {
62 | _defaults.Server = action.server;
63 | UserPreferencesStore.emitChange();
64 | break;
65 | }
66 | case ActionTypes.SETTINGS_CHANGED: {
67 | let settings = action.settings;
68 | if (settings.hasOwnProperty('theme')) {
69 | _defaults.Theme = settings.theme;
70 | }
71 | if (settings.hasOwnProperty('previewTheme')) {
72 | _defaults.PreviewTheme = settings.previewTheme;
73 | }
74 | if (settings.hasOwnProperty('backgroundImage')) {
75 | _defaults.BackgroundImage = settings.backgroundImage;
76 | }
77 | break;
78 | }
79 | case ActionTypes.AVATAR_TYPE_CHANGED: {
80 | _defaults.avatarType = action.avatarType;
81 | UserPreferencesStore.emitChange();
82 | break;
83 | }
84 | default: {
85 | // do nothing
86 | }
87 | }
88 | });
89 |
90 | export default UserPreferencesStore;
91 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
20 | Room: ${ 71 | marker.room 72 | }
Device name: ${marker.devicename}`, 73 | ); 74 | infoWindow.open(this.map, marker); 75 | }); 76 | }); 77 | } 78 | } 79 | 80 | render() { 81 | const { mapWrapperStyle } = styles; 82 | 83 | return ( 84 | // eslint-disable-next-line 85 |
86 | loading map...
87 |
88 | );
89 | }
90 | }
91 |
92 | export default MapContainer;
93 |
--------------------------------------------------------------------------------
/src/components/CircleImage/CircleImage.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | /* Utils */
5 | import initials from 'initials';
6 | import addPx from 'add-px';
7 | import contrast from 'contrast';
8 | import './CircleImage.css';
9 |
10 | const defaultColors = [
11 | '#2ecc71', // emerald
12 | '#3498db', // peter river
13 | '#8e44ad', // wisteria
14 | '#e67e22', // carrot
15 | '#e74c3c', // alizarin
16 | '#1abc9c', // turquoise
17 | '#2c3e50', // midnight blue
18 | ];
19 |
20 | function sumChars(str) {
21 | let sum = 0;
22 | if (str) {
23 | for (let i = 0; i < str.length; i++) {
24 | sum += str.charCodeAt(i);
25 | }
26 | }
27 | return sum;
28 | }
29 |
30 | const CircleImage = props => {
31 | const {
32 | src,
33 | srcset,
34 | name,
35 | color,
36 | colors,
37 | style,
38 | borderRadius = '100%',
39 | className,
40 | } = props;
41 |
42 | const size = addPx(props.size);
43 |
44 | const styles = {
45 | imageStyle: {
46 | display: 'block',
47 | borderRadius,
48 | },
49 | innerStyle: {
50 | lineHeight: size,
51 | textAlign: 'center',
52 | overflow: 'initial',
53 | marginRight: 10,
54 | borderRadius,
55 | },
56 | };
57 |
58 | let { imageStyle, innerStyle } = styles;
59 | const nameInitials = initials(name);
60 | let innerElement,
61 | classes = [className, 'CircleImage'];
62 |
63 | if (size) {
64 | imageStyle.width = innerStyle.width = innerStyle.maxWidth = size;
65 | imageStyle.height = innerStyle.height = innerStyle.maxHeight = size;
66 | }
67 |
68 | if (src || srcset) {
69 | innerElement = (
70 |
96 |
100 | );
101 | };
102 |
103 | CircleImage.propTypes = {
104 | borderRadius: PropTypes.string,
105 | src: PropTypes.string,
106 | srcset: PropTypes.string,
107 | name: PropTypes.string,
108 | color: PropTypes.string,
109 | colors: PropTypes.array,
110 | size: PropTypes.string,
111 | style: PropTypes.object,
112 | className: PropTypes.string,
113 | };
114 |
115 | CircleImage.defaultProps = {
116 | colors: defaultColors,
117 | };
118 |
119 | export default CircleImage;
120 |
--------------------------------------------------------------------------------
/docs/Accounting.md:
--------------------------------------------------------------------------------
1 | # Accounting in SUSI WebChat
2 |
3 | SUSI WebChat provides the users two options:
4 | >- Chat Anonymously
5 | >- Logged In
6 |
7 | #### **Chat Anonymously**
8 | The Chat Anonymously feature is for users to try out SUSI WebChat without any hassle of registering or logging in.
9 | The users can interact with SUSI and try out its features like changing themes and searching messages, but features like initializing the app with preferred defaults aren't provided in this mode.
10 |
11 | #### **Logged In**
12 | Users can register in the app and login to use SUSI with all its features.
13 | Users can choose either the standard server or a personal server for SUSI.
14 | >- Standard Server : https://api.susi.ai/
15 | >- Custom Server / Personal Server : URL of the users hosting of SUSI
16 |
17 | Users can modify and host their own version of [SUSI](https://github.com/fossasia/susi_server) and use that as their Personal Server.
18 | Here is a [guide](https://github.com/fossasia/susi_server/tree/development/docs/installation) to host SUSI on various platforms.
19 |
20 | For all the accounting features, users can choose between standard server or their own personal server.
21 |
22 | Let `BASE_URL` be Standard or Personal SUSI Servers URL.
23 |
24 | #### **Signup**
25 | The first step is registering with SUSI. User is asked for:
26 | >- Email
27 | >- Password
28 | >- SUSI Server
29 |
30 | Signup endpoint : `BASE_URL+'/aaa/signup.json?signup=EMAIL&password=PASSWORD;`
31 |
32 | User is then sent a verification link to confirm the sign up. And upon verifying through mail, the sign up process is completed.
33 |
34 | #### **Login**
35 | Once the user has registered with the server, he can directly login using:
36 | >- Email
37 | >- Password
38 | >- SUSI Server
39 |
40 | Login endpoint : `BASE_URL+'/aaa/login.json?type=access-token&login=EMAIL&password=PASSWORD';`
41 |
42 | #### **Password Recovery**
43 | In case the user forgets his password, he can use the `Forgot Password` option to reset his password.
44 | The Password recovery service uses:
45 | >- Email
46 | >- SUSI Server
47 |
48 | Password Recovery endpoint : `BASE_URL+'/aaa/recoverpassword.json?forgotemail=EMAIL'`
49 |
50 | A confirmation link is sent to the provided email with a link to `Reset Password` service.
51 | Upon clicking that link, the user is redirected to a reset password service app where the user is asked for :
52 | >- New Password
53 |
54 | Reset password Redirect : `BASE_URL+'/apps/resetpass/index.html?token=TOKEN'`
55 |
56 | ##### **Change Password**
57 | In case the user wants to change his password, he can login using his current password and preferred server and use the `Change Password` option to set a new password for his account.
58 | This service is different from `Password Recovery` service where the user has forgotten his password and wants a new password. Here the user knows his current password and wants to change it.
59 | The Change Password service uses:
60 | >- Email
61 | >- Current Password
62 | >- New Password
63 |
64 | Change Password endpoint : `BASE_URL+'/aaa/changepassword.json? 'changepassword=EMAIL&password=PASSWORD&newpassword=NEW_PASSWORD &access_token=ACCESS_TOKEN'`
65 |
66 | Upon successfully changing the password, the user is automatically logged out and is prompted to login again.
67 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "accounts.susi.ai",
3 | "version": "0.1.0",
4 | "private": true,
5 | "homepage": "https://accounts.susi.ai/",
6 | "repository": "https://github.com/fossasia/accounts.susi.ai",
7 | "dependencies": {
8 | "add-px": "1.0.0",
9 | "antd": "2.13.14",
10 | "axios": "0.16.2",
11 | "bootstrap": "3.3.7",
12 | "classnames": "2.2.6",
13 | "contrast": "1.0.1",
14 | "country-data": "0.0.31",
15 | "flux": "3.1.3",
16 | "google-maps-react": "2.0.2",
17 | "history": "4.7.2",
18 | "html-entities": "1.2.1",
19 | "initials": "3.0.0",
20 | "jquery": "3.3.1",
21 | "keymirror": "0.1.1",
22 | "leaflet": "1.3.1",
23 | "material-ui": "^0.20.1",
24 | "material-ui-color-picker": "2.0.1",
25 | "material-ui-password-field": "1.4.3",
26 | "md5": "2.2.1",
27 | "moment": "2.22.2",
28 | "npm": "6.4.0",
29 | "prop-types": "15.6.2",
30 | "react": "^16.4.2",
31 | "react-bootstrap": "0.31.5",
32 | "react-color": "2.14.1",
33 | "react-cookie": "2.2.0",
34 | "react-dom": "^16.4.2",
35 | "react-emojione": "3.1.10",
36 | "react-flexbox-grid": "2.1.2",
37 | "react-leaflet": "1.9.1",
38 | "react-linkify": "0.2.2",
39 | "react-recaptcha": "^2.3.10",
40 | "react-router": "4.3.1",
41 | "react-router-dom": "4.3.1",
42 | "react-scrollbar": "0.5.4",
43 | "react-slick": "0.14.11",
44 | "react-swipeable-views": "0.12.15",
45 | "react-text-highlight": "0.2.0",
46 | "react-timezone": "1.0.5",
47 | "react-toolbox": "2.0.0-beta.13",
48 | "react-transition-group": "2.2.0",
49 | "react-url-query": "1.4.0",
50 | "surge": "0.19.0",
51 | "universal-cookie": "2.2.0",
52 | "zxcvbn": "4.4.2"
53 | },
54 | "devDependencies": {
55 | "@babel/runtime": "7.0.0-beta.55",
56 | "enzyme": "^3.3.0",
57 | "enzyme-adapter-react-16": "^1.13.0",
58 | "eslint-config-prettier": "2.9.0",
59 | "eslint-config-react-app": "0.6.2",
60 | "eslint-plugin-babel": "4.1.2",
61 | "eslint-plugin-jsx": "0.0.2",
62 | "eslint-plugin-jsx-a11y": "4.0.0",
63 | "eslint-plugin-prettier": "2.6.2",
64 | "eslint-plugin-react": "7.11.1",
65 | "gh-pages": "1.2.0",
66 | "husky": "0.14.3",
67 | "lint-staged": "7.2.0",
68 | "prettier": "1.13.7",
69 | "react-scripts": "0.9.5",
70 | "react-test-renderer": "15.6.2"
71 | },
72 | "peerDependencies": {
73 | "react": "15.6.2",
74 | "react-dom": "15.6.2"
75 | },
76 | "jest": {
77 | "setupFiles": [
78 | "./src/setupTests.js",
79 | "./src/node_modules/react-scripts/config/polyfills.js"
80 | ]
81 | },
82 | "scripts": {
83 | "start": "react-scripts start",
84 | "build": "react-scripts build",
85 | "lint-js": "eslint *.js \"src/**/*.js\"",
86 | "lint": "npm run lint-js",
87 | "precommit": "lint-staged",
88 | "format": "prettier --write \"src/**/*.js\"",
89 | "prepush": "npm run lint",
90 | "test": "npm run lint && react-scripts test --env=jsdom",
91 | "eject": "react-scripts eject",
92 | "predeploy": "npm run build",
93 | "deploy": "surge"
94 | },
95 | "lint-staged": {
96 | "src/**/*.js": [
97 | "prettier --write",
98 | "eslint --fix",
99 | "git add ."
100 | ]
101 | },
102 | "license": "LGPL-2.1-only"
103 | }
104 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.css:
--------------------------------------------------------------------------------
1 | html {
2 | overflow-x: hidden;
3 | }
4 | .footer-wrap{
5 | background: #f6f6f6;
6 | width: 100%;
7 | z-index: 10;
8 | border: 1px solid #ddd;
9 | display: flex;
10 | left: 0;
11 | position: absolute;
12 | bottom: 0;
13 | }
14 |
15 | .footer-container {
16 | display: -ms-flexbox;
17 | display: -webkit-box;
18 | display: flex;
19 | align-items: center;
20 | padding: 30px;
21 | width: 100%;
22 | }
23 |
24 | .footer-content{
25 | background: #f6f6f6;
26 | margin-top:0px;
27 | min-height: 20px;
28 | max-width: 100%;
29 | width: 100%;
30 | display: -ms-flexbox;
31 | display: -webkit-box;
32 | display: flex;
33 | -ms-flex-pack: justify;
34 | -webkit-box-orient: horizontal;
35 | -webkit-box-direction: normal;
36 | -ms-flex-flow: row wrap;
37 | flex-flow: row wrap;
38 | -webkit-box-pack: justify;
39 | justify-content: space-between;
40 | }
41 |
42 | .footer-content li {
43 | padding: 8px;
44 | }
45 |
46 | .footer-content li a{
47 | text-decoration: none;
48 | font-size: 16px;
49 | font-weight: 300;
50 | font-family: 'Roboto', sans-serif;
51 | cursor: pointer;
52 | color: #414141;
53 | }
54 |
55 | .footer-content ul{
56 | list-style: none;
57 | list-style-type: none;
58 | display: -ms-flexbox;
59 | display: -webkit-box;
60 | display: flex;
61 | -ms-flex-pack: justify;
62 | -webkit-box-orient: horizontal;
63 | -webkit-box-direction: normal;
64 | -ms-flex-flow: row wrap;
65 | flex-flow: row wrap;
66 | -webkit-box-pack: justify;
67 | justify-content: space-between;
68 | margin: 8px;
69 | }
70 |
71 | .footer-content li a:hover {
72 | color:#3367d6;
73 | }
74 |
75 | .susi-logo-footer{
76 | height: 30px;
77 | vertical-align: middle;
78 | max-width: 100px;
79 | margin: 10px 48px 10px 0px;
80 | }
81 | .susi-logo{
82 | margin: 21px 10px 0;
83 | height: 10px;
84 | vertical-align: middle;
85 | max-width: 100px;
86 | display: inline-block;
87 | width: auto;
88 | }
89 |
90 | .footer-left {
91 | display: -ms-flexbox;
92 | display: -webkit-box;
93 | display: flex;
94 | -ms-flex-pack: justify;
95 | -webkit-box-orient: horizontal;
96 | -webkit-box-direction: normal;
97 | -ms-flex-flow: row wrap;
98 | flex-flow: row wrap;
99 | -webkit-box-pack: justify;
100 | justify-content: space-between;
101 | }
102 | @media only screen and (max-width: 838px) {
103 | .footer-wrap {
104 | position: relative;
105 | }
106 | }
107 | @media only screen and (max-height: 900px) {
108 | .footer-wrap {
109 | position: relative;
110 | }
111 | }
112 |
113 | @media only screen and (max-width: 800px) {
114 | .susi-logo{
115 | display: block;
116 | margin-left:auto;
117 | margin-right: auto;
118 | }
119 | }
120 | @media only screen and (max-width: 707px){
121 |
122 | .footer-content {
123 | padding-top: 0px;
124 | justify-content: center;
125 | }
126 |
127 | .footer-container {
128 | display: block;
129 | }
130 |
131 | .susi-logo-container {
132 | display: flex;
133 | justify-content: center;
134 | }
135 |
136 | .susi-logo-footer {
137 | margin: 10px;
138 | }
139 | }
--------------------------------------------------------------------------------
/src/components/Auth/VerifyAccount/VerifyAccount.react.js:
--------------------------------------------------------------------------------
1 | // Packages
2 | import React, { Component } from 'react';
3 | import PropTypes from 'prop-types';
4 | import { addUrlProps, UrlQueryParamTypes } from 'react-url-query';
5 | import $ from 'jquery';
6 |
7 | // Components
8 | import StaticAppBar from '../../StaticAppBar/StaticAppBar';
9 | import Snackbar from 'material-ui/Snackbar';
10 |
11 | import { urls } from '../../../Utils';
12 |
13 | const urlPropsQueryConfig = {
14 | accessToken: { type: UrlQueryParamTypes.string, queryParam: 'access_token' },
15 | requessession: { type: UrlQueryParamTypes.string },
16 | validateEmail: { type: UrlQueryParamTypes.string },
17 | };
18 |
19 | class VerifyAccount extends Component {
20 | constructor(props) {
21 | super(props);
22 | this.state = {
23 | openSnackbar: false,
24 | msgSnackbar: '',
25 | };
26 | }
27 |
28 | static propTypes = {
29 | accessToken: PropTypes.string,
30 | validateEmail: PropTypes.string,
31 | requestSession: PropTypes.boolean,
32 | onChangeAccessToken: PropTypes.func,
33 | onChangeValidateEmail: PropTypes.func,
34 | onChangeRequestSession: PropTypes.func,
35 | };
36 |
37 | static defaultProps = {
38 | token: 'null',
39 | validateEmail: 'null',
40 | requestSession: false,
41 | };
42 |
43 | componentDidMount() {
44 | const { accessToken, validateEmail, requestSession } = this.props;
45 | if (
46 | accessToken !== 'null' &&
47 | validateEmail !== 'null' &&
48 | accessToken.length !== 0 &&
49 | validateEmail.length !== 0
50 | ) {
51 | let BASE_URL = urls.API_URL;
52 | let accountVerificationEndPoint =
53 | BASE_URL +
54 | '/aaa/signup.json?access_token=' +
55 | accessToken +
56 | '&validateEmail=' +
57 | validateEmail +
58 | '&request_session=' +
59 | requestSession;
60 | $.ajax({
61 | url: accountVerificationEndPoint,
62 | dataType: 'jsonp',
63 | jsonpCallback: 'p',
64 | jsonp: 'callback',
65 | crossDomain: true,
66 | success: function(response) {
67 | if (response.accepted === true) {
68 | this.setState({
69 | openSnackbar: true,
70 | msgSnackbar:
71 | 'Thank you! Your account is now verified. ' +
72 | 'Please login to continue.',
73 | });
74 | }
75 | }.bind(this),
76 | error: function(errorThrown) {
77 | this.setState({
78 | openSnackbar: true,
79 | msgSnackbar: 'An error occurred. Please try again.',
80 | });
81 | }.bind(this),
82 | });
83 | } else {
84 | this.setState({
85 | openSnackbar: true,
86 | msgSnackbar: 'Bad access token or email id!',
87 | });
88 | }
89 | }
90 | render() {
91 | return (
92 |
97 | {innerElement}
98 |
99 |
93 | {
101 | this.setState({ openSnackbar: false });
102 | }}
103 | />
104 |
105 | );
106 | }
107 | }
108 | VerifyAccount.propTypes = {
109 | history: PropTypes.object,
110 | };
111 |
112 | export default addUrlProps({ urlPropsQueryConfig })(VerifyAccount);
113 |
--------------------------------------------------------------------------------
/src/components/NotFound/NotFound.react.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import RaisedButton from 'material-ui/RaisedButton';
3 | import { Link } from 'react-router-dom';
4 | import './NotFound.css';
5 | import LogoImg from '../images/susi-logo.svg';
6 | import userPreferencesStore from '../../stores/UserPreferencesStore';
7 | import Dialog from 'material-ui/Dialog';
8 | import Login from '../Auth/Login/Login.react';
9 | import ChatConstants from '../../constants/ChatConstants';
10 | import Cookies from 'universal-cookie';
11 |
12 | const cookies = new Cookies();
13 |
14 | import { urls } from '../../Utils';
15 |
16 | export default class NotFound extends Component {
17 | constructor(props) {
18 | super(props);
19 |
20 | this.state = {
21 | open: false,
22 | };
23 | }
24 | handleClose = () => {
25 | this.setState({ open: false });
26 | };
27 | render() {
28 | const actions = (
29 |
94 |
96 |
41 |
108 |
119 |
120 | );
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # accounts.susi.ai
2 |
3 | [](https://travis-ci.org/fossasia/accounts.susi.ai)
4 | [](https://twitter.com/asksusi)
5 |
6 | SUSI.AI is an artificial intelligence combining pattern matching, internet data, data flow principles and inference engine principles. It will have some reflection abilities and it will be able to remember the users' input to produce deductions and a personalized feedback. Its purpose is to explore the abilities of an artificial companion and to answer the remaining unanswered questions. The accounts.susi.ai repo is a front-end web application that is developed for managing user accounts of SUSI.AI. The project is hosted on gh-pages at https://accounts.susi.ai.
7 |
8 | ## Communication
9 |
10 | Please join our mailing list to discuss questions regarding the project: https://groups.google.com/group/susiai/
11 |
12 | Our chat channel is on gitter here: https://gitter.im/fossasia/susi_server
13 |
14 | ## Technology Stack
15 |
16 | ### Components
17 | * HTML - Structure of the web page generated.
18 | * CSS - Styling options and details of the web page.
19 | * Javascript(JSON) - Used to store information for deploying the application such as dependencies.
20 | * ReactJS - Structure for deployment of the web page.
21 |
22 | ## Requirements
23 | * node --version >= 6
24 | * npm --version >= 3
25 |
26 | ## How to deploy?
27 |
28 | ### Running on localhost:
29 | * **Step 1:** Fork accounts.susi.ai repository and clone it to your desktop
30 | * **Step 2:** Then cd into that cloned folder
31 | * **Step 3:** Install all the dependencies by running :```$ sudo npm install```
32 | * **Step 4:** Run on http://localhost:3000 by running :```$ npm run start```
33 | * **Step 5:** Build locally by running : ```$ npm run build ```
34 | * **Step 6:** To deploy at a url use : ```$ npm run deploy ```
35 |
36 | ### Running on [Surge](https://github.com/fossasia/chat.susi.ai/blob/master/docs/INSTALLATION_SURGE_ENGLISH.md)
37 |
38 | **Click this picture to see video about deploy!**
39 | [](https://www.youtube.com/watch?v=Gvc0uz13U1M)
40 |
41 | * **Step 1:** Install Surge:```$ npm install -g surge```
42 | * **Step 2:** Then cd into the cloned chat.susi.ai folder
43 | * **Step 3:** Build the app:```$ npm run build```
44 | * **Step 4:** Go to the build directory:```cd build```
45 | * **Step 5:** Run Surge:```surge```
46 | * **Step 6:** Follow the prompts and provide an e-mail address and a password.
47 | * **Step 7:** Go to the URL that appears after the above process is finished, and provide this link in the PR for testing your changes.
48 |
49 | Still having problems? Watch this video to clear your doubts [How to setup SUSI web-chat with surge](https://www.youtube.com/watch?v=vM9cD1pHMDQ&t=240s)
50 |
51 | ### Colours and Font Sizes
52 |
53 | ## Component Colours of Light theme
54 |
55 | * Background Colour of the Application -  `#ffffff`
56 | * Background Colour Message History - `#f5f4f6`
57 | * Chat bubbles Colour-
58 | * Chat bubbles of SUSI-  `#ffffff`
59 | * Chat bubbles of User-  `#e0e0e0`
60 | * Top Bar Colour-  `#4285f4`
61 | * Buttons Colour-  `#4285f4`
62 | * Colour of search result-  `#ff5e00`
63 |
64 | * Toggle Colour-
65 | * thumbOnColor-  `#5ab1fc`
66 | * trackOnColor-  `#4285f4`
67 |
68 | * User Feedback Colour-
69 | * Thumbs Up Colour-
70 | **Voted**-  `#1685e5`
71 | **Unvoted**-  `#90a4ae`
72 |
73 | ## Fonts
74 |
75 | * Font Type of Chat Message- "Product Sans", sans-serif
76 | * Font Type of Message Composer- "Product Sans", sans-serif
77 | * Chat Message font size :14px
78 | * Chat Composer font size : 16px
79 | * Font Colour of Chat Message-  `#001d38`
80 | * Font Colour of Message Composer-  `#001d38`
81 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import ReactDOM from 'react-dom';
3 | import {
4 | BrowserRouter as Router,
5 | Route,
6 | Switch,
7 | hashHistory,
8 | } from 'react-router-dom';
9 | import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
10 | import Snackbar from 'material-ui/Snackbar';
11 |
12 | import SignUp from './components/Auth/SignUp/SignUp.react';
13 | import Logout from './components/Auth/Logout.react';
14 | import ResetPassword from './components/Auth/ResetPassword/ResetPassword.react';
15 | import DeleteAccount from './components/Auth/DeleteAccount/DeleteAccount.react';
16 | import Settings from './components/Settings/Settings.react';
17 | import Admin from './components/Admin/Admin.js';
18 | import Users from './components/Admin/ListUser/ListUser.js';
19 | import Skills from './components/Admin/ListSkills/ListSkills.js';
20 | import SystemSettings from './components/Admin/SystemSettings/SystemSettings.js';
21 | import SystemLogs from './components/Admin/SystemLogs/SystemLogs.js';
22 | import VerifyAccount from './components/Auth/VerifyAccount/VerifyAccount.react';
23 | import Login from './components/Auth/Login/Login.react';
24 | import NotFound from './components/NotFound/NotFound.react';
25 | import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute';
26 |
27 | import './index.css';
28 |
29 | const styles = {
30 | app: {
31 | width: '100%',
32 | height: '100%',
33 | },
34 | };
35 |
36 | class App extends Component {
37 | constructor(props) {
38 | super(props);
39 | this.state = {
40 | snackBarOpen: false,
41 | snackBarMessage: '',
42 | snackBarDuration: 4000,
43 | snackBarAction: null,
44 | snackBarActionHandler: null,
45 | };
46 | }
47 |
48 | componentDidMount = () => {
49 | window.addEventListener('offline', this.onUserOffline);
50 | window.addEventListener('online', this.onUserOnline);
51 | };
52 |
53 | componentWillUnmount = () => {
54 | window.removeEventListener('offline', this.onUserOffline);
55 | window.removeEventListener('online', this.onUserOnline);
56 | };
57 |
58 | onUserOffline = () => {
59 | this.openSnackBar({
60 | snackBarMessage: 'It seems you are offline!',
61 | });
62 | };
63 |
64 | onUserOnline = () => {
65 | this.openSnackBar({
66 | snackBarMessage: 'Welcome back!',
67 | });
68 | };
69 |
70 | openSnackBar = ({
71 | snackBarMessage,
72 | snackBarDuration = 4000,
73 | snackBarActionHandler,
74 | snackBarAction,
75 | }) => {
76 | this.setState({
77 | snackBarOpen: true,
78 | snackBarMessage,
79 | snackBarDuration,
80 | snackBarActionHandler,
81 | snackBarAction,
82 | });
83 | };
84 |
85 | closeSnackBar = () => {
86 | this.setState({
87 | snackBarOpen: false,
88 | snackBarMessage: '',
89 | snackBarDuration: 4000,
90 | snackBarAction: null,
91 | snackBarActionHandler: null,
92 | });
93 | };
94 |
95 | render() {
96 | const {
97 | snackBarOpen,
98 | snackBarMessage,
99 | snackBarDuration,
100 | snackBarAction,
101 | snackBarActionHandler,
102 | } = this.state;
103 |
104 | return (
105 |
108 |
120 |
134 |
135 |
109 |
110 |
111 |
114 | {cookies.get('showAdmin') === 'true' ? (
115 |
116 |
117 |
120 | System Settings
119 |
121 |
122 |
130 |
134 |
135 |
137 | record.serialNum}
142 | dataSource={this.state.apiKeys}
143 | loading={this.state.loading}
144 | pagination={false}
145 | style={{
146 | width: '100%',
147 | }}
148 | scroll={MobileView ? Scroll : ''}
149 | />
150 |
151 |
152 |
153 |