Skip to content

Commit

Permalink
Web account
Browse files Browse the repository at this point in the history
  • Loading branch information
@Levminer
Levminer committed Jan 9, 2025
1 parent 23147a2 commit e9f34a1
Show file tree
Hide file tree
Showing 6 changed files with 175 additions and 163 deletions.
10 changes: 1 addition & 9 deletions platforms/interface/ui/navigation/navigation.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,17 +60,9 @@
<a
aria-label="Connections"
href="/connections"
class="group inline-flex flex-shrink-0 flex-grow flex-col items-center justify-center px-5 text-gray-200 duration-200 ease-in-out hover:bg-gray-800 hover:text-white"
>
<MonitorSmartphone />
</a>

<a
aria-label="Settings"
href="/settings"
class="group inline-flex flex-shrink-0 flex-grow flex-col items-center justify-center rounded-e-full px-5 text-gray-200 duration-200 ease-in-out hover:bg-gray-800 hover:text-white sm:rounded-none"
>
<Settings />
<MonitorSmartphone />
</a>
</div>
</div>
Expand Down
41 changes: 39 additions & 2 deletions platforms/interface/ui/utils/connection.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,27 @@
import { getSettings, setSettings } from "../stores/settings.ts"
import { supabaseClient } from "./supabase.ts"

