Framework7
v3
Support Framework7
stars forks
iOSAndroid
Improve this Doc

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

    Prop Type Default Description
    <LoginScreen> properties
    opened boolean false Allows to open/close Login Screen and set its initial state

    Login Screen Methods

    <LoginScreen> methods
    .open(animate) Open login screen
    .close(animate) Close login screen

    Login Screen Events

    Event Description
    <LoginScreen> events
    loginScreenOpen Event will be triggered when Login Screen starts its opening animation
    loginScreenOpened Event will be triggered after Login Screen completes its opening animation
    loginScreenClose Event will be triggered when Login Screen starts its closing animation
    loginScreenClosed Event will be triggered after Login Screen completes its closing animation

    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

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

    this.state = {
      loginScreenOpened: false,
      username: '',
      password: '',
    };
  }
  render() {
    return (
      <Page>
        <Navbar title="Login Screen"></Navbar>
        <Block>
          <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>
        </Block>

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

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

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

        <LoginScreen className="demo-login-screen" opened={this.state.loginScreenOpened} onLoginScreenClosed={() => {this.setState({loginScreenOpened : false})}}>
          <Page loginScreen>
            <LoginScreenTitle>Framework7</LoginScreenTitle>
            <List form>
              <ListInput
                label="Username"
                type="text"
                placeholder="Your username"
                value={this.state.username}
                onInput={(e) => {
                  this.setState({ username: e.target.value});
                }}
              />
              <ListInput
                label="Password"
                type="password"
                placeholder="Your password"
                value={this.state.password}
                onInput={(e) => {
                  this.setState({ password: e.target.value});
                }}
              />
            </List>
            <List>
              <ListButton onClick={this.signIn.bind(this)}>Sign In</ListButton>
              <BlockFooter>Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</BlockFooter>
            </List>
          </Page>
        </LoginScreen>
      </Page>
    )
  }
  signIn() {
    const self = this;
    const app = self.$f7;

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

    Separate Login Screen Page

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

    this.state = {
      username: '',
      password: '',
    };
  }

  render() {
    return (
      <Page noToolbar noNavbar noSwipeback loginScreen>
        <LoginScreenTitle>Framework7</LoginScreenTitle>
        <List form>
          <ListInput
            label="Username"
            type="text"
            placeholder="Your username"
            value={this.state.username}
            onInput={(e) => {
              this.setState({ username: e.target.value});
            }}
          />
          <ListInput
            label="Password"
            type="password"
            placeholder="Your password"
            value={this.state.password}
            onInput={(e) => {
              this.setState({ password: e.target.value});
            }}
          />
        </List>
        <List>
          <ListButton onClick={this.signIn.bind(this)}>Sign In</ListButton>
          <BlockFooter>Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.</BlockFooter>
        </List>
      </Page>
    )
  }
  signIn() {
    const self = this;
    const app = self.$f7;
    const router = self.$f7router;
    app.dialog.alert(`Username: ${self.state.username}<br>Password: ${self.state.password}`, () => {
      router.back();
    });
  }
}