infidel/ocp-wg-frontend
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Docker update for npm cache dir

Browse Source
This commit is contained in:
infidel 2022-12-06 11:20:44 +07:00
parent 9746a2914c
commit 1f514ac187
16 changed files with 511 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Dockerfile
View File

@ -1,8 +1,7 @@
FROM node:lts
USER node
WORKDIR /home/node/.npm
WORKDIR /home/node/app
RUN mkdir .npm
RUN mkdir /home/node/.npm
COPY . .
RUN npm install
RUN npm run build

5
public/assets/styles/tailwind.css
View File

@ -3501,11 +3501,6 @@ select {
color: rgba(16, 185, 129, var(--tw-text-opacity));
}
.text-amber-100 {
--tw-text-opacity: 1;
color: rgba(254, 243, 199, var(--tw-text-opacity));
}
.text-orange-500 {
--tw-text-opacity: 1;
color: rgba(249, 115, 22, var(--tw-text-opacity));

42
src/App.svelte
View File

@ -1,27 +1,67 @@
<!-- App.svelte -->
<script>
import { Router, Route } from "svelte-routing";
import { onMount } from 'svelte';
// Admin Layout
import Admin from "./layouts/Admin.svelte";
// Auth Layout
import Auth from "./layouts/Auth.svelte";
import { getCookie } from "components/Utils/CookieHandler.js";
// No Layout Pages
import Index from "./views/Index.svelte";
import Landing from "./views/Landing.svelte";
import Profile from "./views/Profile.svelte";
import Login from "views/auth/Login.svelte";
let isAuthenticated = false;
async function validate_me() {
const rawResponse = await fetch("https://wg.nnag.me/api2/wgCheckAuth", {
"credentials": "include",
"headers": {
"Authorization": "Token " + getCookie('Token'),
"User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0",
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8",
"Accept-Language": "en-US,en;q=0.5",
"Upgrade-Insecure-Requests": "1",
"Sec-Fetch-Dest": "document",
"Sec-Fetch-Mode": "navigate",
"Sec-Fetch-Site": "none",
"Sec-Fetch-User": "?1"
},
"method": "GET",
"mode": "cors"
});
const retVal = await rawResponse.json();
isAuthenticated = retVal.Auth;
console.log(retVal.Auth);
}
// validate_me().then( authVal.Auth => { isAuthenticated; });
// let isAuthenticated = validate_me();
export let url = "";
validate_me();
</script>
<Router url="{url}">
<!-- admin layout -->
{#if isAuthenticated == true}
<Route path="admin/*admin" component="{Admin}" />
<!-- auth layout -->
<Route path="auth/*auth" component="{Auth}" />
<!-- no layout pages -->
<Route path="landing" component="{Landing}" />
<Route path="profile" component="{Profile}" />
<Route path="/" component="{Admin}" />
{:else}
<Route path="*" component="{Auth}" />
{/if}
</Router>

24
src/components/Cards/CardTableInf.svelte
View File

@ -1,9 +1,11 @@
<script>
import axios from 'axios';
import { onMount } from 'svelte';
import { getCookie } from "components/Utils/CookieHandler.js";
let trColor;
let footprint;
let infTable = [];
// onMount(async () => {
// const wgResponse = await axios.get('/api2/wgLogs')
// .then( response => {
@ -13,10 +15,24 @@
// });
async function getwgResponse() {
let csrftoken = getCookie('csrftoken');
let authToken = getCookie('Token');
console.log(csrftoken);
console.log(authToken);
const wgResponse = await fetch(
'/api2/wgLogs'
);
'/api2/wgLogs', {
method: 'GET',
credentials: 'include',
mode: 'same-origin',
headers: {
'X-CSRFToken': csrftoken,
'Authorization': "Token "+authToken,
'Accept': 'application/json',
'Content-Type': 'application/json',
}
}
);
return await wgResponse.json();
}
@ -109,7 +125,7 @@
<th
class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"
>
Created Time
Last Session Access Time
</th>
<th
class="px-6 align-middle border border-solid py-3 text-sm uppercase border-l-0 border-r-0 whitespace-nowrap font-semibold text-left {color === 'light' ? 'bg-blueGray-50 text-blueGray-500 border-blueGray-100' : 'bg-red-700 text-red-200 border-red-600'}"

64
src/components/Cards/CardWGControl.svelte
View File

@ -6,6 +6,8 @@
import CardWGFilter from "components/Cards/CardWGFilter.svelte";
import CardWGControl from "components/Cards/CardWGControl.svelte";
import { getCookie } from "components/Utils/CookieHandler.js";
export let filter;
let showModal = false;
@ -16,21 +18,21 @@
async function apply_sys_config() {
const rawResponse = await fetch('/api2/wgSysApply');
console.log("Apply system config");
console.log(rawResponse);
}
async function login_wg() {
const rawResponse = await fetch('/api2/wgLogin', {
let csrftoken = getCookie('csrftoken');
let authToken = getCookie('Token');
const rawResponse = await fetch('/api2/wgSysApply',{
method: 'GET',
credentials: 'include',
mode: 'same-origin',
headers: {
'Authorization': 'Basic ' + btoa('tipadmin:tiplab123'),
'X-CSRFToken': csrftoken,
'Authorization': "Token "+authToken,
'Accept': 'application/json',
'Content-Type': 'application/json'
'Content-Type': 'application/json',
}
});
console.log("Apply system config");
console.log(rawResponse);
}
$: submitFilter != ""?
@ -62,33 +64,34 @@
console.log(filter);
}
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
// function getCookie(name) {
// let cookieValue = null;
// if (document.cookie && document.cookie !== '') {
// const cookies = document.cookie.split(';');
// for (let i = 0; i < cookies.length; i++) {
// const cookie = cookies[i].trim();
// // Does this cookie string begin with the name we want?
// if (cookie.substring(0, name.length + 1) === (name + '=')) {
// cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
// break;
// }
// }
// }
// return cookieValue;
// }
async function bulk_disable_req(state) {
// login_wg();
let tmp_filter = filter
filter = "";
filter = tmp_filter;
let csrftoken = getCookie('csrftoken');
let authToken = getCookie('Token');
console.log("Bulk Disable -->");
console.log(csrftoken);
console.log(authToken);
console.log("-<>-"+checked_vals);
const rawResponse = await fetch('/api2/wgEditState?id=bulk&state='+state, {
@ -97,6 +100,7 @@
mode: 'same-origin',
headers: {
'X-CSRFToken': csrftoken,
'Authorization': "Token "+authToken,
'Accept': 'application/json',
'Content-Type': 'application/json',
},
@ -104,10 +108,10 @@
});
// const content = await rawResponse.json();
// login_wg();
}
login_wg();
</script>
<div
@ -132,14 +136,14 @@
Filter
</button>
<button
class="mt-3 bg-amber-500 text-amber-100 active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
class="mt-3 bg-amber-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
type="button"
on:click="{() => apply_sys_config()}"
>
Apply to System
</button>
<button
class="mt-3 bg-red-500 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
class="mt-3 bg-red-600 text-white active:bg-red-500 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
type="button"
>
Backup

32
src/components/Cards/CardWGFilter.svelte
View File

@ -1,5 +1,7 @@
<script>
import { getCookie } from "components/Utils/CookieHandler.js";
export let submitFilter;
let barWidth = 0;
@ -12,17 +14,39 @@
}
}
async function getwgOrgs() {
let csrftoken = getCookie('csrftoken');
let authToken = getCookie('Token');
const wgResponse = await fetch(
'/api2/wgClients?param=orgs'
);
'/api2/wgClients?param=orgs', {
method: 'GET',
credentials: 'include',
mode: 'same-origin',
headers: {
'X-CSRFToken': csrftoken,
'Authorization': "Token "+authToken,
'Accept': 'application/json',
'Content-Type': 'application/json',
}
});
progress_start();
return await wgResponse.json();
}
async function getwgEmails() {
let csrftoken = getCookie('csrftoken');
let authToken = getCookie('Token');
const wgResponse = await fetch(
'/api2/wgClients?param=email'
);
'/api2/wgClients?param=email', {
method: 'GET',
credentials: 'include',
mode: 'same-origin',
headers: {
'X-CSRFToken': csrftoken,
'Authorization': "Token "+authToken,
'Accept': 'application/json',
'Content-Type': 'application/json',
}
});
progress_start();
return await wgResponse.json();
}

