Login Screen React Component

Login Screen React component represents Login Screen component.

Login Screen Components

There are following components included:

• **LoginScreen** / **F7LoginScreen** - login screen element
• **LoginScreenTitle** / **F7LoginScreenTitle** - login screen title element

Login Screen Properties

Login Screen Methods

Login Screen Events

Open And Close Login Screen

In addition to Login Screen open()/close() methods, you can open and close it:

• using Login Screen API
• by passing true or false to its opened prop
• by clicking on Link or Button with relevant loginScreenOpen property (to open it) and loginScreenClose property to close it

Access To Login Screen Instance

You can access Login Screen initialized instance by accessing **.f7LoginScreen** component’s property.

Examples

1. export default class extends React.Component {
2. constructor(props) {
3. super(props);

5. this.state = {
6. loginScreenOpened: false,
7. username: '',
8. password: '',
9. };
10. }
11. render() {
12. return (
13. <Page>
14. <Navbar title="Login Screen"></Navbar>
15. <Block>
16. <p>Framework7 comes with ready to use Login Screen layout. It could be used inside of page or inside of popup (Embedded) or as a standalone overlay:</p>
17. </Block>

19. <List>
20. <ListItem link="/login-screen-page/" title="As Separate Page"></ListItem>
21. </List>

23. <Block>
24. <Button raised big fill loginScreenOpen=".demo-login-screen">As Overlay</Button>
25. </Block>

27. <Block>
28. <Button raised big fill onClick={() => {this.setState({loginScreenOpened : true})}}>Open Via Prop Change</Button>
29. </Block>

31. <LoginScreen className="demo-login-screen" opened={this.state.loginScreenOpened} onLoginScreenClosed={() => {this.setState({loginScreenOpened : false})}}>
32. <Page loginScreen>
33. <LoginScreenTitle>Framework7</LoginScreenTitle>
34. <List form>
35. <ListInput
36. label="Username"
37. type="text"
38. placeholder="Your username"
39. value={this.state.username}
40. onInput={(e) => {
41. this.setState({ username: e.target.value});
42. }}
43. />
44. <ListInput
45. label="Password"
46. type="password"
47. placeholder="Your password"
48. value={this.state.password}
49. onInput={(e) => {
50. this.setState({ password: e.target.value});
51. }}
52. />
53. </List>
54. <List>
55. <ListButton onClick={this.signIn.bind(this)}>Sign In</ListButton>
56. <BlockFooter>Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</BlockFooter>
57. </List>
58. </Page>
59. </LoginScreen>
60. </Page>
61. )
62. }
63. signIn() {
64. const self = this;
65. const app = self.$f7;

67. app.dialog.alert(`Username: ${self.state.username}<br>Password: ${self.state.password}`, () => {
68. app.loginScreen.close();
69. });
70. }
71. };

Separate Login Screen Page

1. export default class extends React.Component {
2. constructor(props) {
3. super(props);

5. this.state = {
6. username: '',
7. password: '',
8. };
9. }

11. render() {
12. return (
13. <Page noToolbar noNavbar noSwipeback loginScreen>
14. <LoginScreenTitle>Framework7</LoginScreenTitle>
15. <List form>
16. <ListInput
17. label="Username"
18. type="text"
19. placeholder="Your username"
20. value={this.state.username}
21. onInput={(e) => {
22. this.setState({ username: e.target.value});
23. }}
24. />
25. <ListInput
26. label="Password"
27. type="password"
28. placeholder="Your password"
29. value={this.state.password}
30. onInput={(e) => {
31. this.setState({ password: e.target.value});
32. }}
33. />
34. </List>
35. <List>
36. <ListButton onClick={this.signIn.bind(this)}>Sign In</ListButton>
37. <BlockFooter>Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</BlockFooter>
38. </List>
39. </Page>
40. )
41. }
42. signIn() {
43. const self = this;
44. const app = self.$f7;
45. const router = self.$f7router;
46. app.dialog.alert(`Username: ${self.state.username}<br>Password: ${self.state.password}`, () => {
47. router.back();
48. });
49. }
50. }