basic signup with telgram ping on form submission

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)
     
 }

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

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
 
   
 });

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 (
     <Router basename="/">
+
       <Layout style={{ minHeight: '100vh' }}>
         <Sider collapsible collapsed={collapsed} onCollapse={onCollapse} width={160}>
           <div className="logo">
@@ -99,6 +102,7 @@ const App = () =>  {
                   <Route path="/traces/:id" component={TraceGraph}/>
                   <Route path="/usage-explorer" component={UsageExplorer}/>
                   <Route path="/"  component={ServicesTable}/>
+                  {/* <Route path="/signup" component={Signup} /> */}
 
                 </Switch>
             </Suspense>

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(
+
+        <Router basename="/">
+
+        <Suspense fallback={<Spin size="large" />}>
+                <Switch>
+                    <Route path="/signup" exact component={Signup} />
+
+                    <Route path="/" exact component={App}/>
+
+                </Switch>
+        </Suspense>
+
+        </Router>
+    );
+
+
+}
+
+export default AppWrapper; 

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 (
+        <div className="signup-form">
+        <Space direction="vertical" className="space-top" style={{ width: '100%', paddingLeft: 32 }}>
+            <h1 className="title" style={{ marginBottom: 0, marginTop: 40, display: 'flex', alignItems: 'center' }}>
+                {/* <img src={"signoz.svg"} alt="" style={{ height: 60 }} /> */}
+                 Create your account
+            </h1>
+            <div className="page-caption">Monitor your applications. Find what is causing issues.</div>
+        </Space>
+        <Row style={{ display: 'flex', justifyContent: 'center' }}>
+            <div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
+                <img
+                    src={"signoz.svg"}
+                    style={{ maxHeight: '100%', maxWidth: 300, marginTop: 64 }}
+                    alt=""
+                    className="main-img"
+                />
+            </div>
+            <div
+                style={{
+                    display: 'flex',
+                    justifyContent: 'flex-start',
+                    margin: '0 32px',
+                    flexDirection: 'column',
+                    paddingTop: 32,
+                    maxWidth: '32rem',
+                }}
+            >
+                <form onSubmit={handleSubmit}>
+                    <div className="input-set">
+                        <label htmlFor="signupEmail">Email</label>
+                        <Input
+                            placeholder="jane@hogflix.io"
+                            type="email"
+                            value={formState.email.value}
+                            onChange={(e) => updateForm('email', e.target)}
+                            required
+                            // disabled={accountLoading}
+                            id="signupEmail"
+                        />
+                    </div>
+
+                    <div className={`input-set ${state.submitted && !formState.password.valid ? 'errored' : ''}`}>
+                        <label htmlFor="signupPassword">Password</label>
+                        <Input.Password
+                            value={formState.password.value}
+                            onChange={(e) => updateForm('password', e.target)}
+                            required
+                            ref={passwordInput}
+                            // disabled={accountLoading}
+                            id="signupPassword"
+                        />
+                        <Suspense fallback={<span />}>
+                            {/* <PasswordStrength password={formState.password.value} /> */}
+                        </Suspense>
+                        {!formState.password && (
+                            <span className="caption">Your password must have at least 8 characters.</span>
+                        )}
+                    </div>
+
+                    <div className="input-set">
+                        <label htmlFor="signupFirstName">First Name</label>
+                        <Input
+                            placeholder="Jane"
+                            autoFocus
+                            value={formState.firstName.value}
+                            onChange={(e) => updateForm('firstName', e.target)}
+                            required
+                            // disabled={accountLoading}
+                            id="signupFirstName"
+                        />
+                    </div>
+
+                    <div className="input-set">
+                        <label htmlFor="signupCompanyName">Company or Project</label>
+                        <Input
+                            placeholder="Hogflix Movies"
+                            value={formState.companyName.value}
+                            onChange={(e) => updateForm('companyName', e.target)}
+                            // disabled={accountLoading}
+                            id="signupCompanyName"
+                        />
+                    </div>
+
+                    <div>
+                        <Checkbox
+                            checked={formState.emailOptIn.value}
+                            onChange={(e) => updateForm('emailOptIn', e.target, 'checked')}
+                            // disabled={accountLoading}
+                        >
+                            Send me occasional emails about security and product updates. You may unsubscribe at any
+                            time.
+                        </Checkbox>
+                    </div>
+                    <div className="text-center space-top">
+                        <Button
+                            type="primary"
+                            htmlType="submit"
+                            data-attr="signup"
+                            disabled={state.submitted && !formState.password}
+                            // loading={accountLoading}
+                        >
+                            Create my account
+                        </Button>
+                    </div>
+
+                    <div style={{ color: '#666666', marginBottom: 60, textAlign: 'center' }} className="space-top">
+                        By clicking the button above you agree to our{' '}
+                        <a href="https://signoz.io" target="_blank">
+                            Terms of Service
+                        </a>{' '}
+                        and{' '}
+                        <a href="https://signoz.io" target="_blank">
+                            Privacy Policy
+                        </a>
+                        .
+                    </div>
+                </form>
+            </div>
+        </Row>
+    </div>
+
+    );
+}
+
+export default Signup;

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(
   <Provider store={store}>
     <React.StrictMode>
         <ThemeSwitcherProvider themeMap={themes} defaultTheme="dark">
-            <App />
+        {/* <Router basename="/signup">
+        <Switch>
+          <Route path="/signup" component={Signup} />
+          <Route path="/" exact component={App} />
+        </Switch>
+        </Router> */}
+        <AppWrapper />
+        {/* <App /> */}
         </ThemeSwitcherProvider>
     </React.StrictMode>
   </Provider>,