IT/SAMFrontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First Commit

Browse Source
This commit is contained in:
Donavon McDowell 2023-11-16 09:49:20 -07:00
commit 3b207dd176
26 changed files with 3269 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

1
.npmrc Normal file
View File

@ -0,0 +1 @@
engine-strict=true

20
Dockerfile Normal file
View File

@ -0,0 +1,20 @@
# Use the official Node.js 14 image as the base image
FROM node:14
# Set the working directory inside the container
WORKDIR /app
# Copy package.json and package-lock.json to the working directory
COPY package*.json ./
# Install project dependencies
RUN npm install
# Copy the project files to the working directory
COPY . .
# Expose port 3000 for the Node.js application
EXPOSE 3000
# Start the Node.js application
CMD [ "node", "server.js" ]

38
README.md Normal file
View File

@ -0,0 +1,38 @@
# create-svelte
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
## Creating a project
If you're seeing this, you've probably already done this step. Congrats!
```bash
# create a new project in the current directory
npm create svelte@latest
# create a new project in my-app
npm create svelte@latest my-app
```
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

17
jsconfig.json Normal file
View File

@ -0,0 +1,17 @@
{
"extends": "./.svelte-kit/tsconfig.json",
"compilerOptions": {
"allowJs": true,
"checkJs": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": false
}
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files
//
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
// from the referenced tsconfig.json - TypeScript does not merge them in
}

2621
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

31
package.json Normal file
View File

@ -0,0 +1,31 @@
{
"name": "logfrog",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch"
},
"devDependencies": {
"@skeletonlabs/skeleton": "^2.2.0",
"@skeletonlabs/tw-plugin": "^0.2.1",
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/adapter-node": "^1.3.1",
"@sveltejs/kit": "^1.20.4",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.31",
"svelte": "^4.0.5",
"svelte-check": "^3.4.3",
"tailwindcss": "^3.3.3",
"typescript": "^5.0.0",
"vite": "^4.4.2"
},
"type": "module",
"dependencies": {
"dotenv": "^16.3.1",
"i18n-iso-countries": "^7.7.0"
}
}

6
postcss.config.js Normal file
View File

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

5
src/app.css Normal file
View File

@ -0,0 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
html, body { @apply h-full overflow-hidden; }

12
src/app.d.ts vendored Normal file
View File

@ -0,0 +1,12 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface Platform {}
}
}
export {};

13
src/app.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<title>S.A.M</title>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" data-theme="skeleton">
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
</body>
</html>

21
src/components/Count.svelte Normal file
View File

@ -0,0 +1,21 @@
<script>
import { onMount } from 'svelte';
export let url = "http://localhost:3000/count/signins"; // Default URL
let data = "";
async function getCount() {
const response = await fetch(url);
if (response.ok) {
data = await response.json();
}
}
onMount(async () => {
getCount();
})
</script>
<h1 class="text-4xl">{data}</h1>

19
src/components/Sidebar.svelte Normal file
View File

@ -0,0 +1,19 @@
<script>
import { LightSwitch } from '@skeletonlabs/skeleton';
</script>
<nav class="w-40 flex flex-col bg-slate-200 dark:bg-slate-800 rounded items-center dark:text-white h-full"> <!-- Vertical Nav Bar -->
<a href="/" class="w-full hidden flex-row justify-center dark:flex"><img src="S.A.M-white.png" class="w-2/3 mt-5"/></a>
<a href="/" class="w-full flex flex-row justify-center dark:hidden"><img src="S.A.M-black.png" class="w-2/3 mt-5"/></a>
<hr style="height:30px">
<ul class="font-semibold w-full p-2">
<a href="/" class="hover:bg-slate-400 w-full justify-center flex rounded mb-2 mt-2 p-4"><li class="">Dashboard</li></a>
<a href="/SuspiciousAccounts" class="hover:bg-slate-400 w-full justify-center flex rounded mb-2 mt-3 p-4"><li class="">Accounts</li></a>
<a href="/SuspiciousSignIns" class="hover:bg-slate-400 w-full justify-center flex rounded mb-2 mt-3 p-4"><li class="">Sign ins</li></a>
<a href="/Exceptions"><li class="hover:bg-slate-400 w-full justify-center flex rounded mb-2 mt-3 p-4">Exceptions</li></a>
<!--<a href="/"><li class="hover:bg-slate-400 w-full justify-center flex rounded mb-2 mt-3 p-4">Alerts</li></a>-->
</ul>
<div class="mt-auto mb-2">
<LightSwitch class=""/>
</div>
</nav>

