Recent Posts

Settings page in SUSI.AI earlier implemented using Flux needed to be migrated to Redux, Redux integration eases handling of global state management. With Redux being integrated with Settings, the code could be split into smaller manageable components. Earlier implementation involved passing data to other Settings Tab and using Settings component as a state source. This resulted in Settings component getting more lines of code(~1300 LOC). After using Redux, only ~280 LOC is present in settings component file, and separate files for each settings tab view.  Code Integration Once user login, the App component fetches User Settings in ComponentDidMount. componentDidMount = () => { const { accessToken, actions } = this.props; window.addEventListener('offline', this.onUserOffline); window.addEventListener('online', this.onUserOnline); actions.getApiKeys(); if (accessToken) { actions.getAdmin(); actions.getUserSettings().catch(e => { console.log(e); }); } }; src/App.js The action getUserSettings fetch users settings from apis.getUserSettings and populates the store settings using SETTINGS_GET_USER_SETTINGS reducer function. Default States: The store consists of all the settings required for persisting data. const defaultState = { theme: 'light', server: 'https://api.susi.ai', enterAsSend: true, micInput: true, speechOutput: true, speechOutputAlways: false, speechRate: 1, speechPitch: 1, ttsLanguage: 'en-US', userName: '', prefLanguage: 'en-US', timeZone: 'UTC-02', customThemeValue: { header: '#4285f4', pane: '#f3f2f4', body: '#fff', composer: '#f3f2f4', textarea: '#fff', button: '#4285f4', }, localStorage: true, countryCode: 'US', countryDialCode: '+1', phoneNo: '', checked: false, serverUrl: 'https://api.susi.ai', backgroundImage: '', messageBackgroundImage: '', avatarType: 'default', devices: {}, }; reducers/settings.js Reducer action: SETTINGS_GET_USER_SETTINGS sets the settings store from API payload. The customThemeValue is an object, which is populated once the settings are fetched and the string is split into array. [actionTypes.SETTINGS_GET_USER_SETTINGS](state, { error, payload }) { const { settings, devices = {} } = payload; if (error || !settings) { return state; } const { theme = defaultState.theme, server, …. avatarType, } = settings; let { customThemeValue } = settings; const themeArray = customThemeValue ? customThemeValue.split(',').map(value => `#${value}`) : defaultState.customThemeValue; return { ...state, devices, server, serverUrl, theme, enterAsSend: enterAsSend === 'true', micInput: micInput === 'true', speechOutput: speechOutput === 'true', speechOutputAlways: speechOutputAlways === 'true', speechRate: Number(speechRate), speechPitch: Number(speechPitch), ttsLanguage, userName, prefLanguage, timeZone, countryCode, countryDialCode, phoneNo, checked: checked === 'true', backgroundImage, messageBackgroundImage, avatarType, customThemeValue: { header: themeArray[0], pane: themeArray[1], body: themeArray[2], composer: themeArray[3], textarea: themeArray[4], button: themeArray[5], }, }; }, reducers/settings.js Updating Settings Reduce function: The payload contains the updated state, the reducer returns a new state with payload appended. setUserSettings: createAction( actionTypes.SETTINGS_SET_USER_SETTINGS, returnArgumentsFn, ) reducers/settings.js Action: The setUserSettings action updates the settings store, once the user presses the Save Button in the Settings Tab. function mapStateToProps(store) { return { enterAsSend: store.settings.enterAsSend, }; } actions/settings.js Redux integration in the component Redux is used in ChatAppTab as: The local state of ChatAppTab is initialized with redux store state. Using mapStateToProps we can access enterAsSend object from the redux store. The connect function connects the React component with Redux store and injects props and actions into our component using HOC pattern. It injects data from the store and functions for dispatching actions to store. Injecting props in local components: function mapStateToProps(store) { return { enterAsSend: store.settings.enterAsSend, }; } components/Settings/ChatAppTab.react.js Once a user…

