mirror of
https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz
synced 2025-10-15 21:11:31 +08:00
Merge pull request #4 from pranay01/pranay
Adding signup page in frontend
This commit is contained in:
Ankit Nayan
GitHub
commit
1f0d7efae2
1
frontend/public/SigNoz-dark.svg
Normal file
1
frontend/public/SigNoz-dark.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 565.65 130.02"><defs><style>.cls-1{fill:#17181a;}.cls-2{fill:#f15931;}.cls-3{fill:#f9f2f8;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M157.17,97.54q-7.86-7.79-7.85-21.71h17.22q0,6.58,3.35,10.32t9.31,3.73h14.06a15.93,15.93,0,0,0,9.05-2.34,7.22,7.22,0,0,0,3.48-6.27V77q0-6.21-9.12-7.73l-23.29-3.92Q162,63.42,156.09,58A17.81,17.81,0,0,1,150.2,44.3V37.21a20.09,20.09,0,0,1,3.61-11.84,23.11,23.11,0,0,1,10.26-7.92,39.67,39.67,0,0,1,15.38-2.78h14.31a30.14,30.14,0,0,1,14.56,3.42,24.37,24.37,0,0,1,9.82,9.56,28.37,28.37,0,0,1,3.48,14.24H204.4a12.27,12.27,0,0,0-2.92-8.55,9.89,9.89,0,0,0-7.72-3.22H179.45a14.51,14.51,0,0,0-8.54,2.28,7.05,7.05,0,0,0-3.23,6.07v3.42q0,6.33,8.73,7.85l23.18,4q11.52,2,17.6,7.16a16.52,16.52,0,0,1,6.07,13.23v8.36a19.86,19.86,0,0,1-3.73,11.9,24.08,24.08,0,0,1-10.45,8,39.54,39.54,0,0,1-15.57,2.85H179Q165,105.33,157.17,97.54Z"/><path class="cls-1" d="M237.89,32.33a9.93,9.93,0,0,1-3-7.53,10,10,0,0,1,3-7.54,12.42,12.42,0,0,1,15.83,0,10,10,0,0,1,3,7.54,10,10,0,0,1-3,7.53,12.42,12.42,0,0,1-15.83,0Zm-.7,8.8h17.22v63.19H237.19Z"/><path class="cls-1" d="M279.1,124.26a21.43,21.43,0,0,1-7.47-15.13h17a6.41,6.41,0,0,0,2.28,4.49,7.58,7.58,0,0,0,5.06,1.71h11.4a7.65,7.65,0,0,0,6.39-3.23,13.46,13.46,0,0,0,2.47-8.42v-6a18.47,18.47,0,0,1-6.14,4.43,16.59,16.59,0,0,1-6.9,1.65h-8.74q-11.52,0-18.55-6.84t-7-18V66.08a27.41,27.41,0,0,1,3.3-13.62,22.83,22.83,0,0,1,9.24-9.11,28.27,28.27,0,0,1,13.68-3.23h7.34a18.87,18.87,0,0,1,8.42,2,18.64,18.64,0,0,1,6.65,5.31V41.13h15.95v62.55a28.43,28.43,0,0,1-3.23,13.81,22.81,22.81,0,0,1-9.18,9.24A27.79,27.79,0,0,1,307.34,130h-11.4Q285.82,130,279.1,124.26Zm25.2-35a10.11,10.11,0,0,0,8.1-4,18.2,18.2,0,0,0,3.8-10.45V66.08A13.26,13.26,0,0,0,312.78,58a9.76,9.76,0,0,0-7.34-3h-8.86a9.5,9.5,0,0,0-7.6,3.42,13.4,13.4,0,0,0-2.91,9V77.73a12.55,12.55,0,0,0,2.65,8.35,8.55,8.55,0,0,0,6.84,3.17Z"/><path class="cls-1" d="M348.62,15.68h15.57L406.73,76V15.68h17.1v88.64H408.26L365.71,44v60.28H348.62Z"/><path class="cls-1" d="M449.34,102.23a22.51,22.51,0,0,1-9.49-8.8,25.45,25.45,0,0,1-3.36-13.17V65.44a25.42,25.42,0,0,1,3.42-13.23,23.29,23.29,0,0,1,9.56-8.93,30.5,30.5,0,0,1,14.12-3.16H475a30.5,30.5,0,0,1,14.12,3.16,23.35,23.35,0,0,1,9.56,8.93,25.42,25.42,0,0,1,3.42,13.23V80.26a25.1,25.1,0,0,1-3.42,13.17,23,23,0,0,1-9.56,8.8,31.14,31.14,0,0,1-14.24,3.1h-11.4A30.86,30.86,0,0,1,449.34,102.23ZM474.6,90.52a9.37,9.37,0,0,0,7.47-3.23,12.43,12.43,0,0,0,2.79-8.42V66.58a12.43,12.43,0,0,0-2.79-8.42,9.21,9.21,0,0,0-7.34-3.23H463.84a9.21,9.21,0,0,0-7.34,3.23,12.43,12.43,0,0,0-2.79,8.42V78.87a12.43,12.43,0,0,0,2.79,8.42,9.08,9.08,0,0,0,7.21,3.23Z"/><path class="cls-1" d="M506.89,95.71l34.19-40H508.41V41.13h57.24v8.61l-34.19,40H565v14.56H506.89Z"/><path class="cls-2" d="M61.1,119.86C27.16,119.86,0,93.22,0,59.93,0,27,27.16,0,61.1,0H99.46a22.17,22.17,0,0,1,22.4,22v38C121.86,93.22,94.71,119.86,61.1,119.86Z"/><path class="cls-3" d="M60.62,34C35.27,34,21,55,20.39,55.87a6.53,6.53,0,0,0,0,7.26C21,64,35.27,85,60.62,85s39.64-21,40.23-21.89a6.51,6.51,0,0,0,0-7.25C100.26,55,86,34,60.62,34ZM23.9,60.79a2.33,2.33,0,0,1,0-2.58c.48-.72,10.65-15.65,28.83-19.24a22,22,0,0,0,0,41.05C34.55,76.44,24.38,61.5,23.9,60.79ZM50.49,59.5a2.11,2.11,0,0,1-4.22,0A14.36,14.36,0,0,1,60.62,45.15a2.11,2.11,0,1,1,0,4.21A10.14,10.14,0,0,0,50.49,59.5Zm10.13,5.13a5.13,5.13,0,1,1,5.13-5.13A5.13,5.13,0,0,1,60.62,64.63Zm36.72-3.84C96.86,61.5,86.7,76.44,68.52,80a22,22,0,0,0,0-41C86.7,42.56,96.86,57.49,97.34,58.21A2.29,2.29,0,0,1,97.34,60.79Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
1
frontend/public/SigNoz-white.svg
Normal file
1
frontend/public/SigNoz-white.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 565.65 130.02"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#f15931;}.cls-3{fill:#f9f2f8;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M157.17,97.54q-7.86-7.79-7.85-21.71h17.22q0,6.58,3.35,10.32t9.31,3.73h14.06a15.93,15.93,0,0,0,9.05-2.34,7.22,7.22,0,0,0,3.48-6.27V77q0-6.21-9.12-7.73l-23.29-3.92Q162,63.42,156.09,58A17.81,17.81,0,0,1,150.2,44.3V37.21a20.09,20.09,0,0,1,3.61-11.84,23.11,23.11,0,0,1,10.26-7.92,39.67,39.67,0,0,1,15.38-2.78h14.31a30.14,30.14,0,0,1,14.56,3.42,24.37,24.37,0,0,1,9.82,9.56,28.37,28.37,0,0,1,3.48,14.24H204.4a12.27,12.27,0,0,0-2.92-8.55,9.89,9.89,0,0,0-7.72-3.22H179.45a14.51,14.51,0,0,0-8.54,2.28,7.05,7.05,0,0,0-3.23,6.07v3.42q0,6.33,8.73,7.85l23.18,4q11.52,2,17.6,7.16a16.52,16.52,0,0,1,6.07,13.23v8.36a19.86,19.86,0,0,1-3.73,11.9,24.08,24.08,0,0,1-10.45,8,39.54,39.54,0,0,1-15.57,2.85H179Q165,105.33,157.17,97.54Z"/><path class="cls-1" d="M237.89,32.33a9.93,9.93,0,0,1-3-7.53,10,10,0,0,1,3-7.54,12.42,12.42,0,0,1,15.83,0,10,10,0,0,1,3,7.54,10,10,0,0,1-3,7.53,12.42,12.42,0,0,1-15.83,0Zm-.7,8.8h17.22v63.19H237.19Z"/><path class="cls-1" d="M279.1,124.26a21.43,21.43,0,0,1-7.47-15.13h17a6.41,6.41,0,0,0,2.28,4.49,7.58,7.58,0,0,0,5.06,1.71h11.4a7.65,7.65,0,0,0,6.39-3.23,13.46,13.46,0,0,0,2.47-8.42v-6a18.47,18.47,0,0,1-6.14,4.43,16.59,16.59,0,0,1-6.9,1.65h-8.74q-11.52,0-18.55-6.84t-7-18V66.08a27.41,27.41,0,0,1,3.3-13.62,22.83,22.83,0,0,1,9.24-9.11,28.27,28.27,0,0,1,13.68-3.23h7.34a18.87,18.87,0,0,1,8.42,2,18.64,18.64,0,0,1,6.65,5.31V41.13h15.95v62.55a28.43,28.43,0,0,1-3.23,13.81,22.81,22.81,0,0,1-9.18,9.24A27.79,27.79,0,0,1,307.34,130h-11.4Q285.82,130,279.1,124.26Zm25.2-35a10.11,10.11,0,0,0,8.1-4,18.2,18.2,0,0,0,3.8-10.45V66.08A13.26,13.26,0,0,0,312.78,58a9.76,9.76,0,0,0-7.34-3h-8.86a9.5,9.5,0,0,0-7.6,3.42,13.4,13.4,0,0,0-2.91,9V77.73a12.55,12.55,0,0,0,2.65,8.35,8.55,8.55,0,0,0,6.84,3.17Z"/><path class="cls-1" d="M348.62,15.68h15.57L406.73,76V15.68h17.1v88.64H408.26L365.71,44v60.28H348.62Z"/><path class="cls-1" d="M449.34,102.23a22.51,22.51,0,0,1-9.49-8.8,25.45,25.45,0,0,1-3.36-13.17V65.44a25.42,25.42,0,0,1,3.42-13.23,23.29,23.29,0,0,1,9.56-8.93,30.5,30.5,0,0,1,14.12-3.16H475a30.5,30.5,0,0,1,14.12,3.16,23.35,23.35,0,0,1,9.56,8.93,25.42,25.42,0,0,1,3.42,13.23V80.26a25.1,25.1,0,0,1-3.42,13.17,23,23,0,0,1-9.56,8.8,31.14,31.14,0,0,1-14.24,3.1h-11.4A30.86,30.86,0,0,1,449.34,102.23ZM474.6,90.52a9.37,9.37,0,0,0,7.47-3.23,12.43,12.43,0,0,0,2.79-8.42V66.58a12.43,12.43,0,0,0-2.79-8.42,9.21,9.21,0,0,0-7.34-3.23H463.84a9.21,9.21,0,0,0-7.34,3.23,12.43,12.43,0,0,0-2.79,8.42V78.87a12.43,12.43,0,0,0,2.79,8.42,9.08,9.08,0,0,0,7.21,3.23Z"/><path class="cls-1" d="M506.89,95.71l34.19-40H508.41V41.13h57.24v8.61l-34.19,40H565v14.56H506.89Z"/><path class="cls-2" d="M61.1,119.86C27.16,119.86,0,93.22,0,59.93,0,27,27.16,0,61.1,0H99.46a22.17,22.17,0,0,1,22.4,22v38C121.86,93.22,94.71,119.86,61.1,119.86Z"/><path class="cls-3" d="M60.62,34C35.27,34,21,55,20.39,55.87a6.53,6.53,0,0,0,0,7.26C21,64,35.27,85,60.62,85s39.64-21,40.23-21.89a6.51,6.51,0,0,0,0-7.25C100.26,55,86,34,60.62,34ZM23.9,60.79a2.33,2.33,0,0,1,0-2.58c.48-.72,10.65-15.65,28.83-19.24a22,22,0,0,0,0,41.05C34.55,76.44,24.38,61.5,23.9,60.79ZM50.49,59.5a2.11,2.11,0,0,1-4.22,0A14.36,14.36,0,0,1,60.62,45.15a2.11,2.11,0,1,1,0,4.21A10.14,10.14,0,0,0,50.49,59.5Zm10.13,5.13a5.13,5.13,0,1,1,5.13-5.13A5.13,5.13,0,0,1,60.62,64.63Zm36.72-3.84C96.86,61.5,86.7,76.44,68.52,80a22,22,0,0,0,0-41C86.7,42.56,96.86,57.49,97.34,58.21A2.29,2.29,0,0,1,97.34,60.79Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
@ -1,16 +1,10 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export default axios.create({
|
||||
|
||||
// baseURL: 'http://104.211.113.204:8080/api/v1/',
|
||||
|
||||
// baseURL: 'http://localhost:3000/api/v1/',
|
||||
|
||||
|
||||
// baseURL: 'http://104.211.113.204:8080/api/v1/',
|
||||
// baseURL: process.env.REACT_APP_QUERY_SERVICE_URL,
|
||||
baseURL: '/api/v1/',
|
||||
// console.log('in metrics API', process.env.QUERY_SERVICE_URL)
|
||||
baseURL: '/api/v1/',
|
||||
|
||||
}
|
||||
);
|
||||
16
frontend/src/api/submitForm.js
Normal file
16
frontend/src/api/submitForm.js
Normal file
@ -0,0 +1,16 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export default axios.create({
|
||||
// baseURL: 'https://api.telegram.org/bot1518273960:AAHcgVvym9a0Qkl-PKiCI84X1VZaVbkTud0/',
|
||||
// baseURL: 'http://104.211.113.204:8080/api/v1/',
|
||||
baseURL: '/api/v1/',
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
|
||||
//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,13 +2,11 @@ import axios from 'axios';
|
||||
//import { format } from 'path';
|
||||
|
||||
export default axios.create({
|
||||
// baseURL: 'http://104.211.113.204:8080/api/v1/'
|
||||
|
||||
// baseURL: 'http://localhost:3000/api/v1/', // toggle to this before pushing
|
||||
|
||||
// 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: '/api/v1/',
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -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,8 @@ const App = () => {
|
||||
<Route path="/traces/:id" component={TraceGraph}/>
|
||||
<Route path="/usage-explorer" component={UsageExplorer}/>
|
||||
<Route path="/" component={ServicesTable}/>
|
||||
<Route path="/application" exact component={ServicesTable}/>
|
||||
{/* <Route path="/signup" component={Signup} /> */}
|
||||
|
||||
</Switch>
|
||||
</Suspense>
|
||||
|
||||
53
frontend/src/components/AppWrapper.tsx
Normal file
53
frontend/src/components/AppWrapper.tsx
Normal file
@ -0,0 +1,53 @@
|
||||
import React,{Suspense, useState} from 'react';
|
||||
import {Spin} from 'antd';
|
||||
|
||||
|
||||
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
|
||||
|
||||
|
||||
const Signup = React.lazy(() => import('./Signup'));
|
||||
const App = React.lazy(() => import('./App'));
|
||||
|
||||
|
||||
|
||||
const AppWrapper = () => {
|
||||
|
||||
const [isUserAuthenticated, setIsUserAuthenticated] = useState(false);
|
||||
|
||||
return(
|
||||
|
||||
<Router basename="/">
|
||||
|
||||
<Suspense fallback={<Spin size="large" />}>
|
||||
<Switch>
|
||||
<Route path="/signup" exact component={Signup} />
|
||||
<Route path="/application" exact component={App} />
|
||||
<Route path="/application/:servicename" component={App}/>
|
||||
<Route path="/service-map" component={App}/>
|
||||
<Route path="/traces" exact component={App}/>
|
||||
<Route path="/traces/:id" component={App}/>
|
||||
<Route path="/usage-explorer" component={App}/>
|
||||
|
||||
<Route path="/" exact
|
||||
render={() => {
|
||||
return (
|
||||
localStorage.getItem('isLoggedIn')==='yes' ?
|
||||
<Redirect to="/application" /> :
|
||||
<Redirect to="/signup" />
|
||||
)
|
||||
}}
|
||||
|
||||
/>
|
||||
|
||||
|
||||
|
||||
</Switch>
|
||||
</Suspense>
|
||||
|
||||
</Router>
|
||||
);
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default AppWrapper;
|
||||
235
frontend/src/components/Signup.tsx
Normal file
235
frontend/src/components/Signup.tsx
Normal file
@ -0,0 +1,235 @@
|
||||
import React, { useState,useRef, Suspense } from 'react';
|
||||
import { Row, Space, Button, Input, Checkbox } from 'antd'
|
||||
import submitForm from '../api/submitForm';
|
||||
import { withRouter } from "react-router";
|
||||
import { RouteComponentProps } from 'react-router-dom';
|
||||
|
||||
|
||||
interface SignUpProps extends RouteComponentProps<any> {
|
||||
|
||||
}
|
||||
|
||||
const Signup = (props:SignUpProps) => {
|
||||
|
||||
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);
|
||||
// })
|
||||
|
||||
|
||||
submitForm.post('user?email='+texttolog
|
||||
).then(res => {
|
||||
console.log(res);
|
||||
console.log(res.data);
|
||||
})
|
||||
|
||||
localStorage.setItem('isLoggedIn', 'yes');
|
||||
props.history.push('/application')
|
||||
};
|
||||
|
||||
|
||||
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-white.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="mike@netflix.com"
|
||||
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="Mike"
|
||||
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="Netflix"
|
||||
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}
|
||||
>
|
||||
Get Started
|
||||
</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 withRouter(Signup);
|
||||
@ -48,7 +48,8 @@ const ServiceGraph = () => {
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div> Service Graph Component</div>
|
||||
<div> Updated Service Graph module coming soon..</div>
|
||||
|
||||
<Graph
|
||||
graph={graph}
|
||||
options={options}
|
||||
@ -57,6 +58,7 @@ const ServiceGraph = () => {
|
||||
// // if you want access to vis.js network api you can set the state in a parent component using this property
|
||||
// }}
|
||||
/>
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
@ -65,3 +67,5 @@ const ServiceGraph = () => {
|
||||
|
||||
|
||||
export default ServiceGraph;
|
||||
|
||||
|
||||
|
||||
@ -5,10 +5,11 @@ const ServiceMap = () => {
|
||||
|
||||
return (
|
||||
|
||||
<div>
|
||||
<ServiceGraph />
|
||||
<div> Service Map module coming soon...
|
||||
{/* <ServiceGraph /> */}
|
||||
</div>
|
||||
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
@ -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,9 @@ ReactDOM.render(
|
||||
<Provider store={store}>
|
||||
<React.StrictMode>
|
||||
<ThemeSwitcherProvider themeMap={themes} defaultTheme="dark">
|
||||
<App />
|
||||
|
||||
<AppWrapper />
|
||||
{/* <App /> */}
|
||||
</ThemeSwitcherProvider>
|
||||
</React.StrictMode>
|
||||
</Provider>,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user