mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-08-08 15:58:59 +08:00
basic signup with telgram ping on form submission
This commit is contained in:
Pranay Prateek
parent
3b550b32d0
commit
8b12e15c05
@ -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)
|
||||
|
||||
}
|
||||
|
||||
14
frontend/src/api/submitForm.js
Normal file
14
frontend/src/api/submitForm.js
Normal file
@ -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
|
||||
@ -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
|
||||
|
||||
|
||||
});
|
||||
|
||||
@ -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">
|
||||
@ -98,7 +101,8 @@ const App = () => {
|
||||
<Route path="/traces" exact component={TraceDetail}/>
|
||||
<Route path="/traces/:id" component={TraceGraph}/>
|
||||
<Route path="/usage-explorer" component={UsageExplorer}/>
|
||||
<Route path="/" component={ServicesTable}/>
|
||||
<Route path="/" component={ServicesTable}/>
|
||||
{/* <Route path="/signup" component={Signup} /> */}
|
||||
|
||||
</Switch>
|
||||
</Suspense>
|
||||
|
||||
34
frontend/src/components/AppWrapper.tsx
Normal file
34
frontend/src/components/AppWrapper.tsx
Normal file
@ -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;
|
||||
219
frontend/src/components/Signup.tsx
Normal file
219
frontend/src/components/Signup.tsx
Normal file
@ -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;
|
||||
@ -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>,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user