oxmc/myDrive
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added more to setup webUI, also added fail safe if cannot load user when going to settings, allowing users to logout

Browse Source
This commit is contained in:
kyle hoell
2020-12-07 20:47:23 -05:00
parent ee79d60105
commit 1e28ba1951
4 changed files with 119 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SettingsPage/index.js
+23 -1
View File
@@ -85,7 +85,29 @@ class SettingsPageContainer extends React.Component {
})
}).catch((err) => {
console.log("Loading user details error", err);
console.log("Loading user details error", err);
Swal.fire({
title: 'Error loading user account',
text: 'There was an error loading your account, would you like to logout?',
icon: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, logout',
cancelButtonText: 'No'
}).then((result) => {
if (result.value) {
console.log("Confirm logout");
axios.post("/user-service/logout").then(() => {
window.location.assign(env.url);
}).catch((e) => {
window.location.assign(env.url);
})
}
})
})
}
webUISetup/index.html
+29 -1
View File
@@ -69,6 +69,9 @@
<input id="mongoURL-input" class="mongo-input" placeholder="MongoDB URL"/>
</form>
</div>
<div class="button-wrapper-mongo">
<button id="mongo-default-button" class="button-mongo">Use Local URL</button>
</div>
</div>
<div class="section-wrapper">
@@ -88,9 +91,33 @@
</div>
</div>
<div id="section-wrapper-ports" class="section-wrapper">
<div id="docker-text__wrapper">
<p id="docker-text">Use default ports? (http port: 3000, https port: 8080</p>
</div>
<div id="docker-select__wrapper">
<select id="port-select" name="port" class="docker-select">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
</div>
</div>
<div id="ports-wrapper" class="docker-hidden">
<div id="docker-text__wrapper">
<p id="docker-text">Enter ports</p>
</div>
<div id="docker-select__wrapper">
<form id="mongo-form">
<input id="http-port-input" class="mongo-input" placeholder="HTTP port"/>
<input id="https-port-input" class="mongo-input" placeholder="HTTPS port"/>
</form>
</div>
</div>
<div class="section-wrapper">
<div id="docker-text__wrapper">
<p id="docker-text">Enter The Client URL/IP Address (Must Be A Valid Link, If Using a URL Start With "https://" or "http://", Include Port With IP Address If Needed, Do Not End The URL In a Slash "/")</p>
<p id="docker-text">Enter The Client URL/IP Address (Must Be A Valid Link and Must Start With "http://" or "https://", Include Port With IP Address If Needed, Do Not End The URL In a Slash "/")</p>
</div>
<div id="docker-select__wrapper">
<form id="mongo-form">
@@ -98,6 +125,7 @@
</form>
</div>
<p id="client-input-invalid-text" class="invalid-input-text-hidden">Error: URL Cannot End In a Slash ("/")</p>
<p id="client-input-invalid-text2" class="invalid-input-text-hidden">Error: URL Must Start With "http://" or "https://"</p>
</div>
<div class="section-wrapper">
webUISetup/src/index.js
+44 -8
View File
@@ -27,11 +27,18 @@ const sendGridSelect = document.getElementById("sendgrid-select")
const sendGridWrapper = document.getElementById("sendgrid-wrapper");
const sendGridWrapper2 = document.getElementById("sendgrid-wrapper2");
const clientInvalidInputText = document.getElementById("client-input-invalid-text");
const clientInvalidInputText2 = document.getElementById("client-input-invalid-text2");
const accessTokenInput = document.getElementById("access-token-input");
const refreshTokenInput = document.getElementById("refresh-token-input")
const cookieInput = document.getElementById("cookie-input");
const secureCookieSelect = document.getElementById("secure-cookie-select");
const mongoDefaultButton = document.getElementById("mongo-default-button");
const portsSelect = document.getElementById("port-select");
const httpPortInput = document.getElementById("http-port-input");
const httpsPortInput = document.getElementById("https-port-input");
const portsWrappers = document.getElementById("ports-wrapper");
const customPortsWrapper = document.getElementById("section-wrapper-ports");
//const stripeInputEmail = document.getElementById('stripe-input-email');
dockerSelection.addEventListener("change", (e) => {
@@ -40,11 +47,14 @@ dockerSelection.addEventListener("change", (e) => {
if (docker) {
dockerHidden.className = "section-wrapper"
mainMongoURLWrapper.className = "docker-hidden"
mainMongoURLWrapper.className = "docker-hidden";
customPortsWrapper.className = "docker-hidden"
portsWrappers.className = "docker-hidden";
} else {
dockerHidden.className = "docker-hidden"
mainMongoURLWrapper.className = "section-wrapper"
dockerHiddenMongoURL.className = "docker-hidden"
customPortsWrapper.className = "section-wrapper";
}
})
@@ -117,12 +127,10 @@ sendGridSelect.addEventListener("change", () => {
clientInput.addEventListener("input", () => {
const value = clientInput.value;
console.log("value", value)
if (value && value.length !== 0) {
const lastCharacter = value[value.length - 1];
console.log("last character", lastCharacter)
if (lastCharacter === "/") {
@@ -140,6 +148,34 @@ clientInput.addEventListener("input", () => {
clientInvalidInputText.className = "invalid-input-text-hidden"
}
if (value && value.length >= 8 || value && value.length >= 7) {
const firstChactersHttp = value.substring(0, 7);
const firstChactersHttps = value.substring(0, 8);
if (firstChactersHttps !== "https://" && firstChactersHttp !== "http://") {
clientInput.className = "mongo-input input-invalid"
clientInvalidInputText2.className = "invalid-input-text"
} else {
clientInvalidInputText2.className = "invalid-input-text-hidden"
}
}
})
mongoDefaultButton.addEventListener("click", () => {
mongoURLInput.value = "mongodb://localhost:27017/mydrive-db"
})
portsSelect.addEventListener("change", () => {
const value = portsSelect.value === "no";
if (value) {
portsWrappers.className = "section-wrapper"
} else {
portsWrappers.className = "docker-hidden";
}
})
saveButton.addEventListener("click", () => {
@@ -153,8 +189,11 @@ saveButton.addEventListener("click", () => {
//if (dbSelect.value !== "fs") clientObj.DISABLE_STORAGE = true;
// Server
serverObj.HTTP_PORT = 3000;
serverObj.HTTPS_PORT = 8080;
portsSelect.value === "no" ? serverObj.HTTP_PORT = httpPortInput.value : serverObj.HTTP_PORT = 3000;
portsSelect.value === "no" ? serverObj.HTTPS_PORT = httpsPortInput.value : serverObj.HTTPS_PORT = 8080;
if (dockerSelection.value === "yes") serverObj.HTTP_PORT = 3000;
if (dockerSelection.value === "yes") serverObj.HTTPS_PORT = 8080;
serverObj.NODE_ENV = "production";
serverObj.MONGODB_URL = dockerSelection.value !== "yes" ? mongoURLInput.value :
dockerSelectionMongoURL.value !== "yes" ? mongoURLInputDocker.value : "mongodb://mongo:27017/mydrive"
@@ -188,9 +227,6 @@ saveButton.addEventListener("click", () => {
serverObj
}
console.log("data", data);
return;
axios.post("/submit", data).then((result) => {
console.log("Submitted");
webUISetup/src/styles.css
+23 -1
View File
@@ -87,7 +87,7 @@ html {
/* width: 77%; */
/* max-width: 50vw; */
font-weight: 300;
text-transform: capitalize;
/* text-transform: capitalize; */
font-size: 17px;
text-align: center;
max-width: 78%;
@@ -198,6 +198,16 @@ html {
margin: 30px;
}
.button-wrapper-mongo {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 30px;
margin-bottom: 0px;
}
.button {
color: #fff;
background: #3c85ed;
@@ -208,4 +218,16 @@ html {
text-decoration: none;
line-height: 1;
border-radius: 2px;
}
.button-mongo {
color: #fff;
background: #3c85ed;
font-size: 16px;
padding: 9px;
border: none;
display: inline-block;
text-decoration: none;
line-height: 1;
border-radius: 2px;
}