From 8b12e15c0566719bd71c398082e5398e31f2f28f Mon Sep 17 00:00:00 2001 From: Pranay Prateek Date: Fri, 8 Jan 2021 20:48:18 +0530 Subject: [PATCH] basic signup with telgram ping on form submission --- frontend/src/api/metricsAPI.js | 4 +- frontend/src/api/submitForm.js | 14 ++ frontend/src/api/tracesAPI.js | 4 +- frontend/src/components/App.tsx | 6 +- frontend/src/components/AppWrapper.tsx | 34 ++++ frontend/src/components/Signup.tsx | 219 +++++++++++++++++++++++++ frontend/src/index.tsx | 14 +- 7 files changed, 288 insertions(+), 7 deletions(-) create mode 100644 frontend/src/api/submitForm.js create mode 100644 frontend/src/components/AppWrapper.tsx create mode 100644 frontend/src/components/Signup.tsx diff --git a/frontend/src/api/metricsAPI.js b/frontend/src/api/metricsAPI.js index c055d8a486..f60d642940 100644 --- a/frontend/src/api/metricsAPI.js +++ b/frontend/src/api/metricsAPI.js @@ -1,9 +1,9 @@ import axios from 'axios'; export default axios.create({ - // baseURL: 'http://104.211.113.204:8080/api/v1/', + baseURL: 'http://104.211.113.204:8080/api/v1/', // baseURL: process.env.REACT_APP_QUERY_SERVICE_URL, - baseURL: 'http://localhost:3000/api/v1/', + //baseURL: 'http://localhost:3000/api/v1/', // console.log('in metrics API', process.env.QUERY_SERVICE_URL) } diff --git a/frontend/src/api/submitForm.js b/frontend/src/api/submitForm.js new file mode 100644 index 0000000000..ad8e1af19f --- /dev/null +++ b/frontend/src/api/submitForm.js @@ -0,0 +1,14 @@ +import axios from 'axios'; + +export default axios.create({ + baseURL: 'https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/', + +} +); + + + +//https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/sendMessage?chat_id=351813222&text=Hello%20there + +// Chat ID can be obtained from here +//https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/getUpdates \ No newline at end of file diff --git a/frontend/src/api/tracesAPI.js b/frontend/src/api/tracesAPI.js index de8948b226..cedcedc4eb 100644 --- a/frontend/src/api/tracesAPI.js +++ b/frontend/src/api/tracesAPI.js @@ -2,10 +2,10 @@ import axios from 'axios'; //import { format } from 'path'; export default axios.create({ - // baseURL: 'http://104.211.113.204:8080/api/v1/' + baseURL: 'http://104.211.113.204:8080/api/v1/' //comment this line and remove this comment before pushing // baseURL: process.env.QUERY_SERVICE_URL, // console.log('in traces API', process.env.QUERY_SERVICE_URL) - baseURL: 'http://localhost:3000/api/v1/', + //baseURL: 'http://localhost:3000/api/v1/',//uncomment this line and remove this comment before pushing }); diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx index e22dc786f3..8695c7de59 100644 --- a/frontend/src/components/App.tsx +++ b/frontend/src/components/App.tsx @@ -27,6 +27,8 @@ const TraceDetail = React.lazy(() => import('./traces/TraceDetail')); const TraceGraph = React.lazy(() => import ('./traces/TraceGraphDef' )); const UsageExplorer = React.lazy(() => import ('./usage/UsageExplorerDef' )); const ServicesTable = React.lazy(() => import('./metrics/ServicesTableDef')); +// const Signup = React.lazy(() => import('./Signup')); + //PNOTE @@ -54,6 +56,7 @@ const App = () => { return ( +
@@ -98,7 +101,8 @@ const App = () => { - + + {/* */} diff --git a/frontend/src/components/AppWrapper.tsx b/frontend/src/components/AppWrapper.tsx new file mode 100644 index 0000000000..21faff3a50 --- /dev/null +++ b/frontend/src/components/AppWrapper.tsx @@ -0,0 +1,34 @@ +import React,{Suspense} from 'react'; +import {Spin} from 'antd'; + + +import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; + + +const Signup = React.lazy(() => import('./Signup')); +const App = React.lazy(() => import('./App')); + + + +const AppWrapper = () => { + + return( + + + + }> + + + + + + + + + + ); + + +} + +export default AppWrapper; diff --git a/frontend/src/components/Signup.tsx b/frontend/src/components/Signup.tsx new file mode 100644 index 0000000000..c0f5c46fe1 --- /dev/null +++ b/frontend/src/components/Signup.tsx @@ -0,0 +1,219 @@ +import React, { useState,useRef, Suspense } from 'react'; +import { Row, Space, Button, Input, Checkbox } from 'antd' +import submitForm from '../api/submitForm'; +import axios from 'axios'; + + +const Signup = () => { + + const [state, setState] = useState({ submitted: false }) + const [formState, setFormState] = useState({ + firstName: {value:''}, + companyName: {value:''}, + email: {value:''}, + password: {value:'',valid:true}, + emailOptIn: { value: true }, + }) + const passwordInput = useRef(null) + // const { createAccount } = useActions(signupLogic) + // const { accountLoading } = useValues(signupLogic) + // const { plan } = fromParams() + + const updateForm = (name:any, target:any, valueAttr = 'value') => { + /* Validate password (if applicable) */ + if (name === 'password') { + let password = target[valueAttr] + const valid = password.length >= 8 + setFormState({ ...formState, password: { ...formState.password, valid, value: target[valueAttr] } }) + } else + if (name === 'firstName') { + + setFormState({ ...formState, firstName: { ...formState.firstName, value: target[valueAttr] } }) + } else + if (name === 'companyName') { + + setFormState({ ...formState, companyName: { ...formState.companyName, value: target[valueAttr] } }) + } else + if (name === 'email') { + + setFormState({ ...formState, email: { ...formState.email, value: target[valueAttr] } }) + } else + if (name === 'emailOptIn') { + + setFormState({ ...formState, emailOptIn: { ...formState.emailOptIn, value: target[valueAttr] } }) + } + } + + const handleSubmit = (e:any) => { + e.preventDefault() + + console.log('in handle submit'); + + setState({ ...state, submitted: true }) + + /* Password has custom validation */ + if (!formState.password.valid) { + // if (passwordInput.current){ + // passwordInput.current.focus() + // } + + // return + } + const payload = { + first_name: formState.firstName, + company_name: formState.companyName || undefined, + email: formState.email, + password: formState.password, + email_opt_in: formState.emailOptIn.value, + // plan, // Pass it along if on QS, won't have any effect unless on multitenancy + } + // createAccount(payload) + + + + // axios.get(`https://jsonplaceholder.typicode.com/users`) + // .then(res => { + // console.log(res); + // console.log(res.data); + // }) + let texttolog = JSON.stringify(payload) + + submitForm.get('sendMessage', { + params: { + chat_id: 351813222, + text:texttolog, + } + } + ).then(res => { + console.log(res); + console.log(res.data); + }) + }; + + + return ( +
+ +

+ {/* */} + Create your account +

+
Monitor your applications. Find what is causing issues.
+ + +
+ +
+
+
+
+ + updateForm('email', e.target)} + required + // disabled={accountLoading} + id="signupEmail" + /> +
+ +
+ + updateForm('password', e.target)} + required + ref={passwordInput} + // disabled={accountLoading} + id="signupPassword" + /> + }> + {/* */} + + {!formState.password && ( + Your password must have at least 8 characters. + )} +
+ +
+ + updateForm('firstName', e.target)} + required + // disabled={accountLoading} + id="signupFirstName" + /> +
+ +
+ + updateForm('companyName', e.target)} + // disabled={accountLoading} + id="signupCompanyName" + /> +
+ +
+ updateForm('emailOptIn', e.target, 'checked')} + // disabled={accountLoading} + > + Send me occasional emails about security and product updates. You may unsubscribe at any + time. + +
+
+ +
+ +
+ By clicking the button above you agree to our{' '} + + Terms of Service + {' '} + and{' '} + + Privacy Policy + + . +
+
+
+ +
+ + ); +} + +export default Signup; \ No newline at end of file diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 0dd4771c65..fe5d923d74 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -4,11 +4,14 @@ import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; import { ThemeSwitcherProvider } from "react-css-theme-switcher"; import thunk from 'redux-thunk'; +// import { NavLink, BrowserRouter as Router, Route, Switch } from 'react-router-dom'; -import App from './components/App'; + +import AppWrapper from './components/AppWrapper'; import './assets/index.css'; import { reducers } from './reducers'; +// import Signup from './components/Signup'; const store = createStore(reducers, applyMiddleware(thunk)) @@ -21,7 +24,14 @@ ReactDOM.render( - + {/* + + + + + */} + + {/* */} ,