made some design changes
This commit is contained in:
Nicola Brunner
parent
1239559f45
commit
b3abffa5b7
5 changed files with 135 additions and 225 deletions
|
|
@ -4,10 +4,21 @@ import { connect } from "react-redux";
|
||||||
import { RemoteService } from "../../../remote";
|
import { RemoteService } from "../../../remote";
|
||||||
|
|
||||||
const DeleteModal = (props) => (
|
const DeleteModal = (props) => (
|
||||||
<Modal trigger={<Button color="red">Remove</Button>} closeIcon>
|
<Modal
|
||||||
|
trigger={
|
||||||
|
<Button icon labelPosition="left" inverted color="red">
|
||||||
|
<Icon name="trash alternate" />
|
||||||
|
Delete device
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
closeIcon
|
||||||
|
>
|
||||||
<Header icon="archive" content="Are you sure ?" />
|
<Header icon="archive" content="Are you sure ?" />
|
||||||
<Modal.Actions>
|
<Modal.Actions>
|
||||||
<Button color="red">
|
<Button
|
||||||
|
color="red"
|
||||||
|
// onClick={this.closeModal}
|
||||||
|
>
|
||||||
<Icon name="remove" /> No
|
<Icon name="remove" /> No
|
||||||
</Button>
|
</Button>
|
||||||
<Button onClick={() => props.removeDevice()} color="green">
|
<Button onClick={() => props.removeDevice()} color="green">
|
||||||
|
|
@ -38,17 +49,28 @@ const SettingsForm = (props) => {
|
||||||
// {this.props.device.name}
|
// {this.props.device.name}
|
||||||
/>
|
/>
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
|
|
||||||
<Form.Field>
|
<Form.Field>
|
||||||
<DeleteModal removeDevice={() => props.removeDevice(values)} />
|
<DeleteModal removeDevice={() => props.removeDevice(values)} />
|
||||||
</Form.Field>
|
</Form.Field>
|
||||||
<Button
|
//{" "}
|
||||||
onClick={() => props.saveFunction(values)}
|
<Modal.Actions>
|
||||||
color="blue"
|
<Button
|
||||||
type="submit"
|
color="red"
|
||||||
>
|
// onClick={this.closeModal}
|
||||||
Save
|
>
|
||||||
</Button>
|
<Icon name="remove" />
|
||||||
|
Discard changes
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => props.saveFunction(values)}
|
||||||
|
color="green"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
<Icon name="checkmark" />
|
||||||
|
Save changes
|
||||||
|
</Button>
|
||||||
|
//{" "}
|
||||||
|
</Modal.Actions>
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,79 +1,43 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import HomeNavbar from "./../components/HomeNavbar";
|
import HomeNavbar from "./../components/HomeNavbar";
|
||||||
import { Image, Divider, Message, Grid } from "semantic-ui-react";
|
import {
|
||||||
|
Image,
|
||||||
class Paragraph extends Component {
|
Divider,
|
||||||
state = { visible: true };
|
Message,
|
||||||
|
Grid,
|
||||||
handleDismiss = () => {
|
Button,
|
||||||
this.setState({ visible: false });
|
Icon,
|
||||||
|
Header,
|
||||||
setTimeout(() => {
|
Container,
|
||||||
this.setState({ visible: true });
|
} from "semantic-ui-react";
|
||||||
}, 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
export default class ConfirmForgotPasswrod extends Component {
|
||||||
render() {
|
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 (
|
return (
|
||||||
<p>
|
<React.Fragment>
|
||||||
<br />
|
<Button circular style={{ margin: "2em" }} href="/">
|
||||||
<i>The message will return in 2s</i>
|
<Icon name="arrow alternate circle left" />
|
||||||
<br />
|
Go Home{" "}
|
||||||
<br />
|
</Button>
|
||||||
</p>
|
<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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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 ConfirmForgotPasswrod extends React.Component {
|
|
||||||
render() {
|
|
||||||
return <MessageReg />;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,79 +1,43 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import HomeNavbar from "./../components/HomeNavbar";
|
import HomeNavbar from "./../components/HomeNavbar";
|
||||||
import { Image, Divider, Message, Grid } from "semantic-ui-react";
|
import {
|
||||||
|
Image,
|
||||||
class Paragraph extends Component {
|
Divider,
|
||||||
state = { visible: true };
|
Message,
|
||||||
|
Grid,
|
||||||
handleDismiss = () => {
|
Button,
|
||||||
this.setState({ visible: false });
|
Icon,
|
||||||
|
Header,
|
||||||
setTimeout(() => {
|
Container,
|
||||||
this.setState({ visible: true });
|
} from "semantic-ui-react";
|
||||||
}, 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
export default class ConfirmRegistration extends Component {
|
||||||
render() {
|
render() {
|
||||||
if (this.state.visible) {
|
|
||||||
return (
|
|
||||||
<Message
|
|
||||||
onDismiss={this.handleDismiss}
|
|
||||||
header="Congratulation!"
|
|
||||||
content="An e-mail has been sent your address, please confirm
|
|
||||||
your registration by following the enclosed link"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<p>
|
<React.Fragment>
|
||||||
<br />
|
<Button circular style={{ margin: "2em" }} href="/">
|
||||||
<i>The message will return in 2s</i>
|
<Icon name="arrow alternate circle left" />
|
||||||
<br />
|
Go Home{" "}
|
||||||
<br />
|
</Button>
|
||||||
</p>
|
<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" /> Congratulation!
|
||||||
|
</Header>
|
||||||
|
<Container textAlign="center">
|
||||||
|
<p>
|
||||||
|
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.
|
||||||
|
</p>
|
||||||
|
</Container>
|
||||||
|
</Grid.Column>
|
||||||
|
</Grid>
|
||||||
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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 ConfirmRegistration extends React.Component {
|
|
||||||
render() {
|
|
||||||
return <MessageReg />;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,79 +1,39 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import HomeNavbar from "./../components/HomeNavbar";
|
import HomeNavbar from "./../components/HomeNavbar";
|
||||||
import { Image, Divider, Message, Grid } from "semantic-ui-react";
|
import {
|
||||||
|
Image,
|
||||||
class Paragraph extends Component {
|
Divider,
|
||||||
state = { visible: true };
|
Message,
|
||||||
|
Grid,
|
||||||
handleDismiss = () => {
|
Button,
|
||||||
this.setState({ visible: false });
|
Icon,
|
||||||
|
Header,
|
||||||
setTimeout(() => {
|
Container,
|
||||||
this.setState({ visible: true });
|
} from "semantic-ui-react";
|
||||||
}, 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
render() {
|
|
||||||
if (this.state.visible) {
|
|
||||||
return (
|
|
||||||
<Message onDismiss={this.handleDismiss}>
|
|
||||||
<Message.Header>
|
|
||||||
Congratulation<ins>s</ins>!
|
|
||||||
</Message.Header>
|
|
||||||
Your password has been successfully reset
|
|
||||||
</Message>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 ConfirmResetPassword extends Component {
|
export default class ConfirmResetPassword extends Component {
|
||||||
render() {
|
render() {
|
||||||
return <MessageReg />;
|
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" /> Congratulation!
|
||||||
|
</Header>
|
||||||
|
<Container textAlign="center">
|
||||||
|
<p>Your password has been successfully reset.</p>
|
||||||
|
</Container>
|
||||||
|
</Grid.Column>
|
||||||
|
</Grid>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -77,7 +77,7 @@ export default class ForgotPass extends Component {
|
||||||
<Form.Input
|
<Form.Input
|
||||||
icon="address card outline"
|
icon="address card outline"
|
||||||
iconPosition="left"
|
iconPosition="left"
|
||||||
placeholder="Username or E-mail"
|
placeholder="Enter your E-mail"
|
||||||
name="user"
|
name="user"
|
||||||
type="text"
|
type="text"
|
||||||
onChange={this.onChangeHandler}
|
onChange={this.onChangeHandler}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue