Merge branch '114-remove-duplications' into 'dev'
Resolve "remove-duplications" Closes #114 See merge request sa4-2020/the-sanmarinoes/frontend!146
This commit is contained in:
commit
a576632ef7
7 changed files with 82 additions and 343 deletions
|
@ -6,7 +6,6 @@ import Signup from "./views/Signup";
|
|||
import Login from "./views/Login";
|
||||
import FourOhFour from "./views/FourOhFour";
|
||||
import ForgotPass from "./views/Forgot-password";
|
||||
import ChangePass from "./views/Forgot-pass-reset";
|
||||
import ConfirmForgotPasswrod from "./views/ConfirmForgotPassword";
|
||||
import ConfirmRegistration from "./views/ConfirmRegistration";
|
||||
import ConfirmResetPassword from "./views/ConfirmResetPassword";
|
||||
|
@ -49,7 +48,7 @@ class App extends Component {
|
|||
{this.props.loggedIn ? <Dashboard /> : <Redirect to="/login" />}
|
||||
</Route>
|
||||
<Route path="/forgot-password">
|
||||
<ForgotPass />
|
||||
<ForgotPass type="FPassword1" />
|
||||
</Route>
|
||||
<Route path="/sent-email">
|
||||
<ConfirmForgotPasswrod />
|
||||
|
@ -60,9 +59,11 @@ class App extends Component {
|
|||
<Route path="/instruction">
|
||||
<Instruction />
|
||||
</Route>
|
||||
<Route path="/forgot-pass-reset"> </Route>
|
||||
<Route path="/forgot-pass-reset">
|
||||
<ForgotPass type="FPassword1" />
|
||||
</Route>
|
||||
<Route path="/password-reset">
|
||||
<ChangePass query={this.state.query} />
|
||||
<ForgotPass type="FPassword2" query={this.state.query} />
|
||||
</Route>
|
||||
<Route path="/conf-reset-pass">
|
||||
<ConfirmResetPassword />
|
||||
|
|
|
@ -1,82 +0,0 @@
|
|||
import { Dropdown } from "semantic-ui-react";
|
||||
import React, { Component } from "react";
|
||||
|
||||
export default class FilterDevices extends Component {
|
||||
render() {
|
||||
const tagOptions = [
|
||||
{
|
||||
key: "regularLight",
|
||||
text: "regularLight",
|
||||
value: "regularLight",
|
||||
label: { color: "red", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "dimmableLight",
|
||||
text: "dimmableLight",
|
||||
value: "dimmableLight",
|
||||
label: { color: "blue", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "buttonDimmer",
|
||||
text: "buttonDimmer",
|
||||
value: "buttonDimmer",
|
||||
label: { color: "black", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "knobDimmer",
|
||||
text: "knobDimmer",
|
||||
value: "knobDimmer",
|
||||
label: { color: "purple", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "motionSensor",
|
||||
text: "motionSensor",
|
||||
value: "motionSensor",
|
||||
label: { color: "orange", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "sensor",
|
||||
text: "sensor",
|
||||
value: "sensor",
|
||||
label: { empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "smartPlug",
|
||||
text: "smartPlug",
|
||||
value: "smartPlug",
|
||||
label: { color: "pink", empty: true, circular: true },
|
||||
},
|
||||
{
|
||||
key: "switch",
|
||||
text: "switch",
|
||||
value: "switch",
|
||||
label: { color: "green", empty: true, circular: true },
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Dropdown
|
||||
text="Filter Devices"
|
||||
icon="filter"
|
||||
floating
|
||||
labeled
|
||||
button
|
||||
className="icon"
|
||||
>
|
||||
<Dropdown.Menu>
|
||||
<Dropdown.Divider />
|
||||
<Dropdown.Header icon="tags" content="Tag Device" />
|
||||
<Dropdown.Menu scrolling>
|
||||
{tagOptions.map((option) => (
|
||||
<Dropdown.Item
|
||||
key={option.value}
|
||||
{...option}
|
||||
onClick={this.props.filterDevices}
|
||||
/>
|
||||
))}
|
||||
</Dropdown.Menu>
|
||||
</Dropdown.Menu>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -431,7 +431,7 @@ class AutomationSaveModal extends Component {
|
|||
automation.id = this.props.id;
|
||||
automation.triggers = [];
|
||||
automation.scenes = [];
|
||||
|
||||
automation.conditions = [];
|
||||
for (let i = 0; i < this.state.order.length; i++) {
|
||||
automation.scenes.push({
|
||||
priority: i,
|
||||
|
|
|
@ -1,40 +1,10 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Image,
|
||||
Grid,
|
||||
Button,
|
||||
Icon,
|
||||
Header,
|
||||
Container,
|
||||
} from "semantic-ui-react";
|
||||
import Confirm from "./Confirm";
|
||||
|
||||
const msg =
|
||||
"An E-mail has been sent to your address, confirm your registration by following the enclosed link. If you don't find the E-mail please check also the spam folder.";
|
||||
export default class ConfirmForgotPasswrod extends Component {
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button circular style={{ margin: "2em" }} href="/">
|
||||
<Icon name="arrow alternate circle left" />
|
||||
Go Home{" "}
|
||||
</Button>
|
||||
<Grid
|
||||
textAlign="center"
|
||||
style={{ height: "70vh" }}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as="h2" color="blue" textAlign="center">
|
||||
<Image src="img/logo.png" /> Link has been sent!
|
||||
</Header>
|
||||
<Container textAlign="center">
|
||||
<p>
|
||||
An E-mail has been sent to your address, please follow the
|
||||
instructions to create a new password. If you don't find the
|
||||
E-mail please check also the spam folder.
|
||||
</p>
|
||||
</Container>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
return <Confirm msg={msg} />;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,114 +0,0 @@
|
|||
import React, { Component } from "react";
|
||||
import {
|
||||
Button,
|
||||
Form,
|
||||
Grid,
|
||||
Header,
|
||||
Image,
|
||||
Icon,
|
||||
Message,
|
||||
} from "semantic-ui-react";
|
||||
import { Redirect } from "react-router-dom";
|
||||
import { Forms } from "../remote";
|
||||
|
||||
export default class ChangePass extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
password: "",
|
||||
error: {
|
||||
state: false,
|
||||
message: "",
|
||||
},
|
||||
success: false,
|
||||
};
|
||||
this.handleChangePassword = this.handleChangePassword.bind(this);
|
||||
}
|
||||
|
||||
onChangeHandler = (event) => {
|
||||
let nam = event.target.name;
|
||||
let val = event.target.value;
|
||||
this.setState({ [nam]: val });
|
||||
};
|
||||
|
||||
handleChangePassword = (e) => {
|
||||
if (this.state.confirmPassword !== this.state.password) {
|
||||
this.setState({
|
||||
error: {
|
||||
state: true,
|
||||
message: "Passwords do not match.",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Forms.submitResetPassword(this.props.query.token, this.state.password)
|
||||
.then(() => this.setState({ success: true }))
|
||||
.catch((err) =>
|
||||
this.setState({
|
||||
error: { state: true, message: err.messages.join(" - ") },
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.success) {
|
||||
return <Redirect to="/login" />;
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Button circular style={{ margin: "2em" }} href="/">
|
||||
<Icon name="arrow alternate circle left" />
|
||||
Go Home{" "}
|
||||
</Button>
|
||||
<Grid
|
||||
textAlign="center"
|
||||
style={{ height: "70vh" }}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<Grid.Column style={{ maxWidth: 450 }}>
|
||||
<Header as="h2" color="blue" textAlign="center">
|
||||
<Image src="img/logo.png" /> Reset Password
|
||||
</Header>
|
||||
<Form
|
||||
size="large"
|
||||
style={{ marginTop: "2em" }}
|
||||
error={this.state.error.state}
|
||||
>
|
||||
<Message
|
||||
error
|
||||
header="Change Password Error"
|
||||
content={this.state.error.message}
|
||||
/>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Reset your password"
|
||||
name="password"
|
||||
type="password"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Confirm Password"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
color="blue"
|
||||
fluid
|
||||
size="large"
|
||||
onClick={this.handleChangePassword}
|
||||
>
|
||||
Confirm password
|
||||
</Button>
|
||||
</Form>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
|
@ -22,6 +22,8 @@ export default class ForgotPass extends Component {
|
|||
},
|
||||
success: false,
|
||||
};
|
||||
|
||||
this.handleChangePassword = this.handleChangePassword.bind(this);
|
||||
}
|
||||
|
||||
onChangeHandler = (event) => {
|
||||
|
@ -40,7 +42,27 @@ export default class ForgotPass extends Component {
|
|||
);
|
||||
};
|
||||
|
||||
handleChangePassword = (e) => {
|
||||
if (this.state.confirmPassword !== this.state.password) {
|
||||
this.setState({
|
||||
error: {
|
||||
state: true,
|
||||
message: "Passwords do not match.",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
Forms.submitResetPassword(this.props.query.token, this.state.password)
|
||||
.then(() => this.setState({ success: true }))
|
||||
.catch((err) =>
|
||||
this.setState({
|
||||
error: { state: true, message: err.messages.join(" - ") },
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
console.log(this.props);
|
||||
if (this.state.success) {
|
||||
return <Redirect to="sent-email" />;
|
||||
}
|
||||
|
@ -74,23 +96,56 @@ export default class ForgotPass extends Component {
|
|||
</span>
|
||||
))}
|
||||
</Message>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Enter your E-mail"
|
||||
name="user"
|
||||
type="text"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
color="blue"
|
||||
fluid
|
||||
size="large"
|
||||
onClick={this.handleSendEmail}
|
||||
>
|
||||
Send E-mail
|
||||
</Button>
|
||||
{this.props.type === "FPassword1" ? (
|
||||
<React.Fragment>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Enter your E-mail"
|
||||
name="user"
|
||||
type="text"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
color="blue"
|
||||
fluid
|
||||
size="large"
|
||||
onClick={this.handleSendEmail}
|
||||
>
|
||||
Send E-mail
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<React.Fragment>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Reset your password"
|
||||
name="password"
|
||||
type="password"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Form.Input
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Confirm Password"
|
||||
name="confirmPassword"
|
||||
type="password"
|
||||
onChange={this.onChangeHandler}
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
color="blue"
|
||||
fluid
|
||||
size="large"
|
||||
onClick={this.handleChangePassword}
|
||||
>
|
||||
Confirm password
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</Form>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
|
|
|
@ -1,91 +0,0 @@
|
|||
import React, { Component } from "react";
|
||||
import { render } from "react-dom";
|
||||
import HomeNavbar from "./../components/HomeNavbar";
|
||||
import {
|
||||
Container,
|
||||
Icon,
|
||||
Image,
|
||||
Menu,
|
||||
Sidebar,
|
||||
Responsive,
|
||||
Header,
|
||||
Divider,
|
||||
Message,
|
||||
Grid,
|
||||
} from "semantic-ui-react";
|
||||
|
||||
class Paragraph extends Component {
|
||||
state = { visible: true };
|
||||
|
||||
handleDismiss = () => {
|
||||
this.setState({ visible: false });
|
||||
|
||||
setTimeout(() => {
|
||||
this.setState({ visible: true });
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
render() {
|
||||
if (this.state.visible) {
|
||||
return (
|
||||
<Message
|
||||
onDismiss={this.handleDismiss}
|
||||
header="Link has been sent!"
|
||||
content="An e-mail has been sent your address, please follow the
|
||||
instruction to create a new password"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<p>
|
||||
<br />
|
||||
<i>The message will return in 2s</i>
|
||||
<br />
|
||||
<br />
|
||||
</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const MessageReg = () => (
|
||||
<Grid>
|
||||
<HomeNavbar />
|
||||
<Divider />
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}>
|
||||
<Grid.Column width={6}></Grid.Column>
|
||||
<Grid.Column width={10}>
|
||||
<Image src="title5.png" />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
</Grid.Row>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
<Grid.Column width={4}>
|
||||
<Image src="./img/logo.png" />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={6}>
|
||||
<Paragraph />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={4}></Grid.Column>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}></Grid.Row>
|
||||
<Grid.Row height={3}>
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
<Grid.Column width={10}>
|
||||
<Divider />
|
||||
</Grid.Column>
|
||||
<Grid.Column width={3}></Grid.Column>
|
||||
</Grid.Row>
|
||||
</Grid>
|
||||
);
|
||||
|
||||
export default class ForgotPasswrod extends React.Component {
|
||||
render() {
|
||||
return <MessageReg />;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue