Skip to content

Commit

Permalink
added more to setup webUI, also added fail safe if cannot load user w…
Browse files Browse the repository at this point in the history 
…hen going to settings, allowing users to logout
  • Loading branch information
@subnub
subnub committed Dec 8, 2020
1 parent ee79d60 commit 1e28ba1
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 11 deletions.
24 changes: 23 additions & 1 deletion src/components/SettingsPage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
})
}

})
})

}
Expand Down
30 changes: 29 additions & 1 deletion webUISetup/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -88,16 +91,41 @@
</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">
<input id="client-input" class="mongo-input" placeholder="Client URL"/>
</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">
Expand Down
52 changes: 44 additions & 8 deletions webUISetup/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand All @@ -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";
}
})

Expand Down Expand Up @@ -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 === "/") {

Expand All @@ -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", () => {
Expand All @@ -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"
Expand Down Expand Up @@ -188,9 +227,6 @@ saveButton.addEventListener("click", () => {
serverObj
}

console.log("data", data);
return;

axios.post("/submit", data).then((result) => {
console.log("Submitted");

Expand Down
24 changes: 23 additions & 1 deletion webUISetup/src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
}

0 comments on commit 1e28ba1

Please sign in to comment.