Skip to content

Commit 1e0af58

Browse files
paulotrutapaulotruta
committed
Added cloud dash pages and some improvements
1 parent e6b036c commit 1e0af58

8 files changed

+550
-7
lines changed

‎bun.lockb

367 Bytes
Binary file not shown.

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dependencies": {
1313
"@astrojs/svelte": "^4.0.3",
1414
"astro": "^3.2.3",
15-
"svelte": "^4.2.0"
15+
"svelte": "^4.2.0",
16+
"pocketbase": "0.19.0"
1617
}
1718
}

‎src/components/Footer.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ let year = new Date().getFullYear()
3333
<div class="row">
3434
<div class="col-8 mx-auto text-center mt-1">
3535
<p class="mb-0 text-secondary">
36-
Copyright © {year} Edgebox by MeAll.
36+
© {year} Edgebox by MeAll. <br>Made with ❤️ for a more private web.
3737
</p>
3838
</div>
3939
</div>

‎src/components/Navigation.astro

+1-4
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,9 @@ import Button from '../components/generic/Button.astro'
7676
</div>
7777
Cloud Early Access
7878
</div>
79-
<a target="_blank" href="https://adm-appsmith.edgebox.io/app/edgebox-cloud-early-access-dashboard/page1-6554db43cc32290d70bb8423?embed=true" class="dropdown-item border-radius-md">
79+
<a target="" href="/cloud/login" class="dropdown-item border-radius-md">
8080
<span class="ps-3">Dashboard</span>
8181
</a>
82-
<a target="_blank" href="https://adm-appsmith.edgebox.io/app/edgebox-cloud-early-access/signup-6553e5b5cc32290d70bb83e8?embed=true" class="dropdown-item border-radius-md">
83-
<span class="ps-3">Register</span>
84-
</a>
8582
</div>
8683
<div class="d-lg-none">
8784
<div class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center px-0">

‎src/pages/cloud/dash.astro

+289
Large diffs are not rendered by default.

‎src/pages/early-access-terms-of-service.astro ‎src/pages/cloud/early-access-terms-of-service.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
// Layout Imports
3-
import BaseLayout from '../layouts/BaseLayout.astro';
3+
import BaseLayout from '../../layouts/BaseLayout.astro';
44
55
---
66
<BaseLayout title="Edgebox">

‎src/pages/cloud/early-access.astro

