@@ -3,7 +3,7 @@ import React from 'react';
33import * as azimuth from 'azimuth-js';
44
55import { H1, Row, Col } from '../components/Base';
6−import HorizontalSelector from '../components/HorizontalSelector';
6+import Tabs from '../components/Tabs';
77
88import Ticket from './Login/Ticket';
99import Mnemonic from './Login/Mnemonic';
@@ -89,34 +89,25 @@ class Login extends React.Component {
8989 { title: 'Advanced', value: TABS.ADVANCED },
9090 ];
9191
92− //TODO probably needs a dedicated component because styling
93− const tabs = (
94− <HorizontalSelector
95− options={tabOptions}
96− onChange={this.handleTabChange}
97− />
98− );
99−
100− const login = (() => {
101− switch (this.state.currentTab) {
102− case TABS.TICKET:
103− return <Ticket loginCompleted={this.continue} />;
104− case TABS.MNEMONIC:
105− return <Mnemonic loginCompleted={this.continue} />;
106− case TABS.ADVANCED:
107− return <Advanced loginCompleted={this.continue} />;
108− default:
109− throw new Error('weird tab ' + this.status.currentTab);
110− }
111− })();
92+ const tabViews = {
93+ [TABS.TICKET]: Ticket,
94+ [TABS.MNEMONIC]: Mnemonic,
95+ [TABS.ADVANCED]: Advanced,
96+ };
11297
11398 return (
11499 <Row>
115100 <Col>
116101 <H1>{'Login'}</H1>
117102
118− {tabs}
119− {login}
103+ <Tabs
104+ tabViews={tabViews}
105+ tabOptions={tabOptions}
106+ currentTab={this.state.currentTab}
107+ onTabChance={this.handleTabChange}
108+ //
109+ loginCompleted={this.continue}
110+ />
120111 </Col>
121112 </Row>
122113 );