134
src/components/Cards/CardWGLineChart.svelte Normal file
View File

@ -0,0 +1,134 @@
<script>
import { onMount } from "svelte";
// library that creates chart objects in page
import Chart from "chart.js";
// init chart
onMount(async () => {
var config = {
type: "line",
data: {
labels: [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
],
datasets: [
{
label: new Date().getFullYear(),
backgroundColor: "#4c51bf",
borderColor: "#4c51bf",
data: [65, 78, 66, 44, 56, 67, 75],
fill: false
},
{
label: new Date().getFullYear() - 1,
fill: false,
backgroundColor: "#fff",
borderColor: "#fff",
data: [40, 68, 86, 74, 56, 60, 87]
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: false,
text: "Sales Charts",
fontColor: "white",
},
legend: {
labels: {
fontColor: "white",
},
align: "end",
position: "bottom",
},
tooltips: {
mode: "index",
intersect: false,
},
hover: {
mode: "nearest",
intersect: true,
},
scales: {
xAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Month",
fontColor: "white",
},
gridLines: {
display: false,
borderDash: [2],
borderDashOffset: [2],
color: "rgba(33, 37, 41, 0.3)",
zeroLineColor: "rgba(0, 0, 0, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
yAxes: [
{
ticks: {
fontColor: "rgba(255,255,255,.7)",
},
display: true,
scaleLabel: {
display: false,
labelString: "Value",
fontColor: "white",
},
gridLines: {
borderDash: [3],
borderDashOffset: [3],
drawBorder: false,
color: "rgba(255, 255, 255, 0.15)",
zeroLineColor: "rgba(33, 37, 41, 0)",
zeroLineBorderDash: [2],
zeroLineBorderDashOffset: [2],
},
},
],
},
},
};
var ctx = document.getElementById("line-chart").getContext("2d");
window.myLine = new Chart(ctx, config);
});
</script>
<div
class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded bg-blueGray-700"
>
<div class="rounded-t mb-0 px-4 py-3 bg-transparent">
<div class="flex flex-wrap items-center">
<div class="relative w-full max-w-full flex-grow flex-1">
<h6 class="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
Overview
</h6>
<h2 class="text-white text-xl font-semibold">
Sales value
</h2>
</div>
</div>
</div>
<div class="p-4 flex-auto">
<!-- Chart -->
<div class="relative h-350-px">
<canvas id="line-chart"></canvas>
</div>
</div>
</div>

38
src/components/Cards/CardWGProfiles.svelte
View File

@ -2,6 +2,10 @@
// import axios from 'axios';
// import {onMount} from 'svelte';
import TableDropdown from "components/Dropdowns/TableDropdown.svelte";
import { getCookie } from "components/Utils/CookieHandler.js";
export let filter_action;
export let checked_vals;
let footprint;
@ -12,9 +16,41 @@
export const wgResponse = null;
export let filter;
// function getCookie(name) {
// let cookieValue = null;
// if (document.cookie && document.cookie !== '') {
// const cookies = document.cookie.split(';');
// for (let i = 0; i < cookies.length; i++) {
// const cookie = cookies[i].trim();
// // Does this cookie string begin with the name we want?
// if (cookie.substring(0, name.length + 1) === (name + '=')) {
// cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
// break;
// }
// }
// }
// return cookieValue;
// }
async function getwgResponse(o_filter) {
let csrftoken = getCookie('csrftoken');
let authToken = getCookie('Token');
console.log(csrftoken);
console.log(authToken);
console.log("-<>-"+checked_vals);
const wgResponse = await fetch(
'/api2/wgClients?filter='+o_filter
'/api2/wgClients?filter='+o_filter, {
method: 'GET',
credentials: 'include',
mode: 'same-origin',
headers: {
'X-CSRFToken': csrftoken,
'Authorization': "Token "+authToken,
'Accept': 'application/json',
'Content-Type': 'application/json',
}
}
);
return await wgResponse.json();
}

49
src/components/Headers/HeaderStats.svelte
View File

@ -3,16 +3,55 @@
import axios from 'axios';
import { onMount } from 'svelte';
import CardStats from "components/Cards/CardStats.svelte";
import { getCookie } from "components/Utils/CookieHandler.js";
let infTable = [];
let csrftoken = getCookie('csrftoken');
let authToken = getCookie('Token');
onMount(async () => {
await axios.get('/api2/wgClients?param=stats')
.then( response => {
infTable = response.data
let rawResponse = await fetch(
'/api2/wgClients?param=stats', {
method: 'GET',
credentials: 'include',
mode: 'same-origin',
headers: {
'X-CSRFToken': csrftoken,
'Authorization': "Token "+authToken,
'Accept': 'application/json',
'Content-Type': 'application/json',
}
});
console.log(infTable);
let rawData = await rawResponse.json();
console.log(rawData);
infTable = rawData;
});
// infTable = fetch_stats();
// onMount(async () => {
// await axios.get(
// '/api2/wgClients?param=stats', {
// method: 'GET',
// credentials: 'include',
// mode: 'same-origin',
// headers: {
// 'X-CSRFToken': csrftoken,
// 'Authorization': "Token "+authToken,
// 'Accept': 'application/json',
// 'Content-Type': 'application/json',
// }
// }
// )
// .then( response => {
// infTable = response.data
// });
// console.log(infTable);
// });
</script>
<!-- Header -->
@ -23,7 +62,7 @@
<div class="w-full lg:w-6/12 xl:w-3/12 px-4">
<CardStats
statSubtitle="Connected Now"
statTitle="{ infTable.connectedtotal}"
statTitle="{ infTable.connectedtotal }"
statArrow="down"
statPercent="3.48"
statPercentColor="text-red-500"

18
src/components/Navbars/AdminNavbar.svelte
View File

@ -1,6 +1,13 @@
<script>
// core components
import UserDropdown from "components/Dropdowns/UserDropdown.svelte";
export let collapseshow;
function toggleCollapseShow(classes) {
collapseshow = classes;
}
</script>
<!-- Navbar -->
@ -11,12 +18,13 @@
class="w-full mx-autp items-center flex justify-between md:flex-nowrap flex-wrap md:px-10 px-4"
>
<!-- Brand -->
<a
class="text-white text-sm uppercase hidden lg:inline-block font-semibold"
href="#pablo" on:click={(e) => e.preventDefault()}
<button
class="md:block text-left md:pb-2 text-white mr-0 inline-block whitespace-nowrap text-sm uppercase font-bold p-4 px-0"
on:click={() => toggleCollapseShow('hidden')}
type="button"
>
Dashboard
</a>
<i class="fas fa-bars"></i>
</button>
<!-- Form -->
<form
class="md:flex hidden flex-row flex-wrap items-center lg:ml-auto mr-3"

139
src/components/Sidebar/Sidebar.svelte
View File

@ -6,11 +6,13 @@
import UserDropdown from "components/Dropdowns/UserDropdown.svelte";
let collapseShow = "hidden";
export let collapseshow;
function toggleCollapseShow(classes) {
collapseShow = classes;
collapseshow = classes;
}
export let location;
</script>
@ -18,7 +20,7 @@
class="md:left-0 md:block md:fixed md:top-0 md:bottom-0 md:overflow-y-auto md:flex-row md:flex-nowrap md:overflow-hidden shadow-xl bg-white flex flex-wrap items-center justify-between relative md:w-64 z-10 py-4 px-6"
>
<div
class="md:flex-col md:items-stretch md:min-h-full md:flex-nowrap px-0 flex flex-wrap items-center justify-between w-full mx-auto"
class="md:flex-col md:items-stretch md:min-h-full md:flex-nowrap px-0 flex flex-wrap items-center justify-between w-full mx-auto {collapseshow} "
>
<!-- Toggler -->
<button
@ -221,139 +223,6 @@
</li>
</ul>
<!-- Divider -->
<hr class="my-4 md:min-w-full" />
<!-- Heading -->
<h6
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
>
No Layout Pages
</h6>
<!-- Navigation -->
<ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
<li class="items-center">
<a
use:link
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
href="/landing"
>
<i class="fas fa-newspaper text-blueGray-300 mr-2 text-sm"></i>
Landing Page
</a>
</li>
<li class="items-center">
<a
use:link
class="text-blueGray-700 hover:text-blueGray-500 text-xs uppercase py-3 font-bold block"
href="/profile"
>
<i class="fas fa-user-circle text-blueGray-300 mr-2 text-sm"></i>
Profile Page
</a>
</li>
</ul>
<!-- Divider -->
<hr class="my-4 md:min-w-full" />
<!-- Heading -->
<h6
class="md:min-w-full text-blueGray-500 text-xs uppercase font-bold block pt-1 pb-4 no-underline"
>
Documentation
</h6>
<!-- Navigation -->
<ul class="md:flex-col md:min-w-full flex flex-col list-none md:mb-4">
<li class="inline-flex">
<a
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/colors/notus"
target="_blank"
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
>
<i class="fas fa-paint-brush mr-2 text-blueGray-300 text-base"></i>
Styles
</a>
</li>
<li class="inline-flex">
<a
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/alerts/notus"
target="_blank"
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
>
<i class="fab fa-css3-alt mr-2 text-blueGray-300 text-base"></i>
CSS Components
</a>
</li>
<li class="inline-flex">
<a
href="https://www.creative-tim.com/learning-lab/tailwind/angular/overview/notus"
target="_blank"
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
>
<i class="fab fa-angular mr-2 text-blueGray-300 text-base"></i>
Angular
</a>
</li>
<li class="inline-flex">
<a
href="https://www.creative-tim.com/learning-lab/tailwind/js/overview/notus"
target="_blank"
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
>
<i class="fab fa-js-square mr-2 text-blueGray-300 text-base"></i>
Javascript
</a>
</li>
<li class="inline-flex">
<a
href="https://www.creative-tim.com/learning-lab/tailwind/nextjs/overview/notus"
target="_blank"
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
>
<i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
NextJS
</a>
</li>
<li class="inline-flex">
<a
href="https://www.creative-tim.com/learning-lab/tailwind/react/overview/notus"
target="_blank"
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
>
<i class="fab fa-react mr-2 text-blueGray-300 text-base"></i>
React
</a>
</li>
<li class="inline-flex">
<a
href="https://www.creative-tim.com/learning-lab/tailwind/svelte/overview/notus"
target="_blank"
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
>
<i class="fas fa-link mr-2 text-blueGray-300 text-base"></i>
Svelte
</a>
</li>
<li class="inline-flex">
<a
href="https://www.creative-tim.com/learning-lab/tailwind/vue/overview/notus"
target="_blank"
class="text-blueGray-700 hover:text-blueGray-500 text-sm block mb-4 no-underline font-semibold"
>
<i class="fab fa-vuejs mr-2 text-blueGray-300 text-base"></i>
VueJS
</a>
</li>
</ul>
</div>
</div>
</nav>

16
src/components/Utils/CookieHandler.js Normal file
View File

@ -0,0 +1,16 @@
export function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}

5
src/layouts/Admin.svelte
View File

@ -18,13 +18,14 @@
import Maps from "views/admin/Maps.svelte";
export let location;
let collapseshow = '';
export let admin = "";
</script>
<div>
<Sidebar location={location}/>
<Sidebar bind:collapseshow={collapseshow} location={location}/>
<div class="relative md:ml-64 bg-blueGray-100">
<AdminNavbar />
<AdminNavbar bind:collapseshow={collapseshow} />
<GlobalHeader />
<div class="px-4 md:px-10 mx-auto w-full -m-24">
<Router url="admin">

5
src/layouts/Auth.svelte
View File

@ -22,10 +22,7 @@
class="absolute top-0 w-full h-full bg-blueGray-800 bg-no-repeat bg-full"
style="background-image: url({registerBg2});"
></div>
<Router url="auth">
<Route path="login" component="{Login}" />
<Route path="register" component="{Register}" />
</Router>
<Login />
<FooterSmall absolute="true" />
</section>
</main>

6
src/views/admin/Dashboard.svelte
View File

@ -1,6 +1,7 @@
<script>
// core components
import CardLineChart from "components/Cards/CardLineChart.svelte";
import CardWGLineChart from "components/Cards/CardWGLineChart.svelte";
import CardBarChart from "components/Cards/CardBarChart.svelte";
import CardPageVisits from "components/Cards/CardPageVisits.svelte";
import CardSocialTraffic from "components/Cards/CardSocialTraffic.svelte";
@ -11,6 +12,11 @@
<div>
<div class="flex flex-wrap">
<div class="w-full px-4">
<CardLineChart />
</div>
</div>
<div class="flex flex-wrap">
<div class="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
<CardLineChart />

99
src/views/auth/Login.svelte
View File

@ -5,6 +5,77 @@
const github = "../assets/img/github.svg";
const google = "../assets/img/google.svg";
export let location;
function login_submit(e) {
const formData = new FormData(e.target);
console.log("Submitting credentials");
console.log(formData);
const data = {};
for (let field of formData) {
const [key, value] = field;
data[key] = value
}
console.log("------------");
console.log(data['grid-email']);
console.log(data['grid-password']);
login_wg(data['grid-email'],data['grid-password']);
}
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
async function login_wg(u_name, u_pass) {
// const rawResponse = await fetch('/api2/wgLogin', {
// method: 'GET',
// headers: {
// 'Authorization': 'Basic ' + btoa(u_name+':'+u_pass),
// 'Accept': 'application/json',
// 'Content-Type': 'application/json'
// }
// });
const rawResponse = await fetch("https://wg.nnag.me/api2/wgLogin?username="+u_name+"&"+"password="+u_pass, {
"credentials": "include",
"headers": {
"Authorization": "Basic " + btoa(u_name+':'+u_pass),
"User-Agent": "Mozilla/5.0 (X11; Linux x86_64; rv:106.0) Gecko/20100101 Firefox/106.0",
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8",
"Accept-Language": "en-US,en;q=0.5",
"Upgrade-Insecure-Requests": "1",
"Sec-Fetch-Dest": "document",
"Sec-Fetch-Mode": "navigate",
"Sec-Fetch-Site": "none",
"Sec-Fetch-User": "?1"
},
"method": "GET",
"mode": "cors"
});
console.log(document.cookie);
window.location.reload(true);
}
</script>
<div class="container mx-auto px-4 h-full">
@ -16,42 +87,27 @@
<div class="rounded-t mb-0 px-6 py-6">
<div class="text-center mb-3">
<h6 class="text-blueGray-500 text-sm font-bold">
Sign in with
TIP Community Lab : Facility Dashboard
</h6>
</div>
<div class="btn-wrapper text-center">
<button
class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-2 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
type="button"
>
<img alt="..." class="w-5 mr-1" src="{github}" />
Github
</button>
<button
class="bg-white active:bg-blueGray-50 text-blueGray-700 font-normal px-4 py-2 rounded outline-none focus:outline-none mr-1 mb-1 uppercase shadow hover:shadow-md inline-flex items-center font-bold text-xs ease-linear transition-all duration-150"
type="button"
>
<img alt="..." class="w-5 mr-1" src="{google}" />
Google
</button>
</div>
<hr class="mt-6 border-b-1 border-blueGray-300" />
</div>
<div class="flex-auto px-4 lg:px-10 py-10 pt-0">
<div class="text-blueGray-400 text-center mb-3 font-bold">
<small>Or sign in with credentials</small>
</div>
<form>
<form on:submit|preventDefault={login_submit}>
<div class="relative w-full mb-3">
<label
class="block uppercase text-blueGray-600 text-xs font-bold mb-2"
for="grid-email"
>
Email
Email/Username
</label>
<input
id="grid-email"
type="email"
name="grid-email"
type="username"
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Email"
/>
@ -66,6 +122,7 @@
</label>
<input
id="grid-password"
name="grid-password"
type="password"
class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
placeholder="Password"
@ -87,7 +144,7 @@
<div class="text-center mt-6">
<button
class="bg-blueGray-800 text-white active:bg-blueGray-600 text-sm font-bold uppercase px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 w-full ease-linear transition-all duration-150"
type="button"
type="submit"
>
Sign In
</button>