+152
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
---
2+
// Layout Imports
3+
import BaseLayout from '../../layouts/BaseLayout.astro';
4+
5+
---
6+
<BaseLayout title="Edgebox">
7+
<div slot="content">
8+
<section class="">
9+
<div class="page-header min-vh-85">
10+
<div>
11+
<img class="position-absolute fixed-top ms-auto w-50 h-100 z-index-0 d-none d-sm-none d-md-block border-radius-section border-top-end-radius-0 border-top-start-radius-0 border-bottom-end-radius-0" src="/img/curved-images/curved6.jpg" alt="image">
12+
</div>
13+
<div class="container">
14+
<div class="row">
15+
<div class="col-lg-7 d-flex justify-content-center flex-column">
16+
<div id="warning-container" class="mt-10 bg-gradient-warning text-center py-3 text-white border-radius-xl" style="display: none;"><b>A problem occured. Verify the form data and try again.</b></div>
17+
<!-- <div class="mt-10 bg-gradient-success text-center py-3 text-white border-radius-sm mb-2"><b>Account created!</b>></div> -->
18+
<div class="card d-flex blur justify-content-center p-4 shadow-lg my-sm-0 my-sm-6 mt-8 mb-5">
19+
<div class="text-center">
20+
<h3 class="text-gradient text-primary">Cloud Early Access</h3>
21+
<p class="mb-0">
22+
We are onboarding supporters who can help us test out project for a limited period of time. <b>Interested in being part?</b> Fill out the form below and we'll get in contact soon 😉
23+
</p>
24+
</div>
25+
<form id="signup-form" method="post" autocomplete="off">
26+
<div class="card-body pb-2">
27+
<div class="row">
28+
<div class="col-md-6">
29+
<label>Name</label>
30+
<div class="input-group mb-4">
31+
<input class="form-control" id="name" name="name" placeholder="First & Last name" aria-label="Full Name" type="text" required>
32+
</div>
33+
</div>
34+
<div class="col-md-6 ps-md-2">
35+
<label>Email</label>
36+
<div class="input-group">
37+
<input type="email" id="email" name="email" class="form-control" placeholder="[email protected]" required>
38+
</div>
39+
</div>
40+
</div>
41+
<div class="row">
42+
<div class="col">
43+
<label>Username</label>
44+
<div class="input-group mb-4">
45+
<input name="username" id="username" class="form-control" placeholder="Username to identify you on the edgebox.io platform" aria-label="Username to identify you on the edgebox.io platform" type="text" required>
46+
</div>
47+
</div>
48+
</div>
49+
<div class="row">
50+
<div class="col-md-6">
51+
<div class="form-group mb-0 mt-md-0 mt-4">
52+
<label>Account Password:</label>
53+
<input type="password" name="password" class="form-control" id="password" placeholder="This will be your cloud dashboard password access" required></input>
54+
</div>
55+
</div>
56+
<div class="col-md-6 ps-md-2">
57+
<div class="form-group mb-0 mt-md-0 mt-4">
58+
<label>Password confirmation:</label>
59+
<input type="password" name="passwordConfirm" class="form-control" id="passwordConfirm" placeholder="Type the same password, just to be sure ;)" required></input>
60+
</div>
61+
</div>
62+
</div>
63+
<br>
64+
<!-- <div class="form-group mb-0 mt-md-0 mt-4">
65+
<label>How do you intend to use Edgebox? What does interest you the most?</label>
66+
<textarea name="message" class="form-control" id="message" rows="6" placeholder="Describe how you plan to test edgebox throughout the test phase. If you have any specific ideas of what you want to achieve, let us know!"></textarea>
67+
</div> -->
68+
<div class="row">
69+
<div class="col-md-12 text-center">
70+
<button type="submit" class="btn bg-gradient-primary mt-3 mb-0">Apply for early access</button>
71+
</div>
72+
</div>
73+
</div>
74+
</form>
75+
<div class="text-center">
76+
<p class="text-sm">
77+
Already have an account?
78+
<a href="/cloud/login" class="text-primary text-gradient font-weight-bold">Login here</a>
79+
</p>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
</section>
87+
</div>
88+
</BaseLayout>
89+
90+
<script>
91+
92+
// If user is logged in, redirect to dashboard
93+
// Import and start PocketBase
94+
import PocketBase from 'pocketbase'
95+
const pb = new PocketBase('https://adm-pocketbase.edgebox.io');
96+
97+
// Check if user is logged in, if so redirect to dashboard
98+
if( pb.authStore.isValid ) {
99+
window.location.href = '/cloud/dash';
100+
} else {
101+
console.log('User is not logged in');
102+
}
103+
104+
// When form is submitted, send data to the server
105+
document.getElementById("signup-form").addEventListener("submit", function(e) {
106+
e.preventDefault();
107+
var form = document.getElementById("signup-form");
108+
var formData = new FormData(form);
109+
var formObject = {};
110+
formData.forEach(function(value, key){
111+
formObject[key] = value;
112+
});
113+
console.log("Object: ")
114+
console.log(formObject)
115+
116+
// example create data
117+
const extraData = {
118+
"emailVisibility": true,
119+
};
120+
121+
// merge formObject with extraData
122+
const data = Object.assign(formObject, extraData)
123+
124+
// Create user
125+
pb.collection('users').create(data).then((res) => {
126+
console.log(res);
127+
if(res.status == 200 || res.id != null || res.id != undefined || res.id != "") {
128+
// Redirect to dashboard
129+
pb.collection('users').requestVerification(res.email).then((confirmRes) => {
130+
console.log("Sent verification email")
131+
console.log(confirmRes);
132+
}).catch((err) => {
133+
console.log("Error sending verification email")
134+
console.log(err);
135+
});
136+
window.location.href = '/cloud/dash?signup=true';
137+
} else {
138+
// Show error message
139+
var warningContainer = document.getElementById("warning-container")
140+
warningContainer.innerHTML = "<b>" + res.message + " Please verify the data and try again.</b>";
141+
warningContainer.style.display = "block";
142+
}
143+
}).catch((err) => {
144+
console.log(err);
145+
// Show error message
146+
var warningContainer = document.getElementById("warning-container")
147+
warningContainer.innerHTML = "<b>" + err.message + " Please verify the data and try again.</b>";
148+
warningContainer.style.display = "block";
149+
});
150+
});
151+
152+
</script>