1
src/lib/index.js Normal file
View File

@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

5
src/routes/+layout.svelte Normal file
View File

@ -0,0 +1,5 @@
<script>
import "../app.css";
</script>
<slot />

96
src/routes/+page.svelte Normal file
View File

@ -0,0 +1,96 @@
<script lang="ts">
import { LightSwitch } from '@skeletonlabs/skeleton';
import { AppShell } from '@skeletonlabs/skeleton';
import Sidebar from "../components/Sidebar.svelte";
import { onMount } from 'svelte';
import { Toast, getToastStore } from '@skeletonlabs/skeleton';
import { initializeStores } from '@skeletonlabs/skeleton';
import type { ToastSettings, ToastStore } from '@skeletonlabs/skeleton';
import Count from "../components/Count.svelte";
initializeStores();
const toastStore = getToastStore();
const t: ToastSettings = {
message: 'Power Toggled',
background: 'variant-filled-warning',
timeout: 500
};
let powerState = 0; // Initialize power state to 0 (off)
let buttonText = "";
async function flipPower() {
toastStore.trigger(t);
const response = await fetch("https://logfrogbackend.mpe.ca/settings", {
method: 'POST', // Use POST method
headers: {
'Content-Type': 'application/json',
},
});
if (response.ok) {
const data = await response.json();
powerState = data; // Update powerState with the API response
if (powerState == 0) {
buttonText = "Off";
} else {
buttonText = "On";
}
} else {
console.error('Error:', response.status);
}
return; // You can return undefined if you don't need to return any specific value
}
async function getPower() {
const response = await fetch("https://logfrogbackend.mpe.ca/settings");
if (response.ok) {
const data = await response.json();
if (data[0].power == 0) {
buttonText = "Off";
} else {
buttonText = "On";
}
} else {
console.error('Error:', response.status);
}
return; // You can return undefined if you don't need to return any specific value
}
onMount(async () => {
getPower()
addEventListener
})
</script>
<Toast />
<AppShell>
<svelte:fragment slot="sidebarLeft">
<Sidebar />
</svelte:fragment>
<div class="w-full h-full p-5 flex flex-col bg-slate-100 dark:bg-slate-700 dark:text-white">
<h1 class="text-2xl font-semibold mb-4">Dashboard</h1>
<div class="w-full rounded-xl shadow-xl h-1/4 bg-slate-300 dark:bg-slate-800 dark:text-white flex flex-row justify-evenly font-medium dark:border-slate-600 border-slate-100 border border-4"> <!--Quick Stats-->
<div class="flex flex-col justify-center text-center w-full">
<h2 class="text-2xl">Accounts</h2>
<Count url="https://logfrogbackend.mpe.ca/count/accounts" />
</div>
<div class="flex flex-col justify-center text-center w-full">
<h2 class="text-2xl">Sign-Ins</h2>
<Count url="https://logfrogbackend.mpe.ca/count/signins" />
</div>
<div class="flex flex-col justify-center text-center w-full">
<h2 class="text-2xl">Exceptions</h2>
<Count url="https://logfrogbackend.mpe.ca/count/exceptions" />
</div>
</div>
<br>
<div class="w-full h-full flex flex-col justify-center items-center">
<div on:click={flipPower} class="w-1/2 max-w-lg aspect-square rounded-full bg-slate-300 dark:bg-slate-800 p-2 flex justify-center items-center shadow-2xl hover:bg-slate-400 dark:hover:bg-slate-600 dark:border-slate-600 border-slate-100 border border-4"><h2 class="dark:text-white text-black font-medium text-6xl">{buttonText}</h2></div>
</div>
</div>
</AppShell>

