wip: trpc

apps/client/src/lib/common.ts

@@ -1,14 +1,17 @@
+import { dev } from '$app/environment';
 import { addToast } from './store';
-
+import Cookies from 'js-cookie';
 export const asyncSleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay));
 
 export function errorNotification(error: any | { message: string }): void {
 	if (error instanceof Error) {
+		console.error(error.message)
 		addToast({
 			message: error.message,
 			type: 'error'
 		});
 	} else {
+		console.error(error)
 		addToast({
 			message: error,
 			type: 'error'
@@ -18,3 +21,165 @@ export function errorNotification(error: any | { message: string }): void {
 export function getRndInteger(min: number, max: number) {
 	return Math.floor(Math.random() * (max - min + 1)) + min;
 }
+
+export function getDomain(domain: string) {
+	return domain?.replace('https://', '').replace('http://', '');
+}
+
+export const notNodeDeployments = ['php', 'docker', 'rust', 'python', 'deno', 'laravel', 'heroku'];
+export const staticDeployments = [
+	'react',
+	'vuejs',
+	'static',
+	'svelte',
+	'gatsby',
+	'php',
+	'astro',
+	'eleventy'
+];
+
+export function getAPIUrl() {
+	if (GITPOD_WORKSPACE_URL) {
+		const { href } = new URL(GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '');
+		return newURL;
+	}
+	if (CODESANDBOX_HOST) {
+		return `https://${CODESANDBOX_HOST.replace(/\$PORT/, '3001')}`;
+	}
+	return dev ? `http://${window.location.hostname}:3001` : 'http://localhost:3000';
+}
+export function getWebhookUrl(type: string) {
+	if (GITPOD_WORKSPACE_URL) {
+		const { href } = new URL(GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', 'https://3001-').replace(/\/$/, '');
+		if (type === 'github') {
+			return `${newURL}/webhooks/github/events`;
+		}
+		if (type === 'gitlab') {
+			return `${newURL}/webhooks/gitlab/events`;
+		}
+	}
+	if (CODESANDBOX_HOST) {
+		const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/, '3001')}`;
+		if (type === 'github') {
+			return `${newURL}/webhooks/github/events`;
+		}
+		if (type === 'gitlab') {
+			return `${newURL}/webhooks/gitlab/events`;
+		}
+	}
+	return `https://webhook.site/0e5beb2c-4e9b-40e2-a89e-32295e570c21/events`;
+}
+
+async function send({
+	method,
+	path,
+	data = null,
+	headers,
+	timeout = 120000
+}: {
+	method: string;
+	path: string;
+	data?: any;
+	headers?: any;
+	timeout?: number;
+}): Promise<Record<string, unknown>> {
+	const token = Cookies.get('token');
+	const controller = new AbortController();
+	const id = setTimeout(() => controller.abort(), timeout);
+	const opts: any = { method, headers: {}, body: null, signal: controller.signal };
+	if (data && Object.keys(data).length > 0) {
+		const parsedData = data;
+		for (const [key, value] of Object.entries(data)) {
+			if (value === '') {
+				parsedData[key] = null;
+			}
+		}
+		if (parsedData) {
+			opts.headers['Content-Type'] = 'application/json';
+			opts.body = JSON.stringify(parsedData);
+		}
+	}
+
+	if (headers) {
+		opts.headers = {
+			...opts.headers,
+			...headers
+		};
+	}
+	if (token && !path.startsWith('https://')) {
+		opts.headers = {
+			...opts.headers,
+			Authorization: `Bearer ${token}`
+		};
+	}
+	if (!path.startsWith('https://')) {
+		path = `/api/v1${path}`;
+	}
+
+	if (dev && !path.startsWith('https://')) {
+		path = `${getAPIUrl()}${path}`;
+	}
+	if (method === 'POST' && data && !opts.body) {
+		opts.body = data;
+	}
+	const response = await fetch(`${path}`, opts);
+
+	clearTimeout(id);
+
+	const contentType = response.headers.get('content-type');
+
+	let responseData = {};
+	if (contentType) {
+		if (contentType?.indexOf('application/json') !== -1) {
+			responseData = await response.json();
+		} else if (contentType?.indexOf('text/plain') !== -1) {
+			responseData = await response.text();
+		} else {
+			return {};
+		}
+	} else {
+		return {};
+	}
+	if (!response.ok) {
+		if (
+			response.status === 401 &&
+			!path.startsWith('https://api.github') &&
+			!path.includes('/v4/')
+		) {
+			Cookies.remove('token');
+		}
+
+		throw responseData;
+	}
+	return responseData;
+}
+
+export function get(path: string, headers?: Record<string, unknown>): Promise<Record<string, any>> {
+	return send({ method: 'GET', path, headers });
+}
+
+export function del(
+	path: string,
+	data: Record<string, unknown>,
+	headers?: Record<string, unknown>
+): Promise<Record<string, any>> {
+	return send({ method: 'DELETE', path, data, headers });
+}
+
+export function post(
+	path: string,
+	data: Record<string, unknown> | FormData,
+	headers?: Record<string, unknown>
+): Promise<Record<string, any>> {
+	return send({ method: 'POST', path, data, headers });
+}
+
+export function put(
+	path: string,
+	data: Record<string, unknown>,
+	headers?: Record<string, unknown>
+): Promise<Record<string, any>> {
+	return send({ method: 'PUT', path, data, headers });
+}

apps/client/src/lib/components/Beta.svelte

@@ -0,0 +1 @@
+<span class="badge bg-coollabs-gradient rounded text-white font-normal"> BETA </span>

apps/client/src/lib/components/CopyPasswordField.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { addToast } from '$lib/store';
+	let showPassword = false;
+
+	export let value: string;
+	export let disabled = false;
+	export let isPasswordField = false;
+	export let readonly = false;
+	export let textarea = false;
+	export let required = false;
+	export let pattern: string | null | undefined = null;
+	export let id: string;
+	export let name: string;
+	export let placeholder = '';
+	export let inputStyle = '';
+
+	let disabledClass = 'input input-primary bg-coolback disabled:bg-coolblack w-full';
+	let isHttps = browser && window.location.protocol === 'https:';
+
+	function copyToClipboard() {
+		if (isHttps && navigator.clipboard) {
+			navigator.clipboard.writeText(value);
+			addToast({
+				message: 'Copied to clipboard.',
+				type: 'success'
+			});
+		}
+	}
+</script>
+
+<div class="relative">
+	{#if !isPasswordField || showPassword}
+		{#if textarea}
+			<textarea
+				style={inputStyle}
+				rows="5"
+				class={disabledClass}
+				class:pr-10={true}
+				class:pr-20={value && isHttps}
+				class:border={required && !value}
+				class:border-red-500={required && !value}
+				{placeholder}
+				type="text"
+				{id}
+				{pattern}
+				{required}
+				{readonly}
+				{disabled}
+				{name}>{value}</textarea
+			>
+		{:else}
+			<input
+				style={inputStyle}
+				class={disabledClass}
+				type="text"
+				class:pr-10={true}
+				class:pr-20={value && isHttps}
+				class:border={required && !value}
+				class:border-red-500={required && !value}
+				{id}
+				{name}
+				{required}
+				{pattern}
+				{readonly}
+				bind:value
+				{disabled}
+				{placeholder}
+			/>
+		{/if}
+	{:else}
+		<input
+			style={inputStyle}
+			class={disabledClass}
+			class:pr-10={true}
+			class:pr-20={value && isHttps}
+			class:border={required && !value}
+			class:border-red-500={required && !value}
+			type="password"
+			{id}
+			{name}
+			{readonly}
+			{pattern}
+			{required}
+			bind:value
+			{disabled}
+			{placeholder}
+		/>
+	{/if}
+
+	<div class="absolute top-0 right-0 flex justify-center items-center h-full cursor-pointer text-stone-600 hover:text-white mr-3">
+		<div class="flex space-x-2">
+			{#if isPasswordField}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div on:click={() => (showPassword = !showPassword)}>
+					{#if showPassword}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+							/>
+						</svg>
+					{:else}
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-6 w-6"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+							/>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								stroke-width="2"
+								d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+							/>
+						</svg>
+					{/if}
+				</div>
+			{/if}
+			{#if value && isHttps}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<div on:click={copyToClipboard}>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<rect x="8" y="8" width="12" height="12" rx="2" />
+						<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" />
+					</svg>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>

apps/client/src/lib/components/Explainer.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	// import { onMount } from 'svelte';
+
+	// import Tooltip from './Tooltip.svelte';
+	export let explanation = '';
+	export let position = 'dropdown-right';
+	// let id: any;
+	// let self: any;
+	// onMount(() => {
+	// 	id = `info-${self.offsetLeft}-${self.offsetTop}`;
+	// });
+</script>
+
+<div class={`dropdown dropdown-end ${position}`}>
+	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<label tabindex="0" class="btn btn-circle btn-ghost btn-xs text-sky-500">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			class="w-4 h-4 stroke-current"
+			><path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+			/></svg
+		>
+	</label>
+	<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+	<div tabindex="0" class="card compact dropdown-content shadow bg-coolgray-400 rounded w-64">
+		<div class="card-body">
+			<!-- <h2 class="card-title">You needed more info?</h2>  -->
+			<p class="text-xs font-normal">{@html explanation}</p>
+		</div>
+	</div>
+</div>

apps/client/src/lib/components/Setting.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import Beta from './Beta.svelte';
+	import Explaner from './Explainer.svelte';
+	import Tooltip from './Tooltip.svelte';
+
+	export let id: any;
+	export let customClass: any = null;
+	export let setting: any;
+	export let title: any;
+	export let isBeta: any = false;
+	export let description: any = null;
+	export let isCenter = true;
+	export let disabled = false;
+	export let dataTooltip: any = null;
+	export let loading = false;
+	let triggeredBy = `#${id}`;
+</script>
+
+<div class="flex items-center py-4 pr-8">
+	<div class="flex w-96 flex-col">
+		<!-- svelte-ignore a11y-label-has-associated-control -->
+		<label>
+			{title}
+			{#if isBeta}
+				<Beta />
+			{/if}
+			{#if description && description !== ''}
+				<Explaner explanation={description} />
+			{/if}
+		</label>
+	</div>
+</div>
+<div class:text-center={isCenter} class={`flex justify-center ${customClass}`}>
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
+	<div
+		on:click
+		aria-pressed="false"
+		class="relative mx-20 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
+		class:opacity-50={disabled || loading}
+		class:bg-green-600={!loading && setting}
+		class:bg-stone-700={!loading && !setting}
+		class:bg-yellow-500={loading}
+		{id}
+	>
+		<span class="sr-only">Use setting</span>
+		<span
+			class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out"
+			class:translate-x-5={setting}
+			class:translate-x-0={!setting}
+		>
+			<span
+				class=" absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
+				class:opacity-0={setting}
+				class:opacity-100={!setting}
+				class:animate-spin={loading}
+				aria-hidden="true"
+			>
+				<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
+					<path
+						d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2"
+						stroke="currentColor"
+						stroke-width="2"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					/>
+				</svg>
+			</span>
+			<span
+				class="absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-100 ease-out"
+				aria-hidden="true"
+				class:opacity-100={setting}
+				class:opacity-0={!setting}
+				class:animate-spin={loading}
+			>
+				<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
+					<path
+						d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"
+					/>
+				</svg>
+			</span>
+		</span>
+	</div>
+</div>
+
+{#if dataTooltip}
+	<Tooltip {triggeredBy} placement="top">{dataTooltip}</Tooltip>
+{/if}

apps/client/src/lib/store.ts

@@ -21,7 +21,8 @@ export const trpc = createTRPCProxyClient<AppRouter>({
 		})
 	]
 });
-
+export const disabledButton: Writable<boolean> = writable(false);
+export const location: Writable<null | string> = writable(null)
 interface AppSession {
 	isRegistrationEnabled: boolean;
 	token?: string;
@@ -139,3 +140,33 @@ export const status: Writable<any> = writable({
 		isPublic: false
 	}
 });
+
+export function checkIfDeploymentEnabledApplications(isAdmin: boolean, application: any) {
+	return !!(
+		(isAdmin && application.buildPack === 'compose') ||
+		((application.fqdn || application.settings.isBot) &&
+			((application.gitSource && application.repository && application.buildPack) ||
+				application.simpleDockerfile) &&
+			application.destinationDocker)
+	);
+}
+export const setLocation = (resource: any, settings?: any) => {
+	if (resource.settings.isBot && resource.exposePort) {
+		disabledButton.set(false);
+		return location.set(`http://${dev ? 'localhost' : settings.ipv4}:${resource.exposePort}`);
+	}
+	if (GITPOD_WORKSPACE_URL && resource.exposePort) {
+		const { href } = new URL(GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', `https://${resource.exposePort}-`).replace(/\/$/, '');
+		return location.set(newURL);
+	} else if (CODESANDBOX_HOST) {
+		const newURL = `https://${CODESANDBOX_HOST.replace(/\$PORT/, resource.exposePort)}`;
+		return location.set(newURL);
+	}
+	if (resource.fqdn) {
+		return location.set(resource.fqdn);
+	} else {
+		location.set(null);
+		disabledButton.set(false);
+	}
+};