Server-side validation of SUSI.AI is required for increasing the security of user against malicious users who can bypass client-side validations easily and submit dangerous input to SUSI.AI server. SUSI.AI uses both client-side and server-side validation for various authentication purposes. Client-side validates user input on the browser and provides a better user interaction. If the form is disabled on incorrect fields, it would save a round trip to the server, so the network traffic which will help your server perform better. Using client-side validation, an error message can be immediately shown before the user moves to the next field. Adding Recaptcha while on new registration, change password, and more than one login attempts help to reduce abusive traffic, spam, brute force attack. For making user accounts safe from getting hacked on SUSI.AI, a strong password is supposed to be at least 8 characters, at least one special character, one number and text characters are must. The username must have 5-51 characters. So as to prevent SUSI.AI admin panel from crashing. Code Integration Client side reCaptcha validation: onCaptchaSuccess = captchaResponse => { if (captchaResponse) { this.setState({ showCaptchaErrorMessage: false, captchaResponse, }); } }; Auth/Login/Login.react.js Once the user verifies captcha on client-side, a callback onCaptchaSuccess fires which receives a parameter captchaResponse. This captchaResponse is sent over to server-side with key g-recaptcha-response Validation for User Login, ReCaptcha needs to be shown if the user has tried to log in for more than 1 time. For this, sessionStorage needs to be maintained. sessionStorage has an expiration time, which expires once the user closes the tab. In the constructor of Login, the attempt is initialized with sessionStorage using key loginAttempts. Now, we have the correct value of loginAttempts and can update it further if the user tries to make more attempt. constructor(props) { super(props); this.state = { ... showCaptchaErrorMessage: false, attempts: sessionStorage.getItem('loginAttempts') || 0, captchaResponse: '', }; } Auth/Login/Login.react.js If the user closes the login dialog, we need to store the current attempts state on componentWillUnmount componentWillUnmount() { sessionStorage.setItem('loginAttempts', this.state.attempts); } Auth/Login/Login.react.js If attempts are less than 1, render the reCaptcha component and send g-recaptcha-response parameter to api.susi.ai/aaa/login.json API endpoint. Server-side reCaptcha Validation for user login The checkOneOrMoreInvalidLogins function in LoginService checks if the user has attempted to login in more than once. Access the accounting object and get identity and store it in accounting. private boolean checkOneOrMoreInvalidLogins(Query post, Authorization authorization, JsonObjectWithDefault permissions) throws APIException { Accounting accounting = DAO.getAccounting(authorization.getIdentity()); JSONObject invalidLogins = accouting.getRequests().getRequests(this.getClass().getCanonicalName()); long period = permissions.getLong("periodSeconds", 600) * 1000; // get time period in which wrong logins are counted (e.g. the last 10 minutes) int counter = 0; for(String key : invalidLogins.keySet()){ if(Long.parseLong(key, 10) > System.currentTimeMillis() - period) counter++; } if(counter > 0){ return true; } return false; } aaa/LoginService.java If user has attempted to login in more than once, get from g-recaptcha-response API parameter. Check if reCaptcha is verified using VerifyRecaptcha utility class. if(checkOneOrMoreInvalidLogins(post, authorization, permissions) ){ String gRecaptchaResponse = post.get("g-recaptcha-response", null); boolean isRecaptchaVerified = VerifyRecaptcha.verify(gRecaptchaResponse); if(!isRecaptchaVerified){ result.put("message", "Please verify recaptcha"); result.put("accepted", false); return…

Memory graph mode Overview In Android App development, implementation of Android Charts play an integral part in developing database oriented apps, be it casual or professional apps. Data Analysis plays an integral part in various sectors and industries in today’s world. In sports, e.g- cricket, we see the use of charts like bar charts, line charts in various stages of the game to present the game and score analysis. In healthcare, we see the use of live real time graphs to show human health analysis like the heart rate, brain waves, etc. In the IT industry, professionals use graphical data analysis for their presentations in meetings and conferences. I have been working with FOSSASIA on the Neurolab Android App, where I had to work on this unique program mode called “Memory Graph” wherein I had to work extensively with MPAndroidChart library. While working, I understood the various use cases of charts and graphs on the Android platform. In this blog, I want to showcase the building of one part of the app with a proper tutorial. Tutorial In the Android SDK, we, the developers have been given the benefit of a tool known as GraphView. But this view being a very default and basic tool in the toolkit, has limitations in terms of customization, needs a lot of boilerplate code to set up the base to work upon. Also plotting real time graphs becomes a challenge while using the GraphView. In this tutorial, we will be focusing on the Memory Graph program mode of the app wherein we will be using an external library - MPAndroidChart to help us achieve our aim.                                                         Memory Graph       1. Firstly, open the app level build.gradle and implement the library dependency in there.                  implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'          Note - The library version may change depending upon the time you are reading     this blog. Refer here for the latest library updates. XML layout 1. The layout for our chart screen should be simple without any other components on the screen so that it is perfectly comfortable for the users to understand the graph and not get overwhelmed. Here, we are going to use a RelativeLayout as the parent to the Chart. For our Memory graph program mode, I worked with the LineChart view from the MPAndroidChart library. The xml code for the layout: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <com.github.mikephil.charting.charts.LineChart android:id="@+id/brain_chart" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> Layout binding and Java code 1. In the onCreate method of our MemoryGraph Activity, we set the layout parameters as flags for our chart layout to use of the screen window. We find the LineChart from the layout by its id and bind it up using the private variable which is going to be used to set it up programmatically. Here is the code for the onCreate method: private LineChart graph; private Thread thread; @Override public void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.fragment_memory_graph); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); graph = findViewById(R.id.mem_graph); } 2. We are going to create a method named initGraph to…

A circular loading component appears whenever an asynchronous event takes time on the front-end, to show the user that content is yet to be fetched and processed. Creating Common Loading component eased the process of handling circular loading alignment. Using common loader decreased code repetition. There were major cases for loader component, mobile view, and desktop view. Why Styled-components for SUSI.AI? Painless maintenanceOn-demand CSS injection: The components being rendered in the page are kept on track and only those component’s styles are injected into the DOM. If we combine react-loadable or some other code splitting, the app becomes really performant.Styled components generate their own class name like sc-g3h4h6 and add it as an attribute to DOM, which avoids class name overlaps and misalignments.Styled components are easier to detect as they can be detected by linter and husky. Whereas, static CSS files are not detected, which leads to dead code in the codebase and make them hard to manage. Simple dynamic styling: adapting the styling of a component based on its props, without having to manually manage dozens of classes.Automatic vendor prefixingReuse, Reduce code written for CSSSupports media queries, which makes creating a responsive PWA easier  Let’s have a look at it’s implemented. Code Integration const Container = styled.div` display: flex; align-items: center; justify-content: center; ${props => props.height ? css` height: ${props => props.height + 'rem'}; @media (max-width: 512px) { height: ${props => props.height > 20 ? props.height - 15 + 'rem' : props.height + 'rem'}; } ` : css` margin: 19rem 0; height: 100%; @media (max-width: 512px) { margin: 14rem 0; } `} `; const CircularLoader = ({ height = 'auto', color = 'primary', size = 64 }) => { return ( <Container height={height}> <CircularProgress color={color} size={size} /> </Container> ); }; components/shared/CircularLoader.js The CircularLoader component by default should acquire size 64 width and size, and color primary i.e. SUSI.AI blue color. The container created using styled component, by default should be horizontally and vertically centered. This is used to handle the case where the content takes the whole width and height(100%) of page.  If we want the container to be of specific height(lesser than the page in which the Loader is being rendered), we pass in height props. For handling the mobile views, in case of height, 100%, margin-top and margin-bottom are reduced by 5rem. In case of height passed in through component, check if the height is greater(than 20) so that the mobile view user can see the footer as well, reduce height by 15rem. If the height is lesser than 20rem, the footer is in the viewport. Before PR, let's have a look at how the Loader was rendered inside component: {loading ? ( <LoadingContainer> <CircularProgress size={64} /> </LoadingContainer> ) : ( ... )} Using Common shared loader, {loading ? <CircularLoader height={27} /> : ... Settings/Settings.react.js Adding styled component across the SUSI.AI web app proved to be of great help, the mobile views were easily made using media queries. Components positioning logic could be changed based on props, and…