‎src/pages/cloud/login.astro

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
---
2+
// Layout Imports
3+
import BaseLayout from '../../layouts/BaseLayout.astro';
4+
5+
---
6+
<BaseLayout title="Edgebox">
7+
<div slot="content">
8+
<section class="">
9+
<div class="page-header min-vh-100">
10+
<div class="container">
11+
<div class="row">
12+
<div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
13+
<div id="error-container" class="bg-gradient-danger text-center py-3 text-white border-radius-md" style="display: none;"><b>There was a problem. Please try again.</b></div>
14+
<div class="card card-plain">
15+
<div class="card-header pb-0 text-left">
16+
<h4 class="font-weight-bolder">Sign In</h4>
17+
<p class="mb-0">Enter your edgebox.io account details to sign in</p>
18+
</div>
19+
<div class="card-body">
20+
<form role="form">
21+
<div class="mb-3">
22+
<input type="email" class="form-control form-control-lg" placeholder="Email" aria-label="Email" aria-describedby="email-addon">
23+
</div>
24+
<div class="mb-3">
25+
<input type="password" class="form-control form-control-lg" placeholder="Password" aria-label="Password" aria-describedby="password-addon">
26+
</div>
27+
<!-- <div class="form-check form-switch">
28+
<input class="form-check-input" type="checkbox" id="rememberMe">
29+
<label class="form-check-label" for="rememberMe">Remember me</label>
30+
</div> -->
31+
<div class="text-center">
32+
<button type="submit" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Sign in</button>
33+
</div>
34+
</form>
35+
</div>
36+
<div class="card-footer text-center pt-0 px-lg-2 px-1">
37+
<p class="mb-4 text-sm mx-auto">
38+
Looking for early access?
39+
<a href="/cloud/early-access" class="text-primary text-gradient font-weight-bold">Apply here</a>
40+
</p>
41+
</div>
42+
</div>
43+
</div>
44+
<div class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
45+
<div class="position-relative bg-gradient-secondary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center">
46+
<img src="/img/shapes/pattern-lines.svg" alt="pattern-lines" class="position-absolute opacity-4 start-0">
47+
<div class="position-relative">
48+
<img class="max-width-500 w-100 position-relative z-index-2" src="/img/illustrations/sign-up.png">
49+
</div>
50+
<h4 class="mt-5 text-white font-weight-bolder">"So many things need privacy"</h4>
51+
<p class="text-white">Run your private cloud services and back them up effortlessly</p>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</section>
58+
</div>
59+
</BaseLayout>
60+
61+
<script>
62+
63+
// Import and start PocketBase
64+
import PocketBase from 'pocketbase'
65+
const pb = new PocketBase('https://adm-pocketbase.edgebox.io');
66+
67+
// Check if user is logged in, if so redirect to dashboard
68+
if( pb.authStore.isValid ) {
69+
window.location.href = '/cloud/dash';
70+
} else {
71+
console.log('User is not logged in');
72+
}
73+
74+
// When form is submitted, send data to the server
75+
document.querySelector('form').addEventListener('submit', (e) => {
76+
e.preventDefault();
77+
78+
// Get form data
79+
const email = document.querySelector('input[type="email"]').value;
80+
const password = document.querySelector('input[type="password"]').value;
81+
82+
const authData = pb.collection('users').authWithPassword(
83+
email,
84+
password,
85+
);
86+
87+
console.log(authData);
88+
89+
authData.then((res) => {
90+
var errorContainer = document.getElementById('error-container')
91+
errorContainer.style.display = 'none'
92+
console.log(res)
93+
window.location.href = '/cloud/dash'
94+
}).catch((err) => {
95+
console.log(err);
96+
var errorContainer = document.getElementById('error-container')
97+
errorContainer.innerHTML = err.message
98+
errorContainer.style.display = 'block'
99+
});
100+
101+
});
102+
103+
104+
</script>

0 commit comments

Comments
 (0)