OCram85/code-server
Archived
1
0
Fork 0
Code Pull Requests 2 Activity

Featureful (#31)

Browse Source 
* Fix loading within the CLI

* Remove app

* Remove promise handle

* Add initial travis file

* Add libxkbfile dependency

* Add libxkbfile-dev

* Add build script

* Fix malformed bash statement

* Remove yarn from script

* Improve build script

* Extract upx before usage

* Only run upx if on linux

* Ensure resource directory exists

* Pack runnable binary

* Export binary with platform

* Improve build process

* Install upx before running install script

* Update typescript version before running nexe

* Add os.release() function for multi-platform support

* Update travis.yml to improve deployment

* Add on CI

* Update to v1.31.0

* Add libsecret

* Update build target

* Skip cleanup

* Fix built-in extensions

* Add basics for apps

* Create custom DNS server

* Fix forking within CLI. Fixes TS language features

* Fix filename resolve

* Fix default extensions path

* Add custom dialog

* Store workspace path

* Remove outfiles

* Cleanup

* Always authed outside of CLI

* Use location.host for client

* Remove useless app interface

* Remove debug file for building wordlist

* Use chromes tcp host

* Update patch

* Build browser app before packaging

* Replace all css containing file:// URLs, fix webviews

* Fix save

* Fix mkdir
This commit is contained in:
Kyle Carberry
2019-02-21 11:55:42 -06:00
committed by Asher
parent bdd24081ab
commit 85d2225e0c
84 changed files with 5204 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

279
packages/app/common/src/app.scss Normal file
View File

@ -0,0 +1,279 @@
@font-face {
font-family: 'aktiv-grotesk';
font-weight: 400;
// src: url("fonts/AktivGroteskRegular.ttf"); /* IE9 Compat Modes */
src: url("fonts/AktivGroteskRegular.woff2") format("woff2"), url("fonts/AktivGroteskRegular.woff") format("woff"); /* Pretty Modern Browsers */
}
@font-face {
font-family: 'aktiv-grotesk';
font-weight: 500;
src: url("fonts/AktivGroteskMedium.woff2") format("woff2"), url("fonts/AktivGroteskMedium.woff") format("woff"); /* Pretty Modern Browsers */
// src: url("fonts/AktivGroteskMedium.ttf");
}
@font-face {
font-family: 'aktiv-grotesk';
font-weight: 700;
src: url("fonts/AktivGroteskBold.woff2") format("woff2"), url("fonts/AktivGroteskBold.woff") format("woff"); /* Pretty Modern Browsers */
// src: url("fonts/AktivGroteskBold.ttf") format("ttf"); /* IE9 Compat Modes */
}
body, button, input {
font-family: 'aktiv-grotesk',sans-serif !important;
}
body {
margin: 0;
background-color: #F6F8FB;
--mdc-theme-primary: #2A2E37;
}
webview {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
transition: 150ms opacity ease;
&.active {
opacity: 1;
pointer-events: all;
}
}
.logo-fill {
fill: #2A2E37;
}
.main {
& > .header {
width: 100%;
height: 71px;
border-bottom: 1px solid rgba(117, 122, 131, 0.1);
display: flex;
margin-bottom: 60px;
.logo {
max-height: fit-content;
width: 145px;
}
.shrinker {
max-width: 1145px;
width: 100%;
margin: 0 auto;
display: flex;
}
}
.content {
max-width: 960px;
width: 100%;
padding-bottom: 100px;
margin: 0 auto;
}
}
.servers {
color: #2B343B;
& > .header {
display: flex;
flex-direction: row;
align-items: center;
padding-bottom: 21px;
h3 {
font-size: 24px;
font-weight: 500;
letter-spacing: 0.35px;
line-height: 33px;
margin: 0;
margin-left: 30px;
}
.add-server {
margin-left: auto;
border-radius: 24px;
font-weight: bold;
font-size: 14px;
letter-spacing: 1.25px;
}
.refresh {
margin-left: 16px;
margin-right: 15px;
cursor: pointer;
svg {
@keyframes rotate {
100% { transform: rotate(360deg); }
}
&.refreshing {
animation: rotate 1s linear infinite;
}
}
}
}
& > .grid {
display: grid;
grid-template-columns: 1fr 1.6fr 1.3fr 1.1fr 0.6fr 0.4fr;
box-shadow: 0 18px 80px 10px rgba(69, 65, 78, 0.08);
border-radius: 0 0 5px 5px;
.mdc-linear-progress {
grid-column-start: 1;
grid-column-end: 7;
// height: 0;
position: relative;
--mdc-theme-primary: rgb(107, 109, 102);
height: 5px;
&:after {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #2A2E37;
transition: 500ms opacity ease;
content: " ";
}
&.loading {
&:after {
opacity: 0;
}
}
}
.title, .value {
padding-top: 14px;
padding-bottom: 14px;
}
.title {
background-color: var(--mdc-theme-primary);
font-size: 10px;
color: #9D9FA4;
font-weight: bold;
letter-spacing: 2px;
line-height: 12px;
text-transform: uppercase;
// padding-top: 15px;
// padding-bottom: 10px;
&:first-child {
padding-left: 30px;
border-radius: 10px 0 0 0;
}
&:nth-child(6) {
padding-right: 30px;
border-radius: 0 10px 0 0;
}
&.servername {
color: white;
}
}
.value {
border-top: 1px solid #EBEBF2;
font-size: 14px;
letter-spacing: 0.2px;
display: flex;
align-items: center;
color: #717680;
background-color: white;
&.dark {
background-color: #F6F8FB;
}
&.servername {
.logo {
height: 25px;
}
}
&.strong {
font-weight: 600;
color: #2B343B;
font-size: 14px;
letter-spacing: 0.6px;
}
&.status {
padding-left: 36px;
span {
margin-left: 7px;
line-height: 0px;
}
}
&.buttons {
button {
margin-left: auto;
border-radius: 24px;
border: 1px solid #CFD1D7;
font-size: 14px;
font-weight: bold;
letter-spacing: 1.25px;
line-height: 16px;
padding-left: 18px;
padding-right: 18px;
}
}
&.icons {
padding-left: 16px;
}
&:last-child {
border-bottom-right-radius: 5px;
}
&:nth-last-child(6) {
border-bottom-left-radius: 5px;
}
}
}
}
.flex-row {
display: flex;
flex-direction: row;
}
.floater {
box-shadow: 0 8px 80px 10px rgba(69, 65, 78, 0.08);
border-radius: 10px;
padding: 3em;
min-width: 300px;
width: 100%;
& > h1 {
font-size: 3.5em;
margin-top: 0px;
// margin-bottom: 0px;
}
}
.mdc-ripple-upgraded--unbounded {
padding: 2px;
padding-top: 5px;
cursor: pointer;
}

33
packages/app/common/src/app.tsx Normal file
View File

@ -0,0 +1,33 @@
//@ts-ignore
import { MDCTextField } from "@material/textfield";
import { TcpHost } from "./connection";
import { StorageProvider } from "./storage";
import "material-components-web/dist/material-components-web.css";
import "./app.scss";
import "./tooltip.scss";
import * as React from "react";
import { render } from "react-dom";
import { Main } from "./containers";
export * from "./connection";
export interface App {
readonly tcp: TcpHost;
readonly storage: StorageProvider;
readonly node: HTMLElement;
}
export interface RegisteredServer {
readonly host: "coder" | "self";
readonly hostname: string;
readonly name: string;
}
export const create = async (app: App): Promise<void> => {
let servers = await app.storage.get<RegisteredServer[]>("servers");
if (!servers) {
servers = [];
}
render(<Main />, app.node);
};

17
packages/app/common/src/connection.ts Normal file
View File

@ -0,0 +1,17 @@
import { Event } from "@coder/events";
import { TunnelCloseEvent } from "@coder/tunnel/src/client";
export interface TcpHost {
listen(host: string, port: number): Promise<TcpServer>;
}
export interface TcpServer {
readonly onConnection: Event<TcpConnection>;
close(): Promise<void>;
}
export interface TcpConnection {
readonly onData: Event<ArrayBuffer>;
send(data: ArrayBuffer): Promise<void>;
close(): Promise<void>;
}

573
packages/app/common/src/containers.tsx Normal file
View File

@ -0,0 +1,573 @@
//@ts-ignore
import { MDCRipple } from "@material/ripple";
//@ts-ignore
import { MDCTextField } from "@material/textfield";
//@ts-ignore
import { MDCLinearProgress } from "@material/linear-progress";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { RegisteredServer } from "./app";
// tslint:disable-next-line:no-any
declare var WebSettings: any;
interface AuthedUser {
readonly username: string;
}
export class Main extends React.Component<void, {
readonly view: "servers" | "add-server";
readonly loading: boolean;
}> {
private webview: HTMLWebViewElement | undefined;
public constructor(props: void) {
super(props);
this.state = {
view: "servers",
loading: false,
};
}
public componentDidMount(): void {
window.addEventListener("message", (event) => {
if (event.data === "back") {
if (this.webview) {
this.webview.classList.remove("active");
}
}
if (event.data === "loaded") {
if (this.webview) {
// this.setState({ loading: false });
// this.webview.classList.add("active");
}
}
});
if (this.webview) {
this.webview.addEventListener("error", (event) => {
console.error(event);
});
this.webview.addEventListener("loadstart", (event) => {
this.setState({ loading: true });
});
this.webview.addEventListener("loadstop", (event) => {
this.setState({ loading: false });
this.webview!.classList.add("active");
// tslint:disable-next-line:no-any
const cw = (this.webview as any).contentWindow as Window;
cw.postMessage("app", "*");
});
}
}
public render(): JSX.Element {
return (
<div className="main">
<div className="header">
<div className="shrinker">
<Logo />
</div>
</div>
<div className="content">
{((): JSX.Element => {
switch (this.state.view) {
case "servers":
return (
<Servers servers={[
{
host: "coder",
hostname: "--",
name: "Coder",
},
{
host: "self",
hostname: "http://localhost:8080",
name: "Kyle's Magic Server",
},
]}
user={{
username: "Kyle",
}}
onSelect={(server): void => {
if (this.webview) {
this.webview.setAttribute("src", server.hostname);
}
}}
onAddServer={() => this.setState({ view: "add-server" })}
loading={this.state.loading}
/>
);
case "add-server":
return (
<div>Add server</div>
);
}
})()}
</div>
<webview ref={(wv: HTMLWebViewElement): HTMLWebViewElement => this.webview = wv}></webview>
</div>
);
}
}
export class AddServer extends React.Component {
public render(): JSX.Element {
return (
<div className="add-server">
<h3>Add Server</h3>
<p>Something about what you can do once you add your own server. A link to setup guides for this would be great as well.</p>
<Input label="Address" id="address" />
<br></br>
</div>
);
}
}
export class Servers extends React.Component<{
readonly user?: AuthedUser;
readonly servers: ReadonlyArray<RegisteredServer>;
readonly onSelect: (server: RegisteredServer) => void;
readonly onAddServer: () => void;
readonly loading: boolean;
}, {
readonly refreshing: boolean;
}> {
// tslint:disable-next-line:no-any
public constructor(props: any) {
super(props);
this.state = {
refreshing: false,
};
}
public render(): JSX.Element {
return (
<div className="servers">
<div className="header">
<h3>Servers</h3>
<Button onClick={(): void => this.props.onAddServer()} className="add-server" type="unelevated">Add Server</Button>
<Ripple>
<div className="refresh">
<svg onClick={(): void => this.doRefresh()} className={this.state.refreshing ? "refreshing" : ""} width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g>
<g transform="translate(4.000000, 4.000000)" fill="#2A2E37">
<path d="M8,3 C9.179,3 10.311,3.423 11.205,4.17 L8.883,6.492 L15.094,7.031 L14.555,0.82 L12.625,2.75 C11.353,1.632 9.71,1 8,1 C4.567,1 1.664,3.454 1.097,6.834 L3.07,7.165 C3.474,4.752 5.548,3 8,3 Z" id="Path"></path>
<path d="M8,13 C6.821,13 5.689,12.577 4.795,11.83 L7.117,9.508 L0.906,8.969 L1.445,15.18 L3.375,13.25 C4.647,14.368 6.29,15 8,15 C11.433,15 14.336,12.546 14.903,9.166 L12.93,8.835 C12.526,11.248 10.452,13 8,13 Z" id="Path"></path>
</g>
<rect id="Rectangle" fillRule="nonzero" x="0" y="0" width="24" height="24"></rect>
</g>
</g>
</svg>
</div>
</Ripple>
</div>
<div className="grid">
<div className="title status">
Status
</div>
<div className="title servername">
Server Name
</div>
<div className="title hostname">
Hostname
</div>
<div className="title details">
Details
</div>
<div className="title">
{/* Used for continue/launch buttons */}
</div>
<div className="title">
{/* Used for logout and delete buttons */}
</div>
<div role="progressbar" className={`mdc-linear-progress mdc-linear-progress--indeterminate ${this.props.loading ? "loading" : ""}`} ref={(d) => {
if (d) new MDCLinearProgress(d)}}>
<div className="mdc-linear-progress__buffering-dots"></div>
<div className="mdc-linear-progress__buffer"></div>
<div className="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
<span className="mdc-linear-progress__bar-inner"></span>
</div>
<div className="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
<span className="mdc-linear-progress__bar-inner"></span>
</div>
</div>
{this.props.servers.map((server, i) => {
return (
<Server key={server.hostname + i} user={this.props.user} server={server} onSelect={(): void => this.props.onSelect(server)} />
);
})}
</div>
</div>
);
}
private doRefresh(): void {
if (this.state.refreshing) {
return;
}
this.setState({
refreshing: true,
}, () => {
setTimeout(() => {
this.setState({
refreshing: false,
});
}, 1500);
});
}
}
interface ServerProps {
readonly user?: AuthedUser;
readonly server: RegisteredServer;
readonly onSelect: () => void;
}
export class Server extends React.Component<ServerProps, {
readonly user?: AuthedUser;
readonly status: "Online" | "Offline" | "Checking";
readonly version: string;
}> {
// tslint:disable-next-line:no-any
public constructor(props: ServerProps) {
super(props);
this.state = {
status: props.server.host === "coder" ? "Online" : "Checking",
version: "",
};
}
public componentWillMount(): void {
if (this.props.server.host !== "self") {
return;
}
const xhr = new XMLHttpRequest();
xhr.open("GET", this.props.server.hostname);
xhr.addEventListener("error", (err) => {
this.setState({
status: "Offline",
});
});
xhr.addEventListener("loadend", () => {
if (xhr.status === 200) {
this.setState({
status: "Online",
version: "v1.31.0",
});
} else {
this.setState({
status: "Offline",
});
}
});
xhr.send();
}
public render(): JSX.Element {
return (
<>
<div className={`status value ${this.extraClasses}`}>
{((): JSX.Element => {
switch (this.state.status) {
case "Offline":
return (
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<g id="Artboard-Copy-3" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<circle id="Oval" stroke="#2B343B" strokeWidth="1.5" fillRule="nonzero" cx="8" cy="8" r="7.25"></circle>
<path d="M5.15444712,5.15444712 L10.8455529,10.8455529" id="Path-4" stroke="#2B343B" strokeWidth="1.5" fillRule="nonzero"></path>
<path d="M5.15444712,5.15444712 L10.8455529,10.8455529" id="Path-4" stroke="#2B343B" strokeWidth="1.5" fillRule="nonzero" transform="translate(8.000000, 8.000000) scale(-1, 1) translate(-8.000000, -8.000000) "></path>
</g>
</svg>
);
case "Online":
return (
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<g id="Artboard-Copy-4" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="checkmark-copy-21" fillRule="nonzero">
<circle id="Oval" fill="#2B343B" cx="8" cy="8" r="8"></circle>
<polyline id="Path-2" stroke="#FFFFFF" strokeWidth="1.5" points="3.46296296 8.62222222 6.05555556 11.1111111 12.537037 4.88888889"></polyline>
</g>
</g>
</svg>
);
case "Checking":
return (
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<g id="Artboard-Copy-5" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<circle id="Oval" stroke="#2B343B" strokeWidth="1.5" fillRule="nonzero" cx="8" cy="8" r="7.25"></circle>
<polyline id="Path" stroke="#2B343B" strokeWidth="1.5" points="7.90558664 4.63916767 7.90558664 8.63916767 11.9055866 8.63916767"></polyline>
</g>
</svg>
);
default:
throw new Error("unsupported status");
}
})()}
<span>
{this.state.status}
</span>
</div>
<div className={`servername value strong ${this.extraClasses}`}>
{this.props.server.host === "coder" ? (
<Logo />
) : this.props.server.name}
</div>
<div className={`hostname value ${this.extraClasses}`}>
{this.props.server.hostname}
</div>
<div className={`details value ${this.extraClasses}`}>
{this.props.server.host === "coder" && this.props.user ? `Logged in as ${this.props.user.username}` : this.state.version}
</div>
<div className={`buttons value ${this.extraClasses}`}>
<Button onClick={(): void => this.props.onSelect()} className="add-server" type="outlined">{this.props.server.host === "coder" ? "Continue" : "Launch"}</Button>
</div>
<div className={`icons value ${this.extraClasses}`}>
<Ripple>
<div>
{this.props.server.host === "coder" ? (
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="log-out-copy-2" transform="translate(4.000000, 4.000000)" fill="#2A2E37">
<polygon id="Path" points="4 4 0 8 4 12 4 9 10 9 10 7 4 7"></polygon>
<path d="M15,16 L6,16 C5.4,16 5,15.6 5,15 L5,12 L7,12 L7,14 L14,14 L14,2 L7,2 L7,4 L5,4 L5,1 C5,0.4 5.4,0 6,0 L15,0 C15.6,0 16,0.4 16,1 L16,15 C16,15.6 15.6,16 15,16 Z" id="Path"></path>
</g>
</g>
</svg>
) : (
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
<g id="Artboard" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
<g id="bin" transform="translate(4.000000, 4.000000)" fill="#2B343B">
<rect id="Rectangle" x="5" y="7" width="2" height="6"></rect>
<rect id="Rectangle" x="9" y="7" width="2" height="6"></rect>
<path d="M12,1 C12,0.4 11.6,0 11,0 L5,0 C4.4,0 4,0.4 4,1 L4,3 L0,3 L0,5 L1,5 L1,15 C1,15.6 1.4,16 2,16 L14,16 C14.6,16 15,15.6 15,15 L15,5 L16,5 L16,3 L12,3 L12,1 Z M6,2 L10,2 L10,3 L6,3 L6,2 Z M13,5 L13,14 L3,14 L3,5 L13,5 Z" id="Shape" fillRule="nonzero"></path>
</g>
</g>
</svg>
)}
</div>
</Ripple>
</div>
</>
);
}
private get extraClasses(): string {
return this.props.server.host === "coder" ? "dark" : "";
}
}
export class Input extends React.Component<{
readonly label: string;
readonly id: string;
readonly type?: string;
}> {
private wrapper: HTMLDivElement | undefined;
public componentDidMount(): void {
if (this.wrapper) {
const textInput = new MDCTextField(this.wrapper);
}
}
public render(): JSX.Element {
return (
<div className="mdc-text-field mdc-text-field--outlined" ref={(i: HTMLDivElement): HTMLDivElement => this.wrapper = i}>
<input type={this.props.type || "text"} id={this.props.id} className="mdc-text-field__input" spellCheck={false}></input>
<div className="mdc-notched-outline">
<div className="mdc-notched-outline__leading"></div>
<div className="mdc-notched-outline__notch">
<label htmlFor={this.props.id} className="mdc-floating-label">{this.props.label}</label>
</div>
<div className="mdc-notched-outline__trailing"></div>
</div>
</div>
);
}
}
export class Button extends React.Component<{
readonly type: "outlined" | "unelevated";
readonly className?: string;
readonly onClick?: () => void;
}> {
private button: HTMLButtonElement | undefined;
public componentDidMount(): void {
if (this.button) {
const b = new MDCRipple(this.button);
}
}
public render(): JSX.Element {
return (
<button onClick={() => this.props.onClick ? this.props.onClick() : undefined} className={`mdc-button mdc-button--${this.props.type} ${this.props.className || ""}`} ref={(b: HTMLButtonElement): HTMLButtonElement => this.button = b}>
<span className="mdc-button__label">{this.props.children}</span>
</button>
);
}
}
export class Tooltip extends React.Component<{
readonly message: string;
}> {
public componentDidMount(): void {
Object.keys(this.refs).forEach((ref) => {
const el = this.refs[ref];
if (el) {
const element = ReactDOM.findDOMNode(el);
if (element) {
const te = document.createElement("div");
te.className = "md-tooltip-content";
te.innerHTML = this.props.message;
element.appendChild(te);
(element as HTMLElement).classList.add("md-tooltip");
}
}
});
}
public render(): JSX.Element {
return (
<>
{React.Children.map(this.props.children, (element, idx) => {
return React.cloneElement(element as any, { ref: idx });
})}
</>
);
}
}
export class Ripple extends React.Component<{
readonly className?: string;
}> {
public componentDidMount(): void {
Object.keys(this.refs).forEach((ref) => {
const el = this.refs[ref];
if (el) {
const element = ReactDOM.findDOMNode(el);
if (element) {
(element as HTMLElement).classList.add("mdc-ripple-surface");
(element as HTMLElement).setAttribute("data-mdc-ripple-is-unbounded", "");
const r = new MDCRipple(element);
}
}
});
}
public render(): JSX.Element {
return (
<>
{React.Children.map(this.props.children, (element, idx) => {
return React.cloneElement(element as any, { ref: idx });
})}
</>
);
}
}
export class Logo extends React.Component {
public render(): JSX.Element {
return (
<svg className="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 471 117"
style={{enableBackground: "new 0 0 471 117"} as any} xmlSpace="preserve">
<g>
<g>
<path className="logo-fill" d="M217,75.6c5.9,0,10.7-2.3,14.5-7l7.7,7.9c-6.1,6.9-13.3,10.3-21.6,10.3s-15.1-2.6-20.5-7.9
C191.7,73.7,189,67,189,59s2.7-14.7,8.2-20s12.2-8,20.1-8c8.8,0,16.2,3.4,22.2,10.1l-7.5,8.5c-3.8-4.7-8.5-7.1-14.2-7.1
c-4.5,0-8.4,1.5-11.6,4.4c-3.2,3-4.8,6.9-4.8,11.9s1.5,9,4.5,12.1C209,74.1,212.6,75.6,217,75.6z M284.1,46.7
c-3.1-3.4-6.9-5.1-11.4-5.1s-8.3,1.7-11.4,5.1s-4.6,7.5-4.6,12.3s1.5,8.9,4.6,12.3s6.9,5,11.4,5s8.3-1.7,11.4-5
c3.1-3.4,4.6-7.5,4.6-12.3S287.2,50.1,284.1,46.7z M272.7,86.8c-8,0-14.7-2.7-20.1-8s-8.2-11.9-8.2-19.9c0-7.9,2.7-14.5,8.2-19.9
c5.4-5.3,12.2-8,20.1-8c8,0,14.7,2.7,20.1,8s8.2,11.9,8.2,19.9c0,7.9-2.7,14.5-8.2,19.9C287.4,84.1,280.7,86.8,272.7,86.8z
M352.3,39.4c5.1,4.7,7.7,11.2,7.7,19.6s-2.5,15-7.5,19.9s-12.7,7.3-22.9,7.3h-18.4V32.3h19C339.8,32.4,347.2,34.7,352.3,39.4z
M343.5,71.5c3-2.8,4.4-6.8,4.4-12.1s-1.5-9.4-4.4-12.2c-3-2.9-7.5-4.3-13.6-4.3h-6.7v32.8h7.6C336.3,75.6,340.5,74.2,343.5,71.5z
M409.3,32.4v10.7h-26.8v11.1h24.1v10.3h-24.1v11.2h27.7v10.6h-39.7V32.4H409.3L409.3,32.4z M464.6,50.3c0,8.6-3.4,14.2-10.3,16.7
l13.6,19.3h-14.8l-11.9-17.2h-8.3v17.2h-12V32.4h20.4c8.4,0,14.4,1.4,17.9,4.2C462.8,39.4,464.6,44,464.6,50.3z M450.1,56.7
c1.5-1.3,2.2-3.5,2.2-6.4s-0.8-4.9-2.3-6s-4.2-1.6-8.1-1.6h-9v16h8.8C445.8,58.7,448.6,58,450.1,56.7z"/>
</g>
<g>
<path className="logo-fill" d="M164.8,50.9c-3.3,0-5.5-1.9-5.5-5.8V22.7c0-14.3-6-22.2-21.5-22.2h-7.2v15.1h2.2c6.1,0,9,3.3,9,9.2v19.8
c0,8.6,2.6,12.1,8.3,13.9c-5.7,1.7-8.3,5.3-8.3,13.9c0,4.9,0,9.8,0,14.7c0,4.1,0,8.1-1.1,12.2c-1.1,3.8-2.9,7.4-5.4,10.5
c-1.4,1.8-3,3.3-4.8,4.7v2h7.2c15.5,0,21.5-7.9,21.5-22.2V71.9c0-4,2.1-5.8,5.5-5.8h4.1V51h-4V50.9L164.8,50.9z"/>
<path className="logo-fill" d="M115.8,23.3H93.6c-0.5,0-0.9-0.4-0.9-0.9v-1.7c0-0.5,0.4-0.9,0.9-0.9h22.3c0.5,0,0.9,0.4,0.9,0.9v1.7
C116.8,22.9,116.3,23.3,115.8,23.3z"/>
<path className="logo-fill" d="M119.6,44.9h-16.2c-0.5,0-0.9-0.4-0.9-0.9v-1.7c0-0.5,0.4-0.9,0.9-0.9h16.2c0.5,0,0.9,0.4,0.9,0.9V44
C120.5,44.4,120.1,44.9,119.6,44.9z"/>
<path className="logo-fill" d="M126,34.1H93.6c-0.5,0-0.9-0.4-0.9-0.9v-1.7c0-0.5,0.4-0.9,0.9-0.9h32.3c0.5,0,0.9,0.4,0.9,0.9v1.7
C126.8,33.6,126.5,34.1,126,34.1z"/>
<g>
<path className="logo-fill" d="M67.9,28.2c2.2,0,4.4,0.2,6.5,0.7v-4.1c0-5.8,3-9.2,9-9.2h2.2V0.5h-7.2c-15.5,0-21.5,7.9-21.5,22.2v7.4
C60.4,28.9,64.1,28.2,67.9,28.2z"/>
</g>
<path className="logo-fill" d="M132.8,82.6c-1.6-12.7-11.4-23.3-24-25.7c-3.5-0.7-7-0.8-10.4-0.2c-0.1,0-0.1-0.1-0.2-0.1
c-5.5-11.5-17.3-19.1-30.1-19.1S43.6,44.9,38,56.4c-0.1,0-0.1,0.1-0.2,0.1c-3.6-0.4-7.2-0.2-10.8,0.7c-12.4,3-21.8,13.4-23.5,26
c-0.2,1.3-0.3,2.6-0.3,3.8c0,3.8,2.6,7.3,6.4,7.8c4.7,0.7,8.8-2.9,8.7-7.5c0-0.7,0-1.5,0.1-2.2c0.8-6.4,5.7-11.8,12.1-13.3
c2-0.5,4-0.6,5.9-0.3c6.1,0.8,12.1-2.3,14.7-7.7c1.9-4,4.9-7.5,8.9-9.4c4.4-2.1,9.4-2.4,14-0.8c4.8,1.7,8.4,5.3,10.6,9.8
c2.3,4.4,3.4,7.5,8.3,8.1c2,0.3,7.6,0.2,9.7,0.1c4.1,0,8.2,1.4,11.1,4.3c1.9,2,3.3,4.5,3.9,7.3c0.9,4.5-0.2,9-2.9,12.4
c-1.9,2.4-4.5,4.2-7.4,5c-1.4,0.4-2.8,0.5-4.2,0.5c-0.8,0-1.9,0-3.2,0c-4,0-12.5,0-18.9,0c-4.4,0-7.9-3.5-7.9-7.9V78.4V63.9
c0-1.2-1-2.2-2.2-2.2h-3.1c-6.1,0.1-11,6.9-11,14.1s0,26.3,0,26.3c0,7.8,6.3,14.1,14.1,14.1c0,0,34.7-0.1,35.2-0.1
c8-0.8,15.4-4.9,20.4-11.2C131.5,98.8,133.8,90.8,132.8,82.6z"/>
</g>
</g>
</svg>
);
}
}
// const $ = <K extends keyof HTMLElementTagNameMap>(tagName: K, className?: string, content?: string): HTMLElementTagNameMap[K] => {
// const el = document.createElement(tagName);
// if (className) {
// el.className = className;
// }
// if (content) {
// el.innerText = content;
// }
// return el;
// };
// const createInput = (id: string, labelName: string, type: string = "text"): HTMLDivElement => {
// // <div class="mdc-text-field mdc-text-field--outlined">
// // <input type="password" id="password" class="mdc-text-field__input">
// // <!-- <label class="mdc-floating-label" for="name">Name</label>
// // <div class="mdc-line-ripple"></div> -->
// // <div class="mdc-notched-outline">
// // <div class="mdc-notched-outline__leading"></div>
// // <div class="mdc-notched-outline__notch">
// // <label for="password" class="mdc-floating-label">Password</label>
// // </div>
// // <div class="mdc-notched-outline__trailing"></div>
// // </div>
// const wrapper = $("div", "mdc-text-field mdc-text-field--outlined");
// const input = $("input", "mdc-text-field__input");
// input.type = type;
// input.id = id;
// wrapper.appendChild(input);
// const notchedOutline = $("div", "mdc-notched-outline");
// notchedOutline.appendChild($("div", "mdc-notched-outline__leading"));
// const notch = $("div", "mdc-notched-outline__notch");
// const label = $("label", "mdc-floating-label", labelName);
// label.setAttribute("for", id);
// notch.appendChild(label);
// notchedOutline.appendChild(notch);
// wrapper.appendChild(notchedOutline);
// wrapper.appendChild($("div", "mdc-notched-outline__trailing"));
// const field = new MDCTextField(wrapper);
// return wrapper;
// };
// export const createCoderLogin = (parentNode: HTMLElement): void => {
// parentNode.appendChild($("h1", "header", "Login with Coder"));
// parentNode.appendChild(createInput("username", "Username"));
// parentNode.appendChild($("br"));
// parentNode.appendChild($("br"));
// parentNode.appendChild(createInput("password", "Password", "password"));
// };

BIN
packages/app/common/src/fonts/AktivGroteskBold.eot Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskBold.ttf Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskBold.woff Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskBold.woff2 Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskMedium.eot Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskMedium.ttf Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskMedium.woff Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskMedium.woff2 Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskRegular.eot Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskRegular.ttf Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskRegular.woff Normal file
View File

Binary file not shown.

BIN
packages/app/common/src/fonts/AktivGroteskRegular.woff2 Normal file
View File

Binary file not shown.

5
packages/app/common/src/storage.ts Normal file
View File

@ -0,0 +1,5 @@
export interface StorageProvider {
set<T>(key: string, value: T): Promise<void>;
get<T>(key: string): Promise<T | undefined>;
}

24
packages/app/common/src/tooltip.scss Normal file
View File

@ -0,0 +1,24 @@
.md-tooltip {
position: relative;
}
.md-tooltip-content {
position: absolute;
bottom: -35px;
left: 50%;
padding: 7px;
transform: translateX(-50%) scale(0);
transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1);
transform-origin: top;
background: rgba(67, 67, 67, 0.97);
color: white;
letter-spacing: 0.3px;
border-radius: 3px;
font-size: 12px;
font-weight: 500;
z-index: 2;
}
.md-tooltip:hover .md-tooltip-content {
transform: translateX(-50%) scale(1);
}