151
src/routes/Exceptions/+page.svelte Normal file
View File

@ -0,0 +1,151 @@
<script lang="js">
import { AppShell } from '@skeletonlabs/skeleton';
import { onMount, afterUpdate } from 'svelte';
import { Table } from '@skeletonlabs/skeleton';
import Sidebar from "../../components/Sidebar.svelte";
let suspiciousaccounts = [];
// Function to fetch data from the API
async function fetchData() {
try {
const response = await fetch("https://logfrogbackend.mpe.ca/exception"); // Replace with your API URL
if (response.ok) {
suspiciousaccounts = await response.json();
console.log(suspiciousaccounts);
} else {
console.error('Error:', response.status);
}
} catch (error) {
console.error('Error:', error);
}
}
onMount(async () => {
fetchData();
});
// Function to handle the asynchronous click event for account deletion
async function handleDeleteClick(event, account) {
event.preventDefault(); // Prevent the default behavior of following the link
try {
const response = await fetch(`https://logfrogbackend.mpe.ca/exception/${account.userPrincipleName}`, {
method: 'DELETE', // Use the DELETE HTTP method to indicate deletion
});
if (response.ok) {
// Handle the successful deletion, e.g., remove the account from the frontend
console.log(`Account with userPrincipleName ${account.userPrincipleName} deleted`);
// Update the frontend by removing the deleted account from the suspiciousaccounts array
suspiciousaccounts = suspiciousaccounts.filter(item => item.userPrincipleName !== account.userPrincipleName);
} else {
console.error('Error:', response.status);
}
} catch (error) {
console.error('Error:', error);
}
}
// Function to handle the asynchronous click event for account deletion
async function handleSubmitClick(event, email, countryOrRegion, date) {
event.preventDefault();
try {
const response = await fetch('https://logfrogbackend.mpe.ca/exception', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email,
countryOrRegion,
date,
}),
});
if (response.ok) {
// Handle success
console.log('Exception added successfully.');
closeModal(); // Close the modal after successful submission
} else {
console.error('Error:', response.status);
}
window.location.reload();
} catch (error) {
console.error('Error:', error);
}
}
let email = '';
let countryOrRegion = '';
let date = '';
let showModal = "hidden";
function handleAddClick(event) {
event.preventDefault();
showModal = "visible"; // Show the modal when the button is clicked
}
function closeModal() {
showModal = "hidden"; // Close the modal
}
</script>
<!--Modal-->
<div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 {showModal}">
<div class="bg-white dark:bg-gray-700 rounded-lg p-8 w-1/2 rounded text-white flex flex-col dark:text-slate-100">
<h2 class="font-bold text-2xl py-2 text-slate-700 dark:text-slate-100">Add Exception</h2>
<label for="Email" class="text-slate-900 dark:text-slate-100 font-medium">Email</label>
<input type="text" placeholder="Enter Email" id="email" name="email" class="text-black rounded p-1 border border-slate-900 dark:border-none" bind:value={email}/>
<label for="cc" class="text-slate-900 dark:text-slate-100 font-medium">Country Code</label>
<input type="text" placeholder="Example: CA = Canada" id="cc" name="cc" class="text-black rounded p-1 border border-slate-900 dark:border-none" bind:value={countryOrRegion}/>
<label for="date" class="text-slate-900 dark:text-slate-100 font-medium">Expiry Date</label>
<input type="date" id="date" name="date" class="text-black rounded p-1 border border-slate-900 dark:border-none" bind:value={date}/>
<div class="flex flex-row-reverse py-2">
<input type="button" value="Submit" id="date" name="date" class="text-black dark:text-white rounded p-2 bg-green-500 w-1/3 font-medium hover:bg-green-400 m-2" on:click={(event) => handleSubmitClick(event, email, countryOrRegion.toUpperCase(), date)}/>
<input type="button" value="Cancel" id="date" name="date" class="text-black dark:text-white rounded p-2 bg-red-500 w-1/3 font-medium hover:bg-red-400 m-2" on:click={() => closeModal()}/>
</div>
</div>
</div>
<AppShell>
<svelte:fragment slot="sidebarLeft">
<Sidebar />
</svelte:fragment>
<div class="w-full h-full p-5 flex flex-col bg-slate-100 dark:bg-slate-700 dark:text-white"> <!-- Page container -->
<h1 class="text-2xl font-semibold mb-4">Exceptions</h1>
<!-- Display the table below -->
<div class="flex flex-row flex-end flex-row-reverse">
<a href="#" on:click={(event) => handleAddClick(event)} class=" bg-green-400 dark:bg-green-500 rounded flex flex-col justify-center items-center px-4 py-1 font-semibold text-3xl">+</a>
</div>
<table class="w-full shadow-lg">
<thead class="bg-dark:bg-slate-800">
<tr>
<th class="text-left">Principle Name</th>
<th class="text-left">Country</th>
<th class="text-left">Expiry Date</th>
<th class="text-left"></th>
</tr>
</thead>
<tbody class="font-medium">
{#each suspiciousaccounts as account}
<tr class="odd:bg-slate-300 even:bg-slate-400 dark:odd:bg-slate-500 dark:even:bg-slate-600">
<td class="px-4 py-2">{account.userPrincipleName}</td>
<td class="px-4 py-2">{account.countryOrRegion}</td>
<td class="px-4 py-2">{account.date}</td>
<td class="px-4 py-2">
<div class="rounded flex flex-col justify-center items-center">
<a href="#" on:click={(event) => handleDeleteClick(event, account)} class=" bg-red-400 dark:bg-red-500 rounded flex flex-col justify-center items-center px-4 py-1 font-semibold">✗</a>
</div>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</AppShell>

91
src/routes/SuspiciousAccounts/+page.svelte Normal file
View File

@ -0,0 +1,91 @@
<script lang="ts">
import { AppShell } from '@skeletonlabs/skeleton';
import { onMount, afterUpdate } from 'svelte';
import { Table } from '@skeletonlabs/skeleton';
import Sidebar from "../../components/Sidebar.svelte";
let suspiciousaccounts = [];
// Function to fetch data from the API
async function fetchData() {
try {
const response = await fetch("https://logfrogbackend.mpe.ca/logs/signin/suspiciousaccounts"); // Replace with your API URL
if (response.ok) {
suspiciousaccounts = await response.json();
console.log(suspiciousaccounts);
} else {
console.error('Error:', response.status);
}
} catch (error) {
console.error('Error:', error);
}
}
onMount(async () => {
await fetchData();
});
// Function to handle the asynchronous click event
async function handleLinkClick(event, account) {
event.preventDefault(); // Prevent the default behavior of following the link
try {
const response = await fetch(`https://logfrogbackend.mpe.ca/logs/signin/checked/${account.userPrincipleName}`);
if (response.ok) {
// Handle the response data here, e.g., update the 'checked' value
const data = await response.json();
console.log(data);
// Update the 'checked' value in the suspiciousaccounts array
const index = suspiciousaccounts.findIndex(item => item.userPrincipleName === account.userPrincipleName);
if (index !== -1) {
suspiciousaccounts[index].checked = data.newCheckedValue;
}
} else {
console.error('Error:', response.status);
}
} catch (error) {
console.error('Error:', error);
}
}
</script>
<AppShell>
<svelte:fragment slot="sidebarLeft">
<Sidebar />
</svelte:fragment>
<div class="w-full h-full p-5 flex flex-col bg-slate-100 dark:bg-slate-700 dark:text-white"> <!-- Page container -->
<h1 class="text-2xl font-semibold mb-4">Accounts</h1>
<!-- Display the table below -->
<table class="w-full shadow-lg">
<thead class="bg-dark:bg-slate-800">
<tr>
<th class="text-left">Display Name</th>
<th class="text-left">Principle Name</th>
<th class="text-left">Country</th>
<th class="text-left">Status</th>
<th class="text-left">Attempts</th>
<th class="text-left">Checked</th>
</tr>
</thead>
<tbody class="font-medium">
{#each suspiciousaccounts as account}
<tr class="odd:bg-slate-300 even:bg-slate-400 dark:odd:bg-slate-500 dark:even:bg-slate-600">
<td class="px-4 py-2">{account.userDisplayName}</td>
<td class="px-4 py-2">{account.userPrincipleName}</td>
<td class="px-4 py-2">{account.countryOrRegion}</td>
<td class="px-4 py-2">{account.status}</td>
<td class="px-4 py-2">{account.attemptCount}</td>
<td class="px-4 py-2">
<div class="rounded flex flex-col justify-center items-center">
<a href="google.ca" on:click={(event) => handleLinkClick(event, account)} class="{account.checked === '✓' ? 'bg-green-400 dark:bg-green-500' : account.checked === '✗' ? 'bg-red-400 dark:bg-red-500 animate-pulse' : ''} rounded flex flex-col justify-center items-center px-4 py-1 font-semibold">{account.checked}</a>
</div>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
</AppShell>

64
src/routes/SuspiciousSignIns/+page.svelte Normal file
View File

@ -0,0 +1,64 @@
<script lang="ts">
import { AppShell } from '@skeletonlabs/skeleton';
import { onMount, afterUpdate } from 'svelte';
import { Table } from '@skeletonlabs/skeleton';
import Sidebar from "../../components/Sidebar.svelte";
import { Paginator } from '@skeletonlabs/skeleton';
let suspiciousaccounts = [];
// Function to fetch data from the API
async function fetchData() {
try {
const response = await fetch("https://logfrogbackend.mpe.ca/logs/signin/suspiciousSignIns"); // Replace with your API URL
if (response.ok) {
suspiciousaccounts = await response.json();
console.log(suspiciousaccounts);
} else {
console.error('Error:', response.status);
}
} catch (error) {
console.error('Error:', error);
}
}
onMount(async () => {
fetchData();
});
</script>
<AppShell>
<svelte:fragment slot="sidebarLeft">
<Sidebar />
</svelte:fragment>
<div class="w-full h-full p-5 flex flex-col bg-slate-100 dark:bg-slate-700 dark:text-white"> <!-- Page container -->
<h1 class="text-2xl font-semibold mb-4">Sign-Ins</h1>
<!-- Display the table below -->
<table class="w-full shadow-lg">
<thead class="bg-dark:bg-slate-800">
<tr>
<th class="text-left">Display Name</th>
<th class="text-left">Email</th>
<th class="text-left">State</th>
<th class="text-left">Country</th>
<th class="text-left">Status</th>
<th class="text-left">Date</th>
</tr>
</thead>
<tbody class="font-medium">
{#each suspiciousaccounts as account}
<tr class="odd:bg-slate-300 even:bg-slate-400 dark:odd:bg-slate-500 dark:even:bg-slate-600">
<td class="px-4 py-2">{account.userDisplayName}</td>
<td class="px-4 py-2">{account.email}</td>
<td class="px-4 py-2">{account.state}</td>
<td class="px-4 py-2">{account.countryOrRegion}</td>
<td class="px-4 py-2">{account.status}</td>
<td class="px-4 py-2">{account.insertTime}</td>
</tr>
{/each}
</tbody>
</table>
</div>
</AppShell>

BIN
static/S.A.M-black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
static/S.A.M-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
static/frog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

12
svelte.config.js Normal file
View File

@ -0,0 +1,12 @@
import adapter from '@sveltejs/adapter-node';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter()
},
preprocess: vitePreprocess()
};
export default config;

29
tailwind.config.js Normal file
View File

@ -0,0 +1,29 @@
// @ts-check
import { join } from 'path';
// 1. Import the Skeleton plugin
import { skeleton } from '@skeletonlabs/tw-plugin';
/** @type {import('tailwindcss').Config} */
export default {
// 2. Opt for dark mode to be handled via the class method
darkMode: 'class',
content: [
'./src/**/*.{html,js,svelte,ts}',
// 3. Append the path to the Skeleton package
join(require.resolve(
'@skeletonlabs/skeleton'),
'../**/*.{html,js,svelte,ts}'
)
],
theme: {
extend: {},
},
plugins: [
skeleton({
themes: { preset: [ "skeleton" ] }
})
]
}

6
vite.config.js Normal file
View File

@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});