1import React from 'react';
 2import { View } from 'react-native';
 3import { Container, Header, Title, Content, Spinner, List, ListItem, InputGroup, Input, Icon, Button, Text } from 'native-base';
 4import * as events from '../../services/events';
 5import DashboardScreen from './dashboard-screen'
 6import Screen from './screen'
 7
 8export default class LoginScreen extends Screen {
 9  constructor(props) {
10    super(props)
11    this.configuration = this.resolve('configuration');
12    this.state = {
13      account: { username: 'mokha', password: 'password' },
14      eventsOfInterest: [events.LOGGED_IN],
15    };
16  }
17
18  render() {
19    return (
20      <Container>
21        <Header>
22          <Title>StrongLifters ({this.configuration.value_for('ENV')})</Title>
23        </Header>
24        {this.content()}
25      </Container>
26    )
27  }
28
29  content() {
30    if (this.state.isLoading) {
31      return (
32        <Content>
33          <Spinner />
34        </Content>
35      );
36    } else {
37      return (
38        <Content>
39          <List>
40            <ListItem>
41              <InputGroup>
42              <Input inlineLabel 
43                label="Username" 
44                value={this.state.account.username}
45                onChangeText={(text) => this.setState({account: {username: text }})}
46                />
47              </InputGroup>
48            </ListItem>
49            <ListItem>
50              <InputGroup>
51                <Icon name="ios-unlock" />
52                <Input secureTextEntry
53                  label="Password"
54                  value={this.state.account.password}
55                  onChangeText={(text) => this.setState({account: {password: text }})}
56                />
57              </InputGroup>
58            </ListItem>
59          </List>
60          <Button style={{alignSelf: 'center' }} onPress={this.onLogin.bind(this)}>
61            Log In
62          </Button>
63          <Text note>{this.configuration.value_for('API_HOST')}</Text>
64        </Content>
65      );
66    }
67  }
68
69  onLogin() {
70    this.publish({
71      event: events.LOGIN,
72      username: this.state.account.username,
73      password: this.state.account.password
74    });
75    this.setState({isLoading: true});
76  }
77
78  notify(event) {
79    this.setState({isLoading: false});
80    this.loadScreen(DashboardScreen, { ...event })
81  }
82}