@@ -0,0 +1,68 @@
		.root {
		padding:20px;
		section {
		flex: 1 1 auto;
		border-bottom: 1px solid #ECEFF1;
		padding: 20px 10px;
		display: flex;
		&> div {
		flex: 1;
		}
		&:first-child {
		padding-top: 0px;
		}
		&:last-child {
		border-bottom-width: 0px;
		}
		@media (max-width: 600px) {
		display: flex;
		flex-direction: column;
		h2 {
		margin-bottom:20px;
		flex: none;
		}
		&> :last-child {
		padding-left: 20px;
		}
		}
		}
		h2 {
		flex: 0 0 200px;
		padding: 0px;
		margin: 0px;
		font-weight: normal;
		font-size: 15px;
		line-height: 26px;
		}
		label {
		display: block;
		padding: 0px;
		span {
		font-size: 15px;
		}
		}
		input[type=checkbox],
		input[type=radio] {
		margin-right:10px;
		}
		input[type=number] {
		border: 1px solid #ECEFF1;
		padding: 5px 10px;
		font-size: 15px;
		width: 50px;
		}
		.minutes {
		margin-left: 5px;
		}
		}

		@@ -0,0 +1,27 @@
		import React, { Component } from "react";
		import { Route, Switch } from "react-router-dom";
		import Title from "react-title-component";
		export default function() {
		return (
		<Switch>
		<Route path="/account/tokens" exact={true} component={accountTitle} />
		<Route path="/account/repos" exact={true} component={accountRepos} />
		<Route path="/login" exact={false} component={loginTitle} />
		<Route path="/:owner/:repo" exact={false} component={repoTitle} />
		<Route path="/" exact={false} component={defautTitle} />
		</Switch>
		);
		}
		const accountTitle = () => <Title render="Tokens | drone" />;
		const accountRepos = () => <Title render="Repositories | drone" />;
		const loginTitle = () => <Title render="Login | drone" />;
		const repoTitle = ({ match }) => (
		<Title render={`${match.params.owner}/${match.params.repo} | drone`} />
		);
		const defautTitle = () => <Title render="Welcome | drone" />;

		@@ -0,0 +1,3 @@
		import { List, Item } from "./list";
		export { List, Item };

		@@ -0,0 +1,40 @@
		import React, { Component } from "react";
		import { Link } from "react-router-dom";
		import { LaunchIcon } from "shared/components/icons";
		import { Switch } from "./switch";
		import styles from "./list.less";
		export const List = ({ children }) => (
		<div className={styles.list}>{children}</div>
		);
		export class Item extends Component {
		render() {
		const { owner, name, active, link, onchange } = this.props;
		return (
		<div className={styles.item}>
		<div>
		{owner}/{name}
		</div>
		<div className={active ? styles.active : styles.inactive}>
		<Link to={link}>
		<LaunchIcon />
		</Link>
		</div>
		<div>
		<Switch onchange={onchange} checked={active} />
		</div>
		</div>
		);
		}
		shouldComponentUpdate(nextProps) {
		return (
		this.props.owner !== nextProps.owner ||
		this.props.name !== nextProps.name ||
		this.props.active !== nextProps.active
		);
		}
		}

		@@ -0,0 +1,41 @@
		.item {
		display: flex;
		border-bottom: 1px solid #ECEFF1;
		padding:10px 10px;
		&:last-child {
		border-bottom-width: 0px;
		}
		&> div:first-child {
		flex: 1 1 auto;
		line-height:24px;
		}
		&> div:nth-child(2) {
		}
		&> div:nth-child(3) {
		text-align: right;
		display: flex;
		align-content: stretch;
		justify-content: center;
		flex-direction: column;
		}
		a {
		margin-right:20px;
		width:100px;
		svg {
		width:20px;
		height:20px;
		fill: #CFD8DC;
		}
		}
		.inactive {
		display: none;
		}
		}

		@@ -0,0 +1,13 @@
		import React, { Component } from "react";
		import styles from "./switch.less";
		export class Switch extends Component {
		render() {
		const { checked, onchange } = this.props;
		return (
		<label className={styles.switch}>
		<input type="checkbox" checked={checked} onchange={onchange} />
		</label>
		);
		}
		}

		@@ -0,0 +1,62 @@
		.switch {
		label {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		cursor: pointer;
		}
		input[type=checkbox] {
		cursor: pointer;
		width: 12px;
		height: 12px;
		margin-right: 30px;
		position: relative;
		appearance:none;
		-webkit-appearance: none;
		-moz-appearance: none;
		-ms-appearance: none;
		outline: none;
		}
		input[type=checkbox]::before,
		input[type=checkbox]::after {
		content: "";
		position: absolute;
		}
		input[type=checkbox]::before {
		width: 250%;
		background-color: #EEEEEE;
		transform: translate(-25%, 0);
		border-radius: 30px;
		height: 100%;
		transition: all 0.25s ease-in-out;
		}
		input[type=checkbox]::after {
		width: 150%;
		height: 150%;
		margin-top: -25%;
		margin-left: 10%;
		background-color: #E0E0E0;
		border-radius: 30px;
		transform: translate(-60%, 0);
		transition: all 0.2s;
		}
		//
		// Checked
		//
		input[type=checkbox]:checked::after {
		transform: scale(0.75, 0.75);
		transform: translate(25%, 0);
		background-color: #4dc89a;
		}
		input[type=checkbox]:checked::before {
		background-color: #90e0c6;
		}
		}

		@@ -0,0 +1,137 @@
		import React, { Component } from "react";
		import { branch } from "baobab-react/higher-order";
		import { inject } from "config/client/inject";
		import {
		fetchRepostoryList,
		disableRepository,
		enableRepository,
		} from "shared/utils/repository";
		import { List, Item } from "./components";
		import Breadcrumb, { SEPARATOR } from "shared/components/breadcrumb";
		import styles from "./index.less";
		const binding = (props, context) => {
		return {
		repos: ["repos", "data"],
		loaded: ["repos", "loaded"],
		error: ["repos", "error"],
		};
		};
		@inject
		@branch(binding)
		export default class UserRepos extends Component {
		constructor(props, context) {
		super(props, context);
		this.handleFilter = this.handleFilter.bind(this);
		this.renderItem = this.renderItem.bind(this);
		this.handleToggle = this.handleToggle.bind(this);
		}
		handleFilter(e) {
		this.setState({
		filter: e.target.value,
		});
		}
		handleToggle(repo, e) {
		const { dispatch, drone } = this.props;
		if (e.target.checked) {
		dispatch(enableRepository, drone, repo.owner, repo.name);
		} else {
		dispatch(disableRepository, drone, repo.owner, repo.name);
		}
		}
		componentWillMount() {
		if (!this._dispatched) {
		this._dispatched = true;
		this.props.dispatch(fetchRepostoryList, this.props.drone);
		}
		}
		shouldComponentUpdate(nextProps, nextState) {
		return (
		this.props.repos !== nextProps.repos ||
		this.state.search !== nextState.search
		);
		}
		handleFilter(e) {
		this.setState({
		search: e.target.value,
		});
		}
		render() {
		const { repos, loaded, error } = this.props;
		const { search } = this.state;
		const list = Object.values(repos || {});
		if (error) {
		return ERROR;
		}
		if (!loaded) {
		return LOADING;
		}
		const filter = repo => {
		return !search || repo.full_name.indexOf(search) !== -1;
		};
		const filtered = list.filter(filter);
		return (
		<div>
		<div className={styles.search}>
		<input
		type="text"
		placeholder="Search …"
		onchange={this.handleFilter}
		/>
		</div>
		<div className={styles.root}>
		{filtered.length === 0 ? NO_MATCHES : null}
		<List>{list.filter(filter).map(this.renderItem)}</List>
		</div>
		</div>
		);
		}
		renderItem(repo) {
		return (
		<Item
		key={repo.full_name}
		owner={repo.owner}
		name={repo.name}
		active={repo.active}
		link={`/${repo.full_name}`}
		onchange={this.handleToggle.bind(this, repo)}
		/>
		);
		}
		}
		const LOADING = <div>Loading</div>;
		const EMPTY = <div>Your repository list is empty</div>;
		const NO_MATCHES = <div>No matches found</div>;
		const ERROR = <div>Error</div>;
		export class UserRepoTitle extends Component {
		render() {
		return (
		<Breadcrumb
		elements={[<span>Account</span>, SEPARATOR, <span>Repositories</span>]}
		/>
		);
		}
		}

		@@ -0,0 +1,29 @@
		.root {
		padding: 20px;
		}
		.search {
		input {
		border: none;
		width: 100%;
		box-sizing: border-box;
		outline: none;
		line-height: 24px;
		font-size: 15px;
		padding:0px 20px;
		border-bottom:1px solid #EEE;
		height: 45px;
		}
		::-moz-input-placeholder {
		color: #BDBDBD;
		font-weight:300;
		font-size:15px;
		}
		::-webkit-input-placeholder {
		color: #BDBDBD;
		font-weight:300;
		font-size:15px;
		}
		}

		@@ -0,0 +1,42 @@
		import React, { Component } from "react";
		import { syncRepostoryList } from "shared/utils/repository";
		import { branch } from "baobab-react/higher-order";
		import { inject } from "config/client/inject";
		import { SyncIcon } from "shared/components/icons";
		const binding = (props, context) => {
		return {
		repos: ["repos"],
		};
		};
		@inject
		@branch(binding)
		export default class UserReposMenu extends Component {
		constructor(props, context) {
		super(props, context);
		this.handleClick = this.handleClick.bind(this);
		}
		handleClick() {
		const { dispatch, drone } = this.props;
		dispatch(syncRepostoryList, drone);
		}
		render() {
		const { loaded } = this.props.repos;
		return (
		<section>
		<ul>
		<li>
		<button disabled={!loaded} onclick={this.handleClick}>
		<SyncIcon />
		<span>Synchronize</span>
		</button>
		</li>
		</ul>
		</section>
		);
		}
		}

		@@ -0,0 +1,59 @@
		import React, { Component } from "react";
		import { generateToken } from "shared/utils/users";
		import { branch } from "baobab-react/higher-order";
		import { inject } from "config/client/inject";
		import styles from "./index.less";
		const binding = (props, context) => {
		return {
		location: ["location"],
		token: ["token"],
		};
		};
		@inject
		@branch(binding)
		export default class Tokens extends Component {
		shouldComponentUpdate(nextProps, nextState) {
		return (
		this.props.location !== nextProps.location ||
		this.props.token !== nextProps.token
		);
		}
		componentWillMount() {
		const { drone, dispatch } = this.props;
		dispatch(generateToken, drone);
		}
		render() {
		const { user, location, token } = this.props;
		if (!location || !token) {
		return <div>Loading</div>;
		}
		return (
		<div className={styles.root}>
		<h2>Your Personal Token:</h2>
		<pre>{token}</pre>
		<h2>Example API Usage:</h2>
		<pre>{usageWithCURL(location, token)}</pre>
		<h2>Example CLI Usage:</h2>
		<pre>{usageWithCLI(location, token)}</pre>
		</div>
		);
		}
		}
		const usageWithCURL = (location, token) => {
		return `curl -i ${location.protocol}//${location.host}/api/user -H "Authorization: Bearer ${token}"`;
		};
		const usageWithCLI = (location, token) => {
		return `export DRONE_SERVER=${location.protocol}//${location.host}
		export DRONE_TOKEN=${token}
		drone info`;
		};

		@@ -0,0 +1,23 @@
		.root {
		padding: 20px;
		pre {
		background: #f5f5f5;
		padding:20px;
		white-space: pre-line;
		word-wrap: break-word;
		font-family: 'Roboto Mono', monospace;
		max-width: 650px;
		margin-bottom:40px;
		font-size: 12px;
		}
		h2 {
		font-weight: normal;
		font-size: 15px;
		&:first-of-type {
		margin-top: 0px;
		}
		}
		}

		@@ -0,0 +1,23 @@
		import React, { Component } from "react";
		import sinon from "sinon";
		import { expect } from "chai";
		import { shallow, mount, render } from "enzyme";
		jest.dontMock("../status");
		import Status from "../status";
		describe("Status component", () => {
		test("updates on status change", () => {
		const status = mount(<Status status="failure" />);
		const instance = status.instance();
		expect(instance.shouldComponentUpdate({ status: "failure" })).to.be.false;
		expect(instance.shouldComponentUpdate({ status: "success" })).to.be.true;
		expect(status.hasClass("failure")).to.be.true;
		});
		test("uses the status as the class name", () => {
		const status = mount(<Status status="running" />);
		expect(status.hasClass("running")).to.be.true;
		});
		});

		@@ -0,0 +1,12 @@
		import React, { Component } from "react";
		import style from "./avatar.less";
		export default class Avatar extends Component {
		render() {
		const image = this.props.image;
		const style = {
		backgroundImage: `url(${image})`,
		};
		return <div className={style.avatar} style={style} />;
		}
		}

		@@ -0,0 +1,15 @@
		.avatar {
		display: flex;
		align-items: center;
		img {
		border-radius: 50%;
		width: 32px;
		height: 32px;
		}
		&.small img {
		width: 28px;
		height: 28px;
		}
		}

		@@ -0,0 +1,22 @@
		import React, { Component } from "react";
		import { Link } from "react-router-dom";
		import { ExpandIcon, BackIcon } from "shared/components/icons/index";
		import style from "./breadcrumb.less";
		// breadcrumb separater icon.
		export const SEPARATOR = <ExpandIcon size={18} className={style.separator} />;
		// breadcrumb back button.
		export const BACK_BUTTON = <BackIcon size={18} className={style.back} />;
		// helper function to rener a list item.
		const renderItem = (element, index) => {
		return <li key={index}>{element}</li>;
		};
		export default class Breadcrumb extends Component {
		render() {
		const { elements } = this.props;
		return <ol className={style.breadcrumb}>{elements.map(renderItem)}</ol>;
		}
		}

		@@ -0,0 +1,34 @@
		.breadcrumb {
		text-align: left;
		display: inline-block;
		padding: 0px;
		margin: 0px;
		li {
		display:inline-block;
		vertical-align: middle;
		}
		li > span,
		li > div,
		a, a:visited, a:active {
		text-decoration: none;
		color: #212121;
		font-size: 20px;
		}
		svg {
		width: 24px;
		height: 24px;
		vertical-align: middle;
		&.separator {
		transform: rotate(270deg);
		margin:0px 5px;
		}
		&.back {
		margin-right: 20px;
		}
		}
		}

		@@ -0,0 +1,25 @@
		import React, { Component } from "react";
		import { CommitIcon, BranchIcon } from "shared/components/icons/index";
		import styles from "./build_event.less";
		export default class BuildEvent extends Component {
		render() {
		const { event, branch, commit, link } = this.props;
		return (
		<div className={styles.host}>
		<div className={styles.row}>
		<div>
		<CommitIcon />
		</div>
		<div>{commit && commit.substr(0, 10)}</div>
		</div>
		<div className={styles.row}>
		<div>
		<BranchIcon />
		</div>
		<div>{branch}</div>
		</div>
		</div>
		);
		}
		}

		@@ -0,0 +1,22 @@
		.host {
		svg {
		width: 18px;
		height: 18px;
		}
		}
		.row {
		display: flex;
		:first-child {
		display: flex;
		align-items: center;
		margin-right: 5px;
		}
		:last-child {
		flex: 1;
		line-height: 24px;
		font-size: 14px;
		}
		}

		@@ -0,0 +1,37 @@
		import React, { Component } from "react";
		import { ScheduleIcon, TimelapseIcon } from "shared/components/icons/index";
		import TimeAgo from "react-timeago";
		import Duration from "./duration";
		import styles from "./build_time.less";
		export default class Runtime extends Component {
		render() {
		const { start, finish } = this.props;
		return (
		<div className={styles.host}>
		<div className={styles.row}>
		<div>
		<ScheduleIcon />
		</div>
		<div>{start ? <TimeAgo date={start * 1000} /> : <span>--</span>}</div>
		</div>
		<div className={styles.row}>
		<div>
		<TimelapseIcon />
		</div>
		<div>
		{finish ? (
		<Duration start={start} finished={finish} />
		) : start ? (
		<TimeAgo date={start * 1000} />
		) : (
		<span>--</span>
		)}
		</div>
		</div>
		</div>
		);
		}
		}

		@@ -0,0 +1,23 @@
		.host {
		svg {
		width: 16px;
		height: 16px;
		}
		}
		.row {
		display: flex;
		:first-child {
		display: flex;
		align-items: center;
		margin-right: 5px;
		}
		:last-child {
		flex: 1;
		line-height: 24px;
		font-size: 14px;
		white-space: nowrap;
		}
		}

		@@ -0,0 +1,62 @@
		import React from "react";
		import CloseIcon from "shared/components/icons/close";
		import styles from "./drawer.less";
		import { CSSTransitionGroup } from "react-transition-group";
		export const DOCK_LEFT = styles.left;
		export const DOCK_RIGHT = styles.right;
		export class Drawer extends React.Component {
		render() {
		const { open, backdrop, position } = this.props;
		let classes = [styles.drawer];
		if (open) {
		classes.push(styles.open);
		}
		if (position) {
		classes.push(position);
		}
		var child = open ? (
		<div key={0} onClick={this.props.onClick} className={styles.backdrop} />
		) : null;
		return (
		<div className={classes.join(" ")}>
		<CSSTransitionGroup
		transitionName="fade"
		transitionEnterTimeout={150}
		transitionLeaveTimeout={150}
		transitionAppearTimeout={150}
		transitionAppear={true}
		transitionEnter={true}
		transitionLeave={true}
		>
		{child}
		</CSSTransitionGroup>
		<div className={styles.inner}>{this.props.children}</div>
		</div>
		);
		}
		}
		export class CloseButton extends React.Component {
		render() {
		return (
		<button className={styles.close} onClick={this.props.onClick}>
		<CloseIcon />
		</button>
		);
		}
		}
		export class MenuButton extends React.Component {
		render() {
		return (
		<button className={styles.close} onClick={this.props.onClick}>
		Show Menu
		</button>
		);
		}
		}