@@ -0,0 +1,220 @@
		import React, { Component } from "react";
		import classnames from "classnames";
		import { Route, Switch, Link } from "react-router-dom";
		import { connectScreenSize } from "react-screen-size";
		import { branch } from "baobab-react/higher-order";
		import { inject } from "config/client/inject";
		import MenuIcon from "shared/components/icons/menu";
		import Feed from "screens/feed";
		import RepoRegistry from "screens/repo/screens/registry";
		import RepoSecrets from "screens/repo/screens/secrets";
		import RepoSettings from "screens/repo/screens/settings";
		import RepoBuilds from "screens/repo/screens/builds";
		import UserRepos, { UserRepoTitle } from "screens/user/screens/repos";
		import UserTokens from "screens/user/screens/tokens";
		import RedirectRoot from "./redirect";
		import RepoHeader from "screens/repo/screens/builds/header";
		import UserReposMenu from "screens/user/screens/repos/menu";
		import BuildMenu from "screens/repo/screens/build/menu";
		import BuildLogs, { BuildLogsTitle } from "screens/repo/screens/build";
		import RepoMenu from "screens/repo/screens/build/menu";
		import { Snackbar } from "shared/components/snackbar";
		import {
		Drawer,
		CloseButton,
		DOCK_RIGHT,
		DOCK_LEFT,
		} from "shared/components/drawer/drawer";
		import styles from "./layout.less";
		const binding = (props, context) => {
		return {
		user: ["user"],
		message: ["message"],
		sidebar: ["sidebar"],
		menu: ["menu"],
		};
		};
		const mapScreenSizeToProps = screenSize => {
		return {
		isTablet: screenSize["small"],
		isMobile: screenSize["mobile"],
		isDesktop: screenSize["> small"],
		};
		};
		@inject
		@branch(binding)
		@connectScreenSize(mapScreenSizeToProps)
		export default class Default extends Component {
		constructor(props, context) {
		super(props, context);
		this.state = {
		menu: false,
		feed: false,
		};
		this.openMenu = this.openMenu.bind(this);
		this.closeMenu = this.closeMenu.bind(this);
		this.closeSnackbar = this.closeSnackbar.bind(this);
		}
		componentWillReceiveProps(nextProps) {
		if (nextProps.location !== this.props.location) {
		this.closeMenu(true);
		}
		}
		openMenu() {
		this.props.dispatch(tree => {
		tree.set(["menu"], true);
		});
		}
		closeMenu() {
		this.props.dispatch(tree => {
		tree.set(["menu"], false);
		});
		}
		render() {
		const { user, message, menu } = this.props;
		const classes = classnames(!user || !user.data ? styles.guest : null);
		return (
		<div className={classes}>
		<div className={styles.left}>
		<Switch>
		<Route path={"/"} component={Feed} />
		</Switch>
		</div>
		<div className={styles.center}>
		{!user || !user.data ? (
		<a href="/login" target="_self" className={styles.login}>
		Click to Login
		</a>
		) : (
		<noscript />
		)}
		<div className={styles.title}>
		<Switch>
		<Route path="/account/repos" component={UserRepoTitle} />
		<Route
		path="/:owner/:repo/:build(\d*)/:proc(\d*)"
		exact={true}
		component={BuildLogsTitle}
		/>
		<Route
		path="/:owner/:repo/:build(\d*)"
		component={BuildLogsTitle}
		/>
		<Route path="/:owner/:repo" component={RepoHeader} />
		</Switch>
		{user && user.data ? (
		<div className={styles.avatar}>
		<img src={user.data.avatar_url} />
		</div>
		) : (
		undefined
		)}
		{user && user.data ? (
		<button onClick={this.openMenu}>
		<MenuIcon />
		</button>
		) : (
		<noscript />
		)}
		</div>
		<Switch>
		<Route path="/account/token" exact={true} component={UserTokens} />
		<Route path="/account/repos" exact={true} component={UserRepos} />
		<Route
		path="/:owner/:repo/settings/secrets"
		exact={true}
		component={RepoSecrets}
		/>
		<Route
		path="/:owner/:repo/settings/registry"
		exact={true}
		component={RepoRegistry}
		/>
		<Route
		path="/:owner/:repo/settings"
		exact={true}
		component={RepoSettings}
		/>
		<Route
		path="/:owner/:repo/:build(\d*)"
		exact={true}
		component={BuildLogs}
		/>
		<Route
		path="/:owner/:repo/:build(\d*)/:proc(\d*)"
		exact={true}
		component={BuildLogs}
		/>
		<Route path="/:owner/:repo" exact={true} component={RepoBuilds} />
		<Route path="/" exact={true} component={RedirectRoot} />
		</Switch>
		</div>
		<Snackbar message={message.text} onClose={this.closeSnackbar} />
		<Drawer onClick={this.closeMenu} position={DOCK_RIGHT} open={menu}>
		<Switch>
		<Route
		path="/account/repos"
		exact={true}
		component={UserReposMenu}
		/>
		<Route
		path="/account/"
		exact={false}
		component={undefined}
		/>BuildMenu
		<Route
		path="/:owner/:repo/:build(\d*)"
		exact={false}
		component={BuildMenu}
		/>
		<Route path="/:owner/:repo" exact={false} component={RepoMenu} />
		</Switch>
		<section>
		<ul>
		<li>
		<Link to="/account/repos">Repositories</Link>
		</li>
		<li>
		<Link to="/account/token">Token</Link>
		</li>
		</ul>
		</section>
		<section>
		<ul>
		<li>
		<a href="/logout" target="_self">
		Logout
		</a>
		</li>
		</ul>
		</section>
		</Drawer>
		</div>
		);
		}
		closeSnackbar() {
		this.props.dispatch(tree => {
		tree.unset(["message", "text"]);
		});
		}
		}

		@@ -0,0 +1,88 @@
		.title {
		border-bottom: 1px solid #ECEFF1;
		display: flex;
		box-sizing: border-box;
		height: 60px;
		display: flex;
		align-items: center;
		&> :first-child {
		flex: 1;
		}
		padding:0px 20px;
		.avatar {
		display: flex;
		align-items: center;
		img {
		border-radius: 50%;
		width: 28px;
		height: 28px;
		}
		}
		button {
		background:#FFF;
		padding:0px;
		margin:0px;
		border:none;
		cursor: pointer;
		margin-left:10px;
		outline:none;
		display: flex;
		align-items: stretch;
		}
		}
		.left {
		position:fixed;
		top:0px;
		left:0px;
		right:0px;
		width:300px;
		overflow:hidden;
		overflow-y: auto;
		bottom:0px;
		border-right:1px solid #CFD8DC;
		box-sizing: border-box;
		}
		.center {
		// position:fixed;
		// top:0px;
		// left:300px;
		// right:0px;
		// bottom:0px;
		// overflow:scroll;
		box-sizing: border-box;
		padding-left:300px;
		}
		.login {
		padding:0px 30px;
		text-align: center;
		line-height: 50px;
		box-sizing: border-box;
		text-transform: uppercase;
		display: block;
		text-decoration: none;
		color: #FFF;
		font-size: 15px;
		background: #fdb835;
		text-shadow: 0 1px 2px rgba(0,0,0,0.1);
		// HACK
		margin-top:-1px;
		}
		.guest {
		.left {
		display: none;
		}
		.center {
		padding-left: 0px;
		}
		}

		@@ -0,0 +1,34 @@
		import React, { Component } from "react";
		import queryString from "query-string";
		import Icon from "shared/components/icons/report";
		import styles from "./index.less";
		const DEFAULT_ERROR = "The system failed to process your Login request.";
		class Error extends Component {
		render() {
		const parsed = queryString.parse(window.location.search);
		let error = DEFAULT_ERROR;
		switch (parsed.code || parsed.error) {
		case "oauth_error":
		break;
		case "access_denied":
		break;
		}
		return (
		<div className={styles.root}>
		<div className={styles.alert}>
		<div>
		<Icon />
		</div>
		<div>{error}</div>
		</div>
		</div>
		);
		}
		}
		export default Error;

		@@ -0,0 +1,35 @@
		@font: "Roboto";
		@red: #fc4758;
		@yellow: #fdb835;
		.root {
		margin:50px auto;
		min-width: 400px;
		max-width: 400px;
		padding: 30px;
		box-sizing: border-box;
		.alert {
		margin-bottom: 20px;
		text-align: left;
		display: block;
		color: #FFF;
		background: @yellow;
		padding: 20px;
		display:flex;
		&> :last-child {
		padding-top: 2px;
		padding-left: 10px;
		line-height: 20px;
		font-family: @font;
		font-size: 15px;
		}
		}
		svg {
		fill: #FFF;
		width: 26px;
		height: 26px;
		}
		}

		@@ -0,0 +1,21 @@
		import React, { Component } from "react";
		import styles from "./index.less";
		const LoginForm = props => (
		<div className={styles.login}>
		<form method="post" action="/authorize">
		<p>Login with your version control system username and password.</p>
		<input
		placeholder="Username"
		name="username"
		type="text"
		spellCheck="false"
		/>
		<input placeholder="Password" name="password" type="password" />
		<input value="Login" type="submit" />
		</form>
		</div>
		);
		export default LoginForm;

		@@ -0,0 +1,67 @@
		@font: "Roboto";
		.login {
		margin-top: 50px;
		p {
		color: #424242;
		padding: 0px;
		margin: 0px;
		margin-bottom: 30px;
		text-align: center;
		line-height: 22px;
		font-family: @font;
		user-select: none;
		}
		input {
		outline: none;
		display: block;
		width: 100%;
		box-sizing: border-box;
		&[type=password],
		&[type=text] {
		padding: 10px;
		margin-bottom: 20px;
		border: 1px solid #ECEFF1;
		background: #FFF;
		font-family: @font;
		&:focus {
		border: 1px solid #424242;
		}
		}
		&[type=submit] {
		color: #FFF;
		border: none;
		background: #424242;
		line-height: 36px;
		font-family: @font;
		user-select: none;
		}
		}
		form {
		margin:0px auto;
		min-width: 400px;
		max-width: 400px;
		padding: 30px;
		box-sizing: border-box;
		}
		::-moz-input-placeholder {
		color: #CFD8DC;
		font-weight:300;
		font-size:16px;
		user-select: none;
		}
		::-webkit-input-placeholder {
		color: #CFD8DC;
		font-weight:300;
		font-size:16px;
		user-select: none;
		}
		}

		@@ -0,0 +1,4 @@
		import LoginForm from "./form";
		import LoginError from "./error";
		export { LoginForm, LoginError };

		@@ -0,0 +1,30 @@
		import React, { Component } from "react";
		import { Redirect } from "react-router-dom";
		import { branch } from "baobab-react/higher-order";
		const binding = (props, context) => {
		return { feed: ["feed"], user: ["user", "data"] };
		};
		@branch(binding)
		export default class RedirectRoot extends Component {
		componentWillReceiveProps(nextProps) {
		const { user } = nextProps;
		if (!user && window) {
		window.location.href = "/login";
		}
		}
		render() {
		const { latest, loaded } = this.props.feed;
		console.log(latest, loaded);
		return !loaded ? (
		undefined
		) : !latest ? (
		<Redirect to="/account/repos" />
		) : !latest.number ? (
		<Redirect to={`/${latest.full_name}`} />
		) : (
		<Redirect to={`/${latest.full_name}/${latest.number}`} />
		);
		}
		}

		@@ -0,0 +1,10 @@
		import React, { Component } from "react";
		import style from "./approval.less";
		export const Approval = ({ onapprove, ondecline }) => (
		<div className={style.root}>
		<p>Pipeline execution is blocked pending administrator approval</p>
		<button onclick={onapprove}>Approve</button>
		<button onclick={ondecline}>Decline</button>
		</div>
		);

		@@ -0,0 +1,32 @@
		.root {
		background: #fdb835;
		margin-bottom: 20px;
		padding: 20px;
		border-radius: 2px;
		button {
		margin-right: 10px;
		background: rgba(255,255,255,0.2);
		border: none;
		color: #FFF;
		font-size: 13px;
		border-radius: 2px;
		padding: 0px 10px;
		line-height: 28px;
		min-width: 100px;
		cursor: pointer;
		text-transform: uppercase;
		&:focus {
		outline: 1px solid #FFF;
		border-radius: 2px;
		}
		}
		p {
		margin-top:0px;
		margin-bottom:20px;
		color: #FFF;
		font-size: 15px;
		}
		}

		@@ -0,0 +1,36 @@
		import React, { Component } from "react";
		import BuildMeta from "shared/components/build_event";
		import BuildTime from "shared/components/build_time";
		import { StatusLabel } from "shared/components/status";
		import styles from "./details.less";
		export class Details extends Component {
		render() {
		const { build } = this.props;
		return (
		<div className={styles.info}>
		<StatusLabel status={build.status} />
		<section className={styles.message}>{build.message}</section>
		<section>
		<BuildTime
		start={build.started_at || build.created_at}
		finish={build.finished_at}
		/>
		</section>
		<section>
		<BuildMeta
		link={build.link_url}
		event={build.event}
		commit={build.commit}
		branch={build.branch}
		/>
		</section>
		</div>
		);
		}
		}

		@@ -0,0 +1,15 @@
		.info {
		section {
		margin:20px 0px;
		padding:0px 10px;
		padding-bottom:20px;
		line-height: 20px;
		font-size: 14px;
		border-bottom:1px solid #ECEFF1;
		&:last-of-type {
		border-bottom:0px;
		margin-bottom:0px;
		}
		}
		}

		@@ -0,0 +1,63 @@
		import React, { Component } from "react";
		export class Elapsed extends Component {
		constructor(props, context) {
		super(props);
		this.state = {
		elapsed: 0,
		};
		this.tick = this.tick.bind(this);
		}
		componentDidMount() {
		this.timer = setInterval(this.tick, 1000);
		}
		componentWillUnmount() {
		clearInterval(this.timer);
		}
		tick() {
		const { start } = this.props;
		const stop = ~~(Date.now() / 1000);
		this.setState({
		elapsed: stop - start,
		});
		}
		render() {
		const { elapsed } = this.state;
		const date = new Date(null);
		date.setSeconds(elapsed);
		return (
		<time>
		{!elapsed ? (
		undefined
		) : elapsed > 3600 ? (
		date.toISOString().substr(11, 8)
		) : (
		date.toISOString().substr(14, 5)
		)}
		</time>
		);
		}
		}
		/*
		* Returns the duration in hh:mm:ss format.
		*
		* @param {number} from - The start time in secnds
		* @param {number} to - The end time in seconds
		* @return {string}
		*/
		export const formatTime = (end, start) => {
		const diff = end - start;
		const date = new Date(null);
		date.setSeconds(diff);
		return diff > 3600
		? date.toISOString().substr(11, 8)
		: date.toISOString().substr(14, 5);
		};

		@@ -0,0 +1,6 @@
		import { Approval } from "./approval";
		import { Details } from "./details";
		import { MatrixList, MatrixItem } from "./matrix";
		import { ProcList, ProcListItem } from "./procs";
		export { Approval, Details, MatrixList, MatrixItem, ProcList, ProcListItem };

		@@ -0,0 +1,34 @@
		import React, { Component } from "react";
		import Status from "shared/components/status";
		import StatusNumber from "shared/components/status_number";
		import BuildTime from "shared/components/build_time";
		import styles from "./matrix.less";
		export const MatrixList = ({ children }) => (
		<div className={styles.list}>{children}</div>
		);
		export const MatrixItem = ({ environ, start, finish, status, number }) => (
		<div className={styles.item}>
		<div className={styles.header}>
		{Object.entries(environ).map(renderEnviron)}
		</div>
		<div className={styles.body}>
		<BuildTime start={start} finish={finish} />
		</div>
		<div className={styles.status}>
		<StatusNumber status={status} number={number} />
		<Status status={status} />
		</div>
		</div>
		);
		const renderEnviron = data => {
		return (
		<div>
		{data[0]}={data[1]}
		</div>
		);
		};

		@@ -0,0 +1,56 @@
		.list {
		a {
		text-decoration: none;
		border-bottom: 1px solid #ECEFF1;
		display:block;
		padding: 20px 10px;
		color: #212121;
		cursor: pointer;
		&:hover {
		background: #ECEFF1;
		.body {
		border-color: #CFD8DC;
		}
		}
		&:first-of-type {
		padding-top:10px;
		}
		&:last-of-type {
		border-bottom: none;
		}
		}
		}
		.item {
		display:flex;
		flex-direction: row;
		}
		.header {
		flex: 1;
		div {
		font-size: 14px;
		line-height: 26px;
		font-family: 'Roboto Mono';
		}
		}
		.body {
		border-left: 1px solid #ECEFF1;
		padding-left:20px;
		flex: 0 0 200px;
		}
		.status {
		padding-left:20px;
		display: flex;
		align-items: right;
		&> :last-child {
		margin-left:20px;
		}
		}

		@@ -0,0 +1,48 @@
		import React, { Component } from "react";
		import classnames from "classnames";
		import Status from "shared/components/status";
		import { Elapsed, formatTime } from "./elapsed";
		import styles from "./procs.less";
		export const ProcList = ({ children }) => (
		<div className={styles.list}>{children}</div>
		);
		export const ProcListItem = ({ name, start, finish, state, selected }) => (
		<div className={classnames(styles.item, selected ? styles.selected : null)}>
		<h3>{name}</h3>
		{finish ? (
		<time>{formatTime(finish, start)}</time>
		) : (
		<Elapsed start={start} />
		)}
		<div>
		<Status status={state} />
		</div>
		</div>
		);
		// function List({ children }) {
		// return <div className={styles.list}>{children}</div>;
		// }
		//
		// function ListItem({ name, start, finish, state, selected }) {
		// const classes = classnames(styles.item, selected ? styles.selected : null);
		// return (
		// <div className={classes}>
		// <h3>{name}</h3>
		//
		// {finish ? (
		// <time>{formatTime(finish, start)}</time>
		// ) : (
		// <Timer start={start} />
		// )}
		//
		// <div>
		// <Status status={state} />
		// </div>
		// </div>
		// );
		// }

		@@ -0,0 +1,43 @@
		.list {
		a {
		display:block;
		text-decoration: none;
		color: #212121;
		}
		}
		.item {
		box-sizing:border-box;
		display:flex;
		padding: 0px 10px;
		background: #FFF;
		&.selected,
		&:hover {
		background: #ECEFF1;
		}
		time {
		color: #BDBDBD;
		font-size: 13px;
		line-height: 32px;
		display: inline-block;
		margin-right: 15px;
		vertical-align: middle;
		}
		h3 {
		margin: 0px;
		padding: 0px;
		font-weight: normal;
		font-size: 14px;
		line-height: 36px;
		vertical-align: middle;
		flex:1 1 auto;
		}
		&:last-child {
		display: flex;
		align-items: center;
		}
		}