export const deleteConnectionCode = (code: string) => {
export const deleteConnectionCode = async (code: string) => {
const settings = getSettings()

settings.connectionCodes = settings.connectionCodes.filter((item) => item.code !== code)

setSettings(settings)

// delete connection
try {
const { data: userData, error: userError } = await supabaseClient.auth.getUser()

if (!userError && userData.user) {
const res = confirm("Do you want to delete the connection from the cloud?")

if (res) {
const { data, error } = await supabaseClient.from("remote_connection").delete().eq("code", code)
}
}
} catch (error) {
console.log(error)
}
}

export const editConnectionCode = (code: string) => {
Expand All @@ -31,7 +47,7 @@ export const editConnectionCode = (code: string) => {
setSettings(settings)
}

export const addConnectionCode = () => {
export const addConnectionCode = async () => {
const settings = getSettings()

const nameInput = document.getElementById("name") as HTMLInputElement
Expand All @@ -45,6 +61,12 @@ export const addConnectionCode = () => {
return alert("Invalid connection code! The connection code must start with: crs_")
}

// check if connection code already exists
const connectionCodeExists = settings.connectionCodes.find((item) => item.code === codeInput.value)
if (connectionCodeExists) {
return alert("Connection code already exists! Please enter a unique connection code.")
}

settings.connectionCodes = [
...settings.connectionCodes,
{
Expand All @@ -54,6 +76,21 @@ export const addConnectionCode = () => {
]

setSettings(settings)

// save connection
try {
const { data: userData, error: userError } = await supabaseClient.auth.getUser()

if (!userError && userData.user) {
const { data, error } = await supabaseClient.from("remote_connection").insert({
code: codeInput.value,
name: nameInput.value,
user_id: userData.user.id,
})
}
} catch (error) {
console.log(error)
}
}

export const addDevice = () => {
Expand Down
8 changes: 8 additions & 0 deletions platforms/interface/web/src/components/appHeader.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,13 @@
{#if $state.state === "connected"}
<PowerDropdown {action} />
{/if}
<a
href="/account"
class="inline-flex items-center justify-center gap-2 rounded-2xl bg-gray-700 px-3 py-2 text-lg font-medium duration-200 ease-in hover:bg-white hover:text-black"
>
<User />
<p class="hidden md:block">Account</p>
</a>
<ConnectionDropdown {connect} />
</div>
</div>
Expand All @@ -19,6 +26,7 @@
import { settings } from "ui/stores/settings"
import { state } from "../stores/state"
import { onMount } from "svelte"
import { User } from "lucide-svelte"
const action = (type: string) => {
if (type === "disconnect") {
Expand Down
76 changes: 42 additions & 34 deletions platforms/interface/web/src/components/connect.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,45 @@
<div class="m-20 mx-auto flex w-full max-w-2xl flex-row px-3">
<div class="flex w-full flex-col gap-3 rounded-xl p-3">
{#each $settings.connectionCodes as item}
<ConnectItem {item} />
{/each}
{#if $settings.connectionCodes.length === 0}
<div class="text-center">
<h2>No remote connections</h2>
<h3 class="mb-5 text-center">Add a new remote connection or login to sync your connections</h3>
</div>
{/if}
{#if user === null}
<a href="/login" class="button">Login</a>
{/if}
<ModularDialog title={"Add Remote Connection"} description={"You can get your connection code from the Cores desktop app."}>
<slot slot="openButton">
<Dialog.Trigger class="smallButton w-full">Add connection</Dialog.Trigger>
</slot>
<slot slot="confirmButton">
<Dialog.Close on:click={() => addConnectionCode()} class="smallButton">
<Plus class="h-5 w-5" />
Add
</Dialog.Close>
</slot>
<div class="flex flex-col flex-wrap gap-3">
<div>
<h5>Name <span class="text-red-500">*</span></h5>
<input placeholder="My Home PC" class="input mt-1" type="text" id="name" />
{#if loading}
<Loading />
{:else}
<div class="m-20 mx-auto flex w-full max-w-2xl flex-row px-3">
<div class="flex w-full flex-col gap-3 rounded-xl p-3">
{#each $settings.connectionCodes as item}
<ConnectItem {item} />
{/each}
{#if $settings.connectionCodes.length === 0}
<div class="text-center">
<h2>No remote connections</h2>
<h3 class="mb-5 text-center">Add a new remote connection or login to sync your connections</h3>
</div>
{/if}
{#if $settings.connectionCodes.length === 0}
<a href="/login" class="button">Login</a>
{/if}
<ModularDialog title={"Add Remote Connection"} description={"You can get your connection code from the Cores desktop app."}>
<slot slot="openButton">
<Dialog.Trigger class="smallButton w-full">Add connection</Dialog.Trigger>
</slot>
<slot slot="confirmButton">
<Dialog.Close on:click={() => addConnectionCode()} class="smallButton">
<Plus class="h-5 w-5" />
Add
</Dialog.Close>
</slot>
<div class="flex flex-col flex-wrap gap-3">
<div>
<h5>Name <span class="text-red-500">*</span></h5>
<input placeholder="My Home PC" class="input mt-1" type="text" id="name" />
</div>

<div>
<h5>Connection code <span class="text-red-500">*</span></h5>
<input placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
<div>
<h5>Connection code <span class="text-red-500">*</span></h5>
<input placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
</div>
</div>
</div>
</ModularDialog>
</ModularDialog>
</div>
</div>
</div>
{/if}

<script lang="ts">
import { getSettings, setSettings, settings } from "ui/stores/settings.ts"
Expand All @@ -47,13 +51,17 @@
import { onMount } from "svelte"
import { supabaseClient } from "ui/utils/supabase"
import type { User } from "@supabase/supabase-js"
import Loading from "ui/navigation/loading.svelte"
$: user = null as User | null
$: loading = true
onMount(async () => {
const { data: userData, error: userError } = await supabaseClient.auth.getUser()
const settings = getSettings()
loading = false
if (!userError && userData !== null) {
user = userData.user
const { data, error } = await supabaseClient.from("remote_connection").select("*")
Expand Down
85 changes: 85 additions & 0 deletions platforms/interface/web/src/routes/(app)/account/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
{#if loading}
<Loading />
{:else}
<div class="transparent-900 m-10 mx-auto w-11/12 rounded-xl sm:w-full">
<div class="mx-10 flex flex-col gap-5 pb-10 pt-10 sm:mx-3 sm:flex-wrap">
<!-- account -->
<div class="transparent-800 flex w-full flex-row flex-wrap items-center justify-between rounded-xl p-8 text-left sm:p-4">
<div class="flex flex-col items-start gap-3">
<div class="flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<User />
</div>
<h2>Account</h2>
</div>
<h3>Email: {user?.email}</h3>
</div>

<div class="flex flex-col items-start gap-3 sm:my-5">
<button
on:click={async () => {
await supabaseClient.auth.signOut()
goto("/home")
}}
class="button"
>
<LogOut />
Log out
</button>
</div>
</div>

<!-- about -->
<div class="transparent-800 flex w-full flex-row flex-wrap items-center justify-between rounded-xl p-8 text-left sm:p-4">
<div class="flex flex-col items-start gap-3">
<div class="flex items-center gap-3">
<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
<Info />
</div>
<h2>About Cores</h2>
</div>
<h3>Information about your Cores build and your computer.</h3>
</div>

<div class="flex flex-col items-start gap-3 sm:my-5">
<button
on:click={() => {
alert(`Cores ${version} \n\nRelease date: ${date} \nBuild number: ${number} \n\nCreated by Lőrik Levente`)
}}
class="button"
>
<Info />
About Cores
</button>
</div>
</div>
</div>
</div>
{/if}

<script lang="ts">
import { supabaseClient } from "ui/utils/supabase"
import { onMount } from "svelte"
import Loading from "ui/navigation/loading.svelte"
import { goto } from "$app/navigation"
import { LogOut, User } from "lucide-svelte"
import { Info, Megaphone, Github } from "lucide-svelte"
import { version, number, date } from "../../../../../../../build.json"
import type { User as UserType } from "@supabase/supabase-js"
$: loading = true
$: user = null as UserType | null
onMount(async () => {
const { data: userData, error: userError } = await supabaseClient.auth.getUser()
console.log(userData, userError)
if (!userError && userData !== null) {
user = userData.user
loading = false
} else {
goto("/login")
}
})
</script>
Loading

0 comments on commit e9f34a1

Please sign in to comment.