36c05ed335
* Update VS Code to 1.32.0 * Update patch Most changes are moved files, most notably shell.contribution.ts which is now main.contribution.ts. Also: - repl.ts no longer uses isMacintosh - shell.ts doesn't exist - added back the commented-out CSP headers * Use es6 target for bootstrap-fork * Directly reference cross-env binary yarn and npm find the binary just fine when running the tasks from the root but it doesn't work if you run one of those tasks directly from within those directories. * Update import paths and bootstrap-fork ignores * Increase memory limit for building default extensions * Fix invalid regex in Firefox * Update startup function * Fix global.require error * Update zip extract arguments * Update travis to minimum required Node version * Always chmod executable dependencies Fixes EACCESS errors for users that had the files unpacked before we added the chmod call. * Remove unused var declaration
574 lines
20 KiB
TypeScript
574 lines
20 KiB
TypeScript
//@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: "Dev 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: process.env.VERSION,
|
|
});
|
|
} 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"));
|
|
// };
|