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";
|
||||
|
||||
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 ?" />
|
||||
<Modal.Actions>
|
||||
<Button color="red">
|
||||
<Button
|
||||
color="red"
|
||||
// onClick={this.closeModal}
|
||||
>
|
||||
<Icon name="remove" /> No
|
||||
</Button>
|
||||
<Button onClick={() => props.removeDevice()} color="green">
|
||||
|
|
@ -38,17 +49,28 @@ const SettingsForm = (props) => {
|
|||
// {this.props.device.name}
|
||||
/>
|
||||
</Form.Field>
|
||||
|
||||
<Form.Field>
|
||||
<DeleteModal removeDevice={() => props.removeDevice(values)} />
|
||||
</Form.Field>
|
||||
//{" "}
|
||||
<Modal.Actions>
|
||||
<Button
|
||||
color="red"
|
||||
// onClick={this.closeModal}
|
||||
>
|
||||
<Icon name="remove" />
|
||||
Discard changes
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => props.saveFunction(values)}
|
||||
color="blue"
|
||||
color="green"
|
||||
type="submit"
|
||||
>
|
||||
Save
|
||||
<Icon name="checkmark" />
|
||||
Save changes
|
||||
</Button>
|
||||
//{" "}
|
||||
</Modal.Actions>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,79 +1,43 @@
|
|||
import React, { Component } from "react";
|
||||
import HomeNavbar from "./../components/HomeNavbar";
|
||||
import { Image, 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);
|
||||
};
|
||||
import {
|
||||
Image,
|
||||
Divider,
|
||||
Message,
|
||||
Grid,
|
||||
Button,
|
||||
Icon,
|
||||
Header,
|
||||
Container,
|
||||
} from "semantic-ui-react";
|
||||
|
||||
export default class ConfirmForgotPasswrod extends Component {
|
||||
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 (
|
||||
<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>
|
||||
<br />
|
||||
<i>The message will return in 2s</i>
|
||||
<br />
|
||||
<br />
|
||||
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 HomeNavbar from "./../components/HomeNavbar";
|
||||
import { Image, 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);
|
||||
};
|
||||
import {
|
||||
Image,
|
||||
Divider,
|
||||
Message,
|
||||
Grid,
|
||||
Button,
|
||||
Icon,
|
||||
Header,
|
||||
Container,
|
||||
} from "semantic-ui-react";
|
||||
|
||||
export default class ConfirmRegistration extends Component {
|
||||
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 (
|
||||
<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>
|
||||
<br />
|
||||
<i>The message will return in 2s</i>
|
||||
<br />
|
||||
<br />
|
||||
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 HomeNavbar from "./../components/HomeNavbar";
|
||||
import { Image, 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}>
|
||||
<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>
|
||||
);
|
||||
import {
|
||||
Image,
|
||||
Divider,
|
||||
Message,
|
||||
Grid,
|
||||
Button,
|
||||
Icon,
|
||||
Header,
|
||||
Container,
|
||||
} from "semantic-ui-react";
|
||||
|
||||
export default class ConfirmResetPassword extends Component {
|
||||
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
|
||||
icon="address card outline"
|
||||
iconPosition="left"
|
||||
placeholder="Username or E-mail"
|
||||
placeholder="Enter your E-mail"
|
||||
name="user"
|
||||
type="text"
|
||||
onChange={this.onChangeHandler}
|
||||
|
|
|
|||
Loading…
Reference in a new issue