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

fixed classnames

Browse Source
This commit is contained in:
subnub
2024-06-23 19:20:43 -04:00
parent a425e5be6d
commit 5bf8ebd480
19 changed files with 1407 additions and 1213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AddStorageItem/AddStorageItem.jsx
+14 -17
View File
@@ -3,7 +3,7 @@ import bytes from "bytes";
const AddStorageItem = (props) => (
<div
class={
className={
!props.loaded
? "elem__storage"
: props.userDetails.activeSubscription &&
@@ -12,13 +12,13 @@ const AddStorageItem = (props) => (
: "elem__storage"
}
>
<div class="head__storage">
<div class="info__storage">
<div className="head__storage">
<div className="info__storage">
<p>
{bytes(+props.plan.metadata.amount)} -{" "}
{props.plan.interval_count} {props.plan.interval}(s)
{bytes(+props.plan.metadata.amount)} - {props.plan.interval_count}{" "}
{props.plan.interval}(s)
</p>
<span class="status__text">
<span className="status__text">
{"$" + parseInt(props.plan.amount, 10) / 100}
</span>
</div>
@@ -31,7 +31,7 @@ const AddStorageItem = (props) => (
? { display: "block" }
: { display: "none" }
}
class="success__storage"
className="success__storage"
>
<img src="/assets/checked.svg" alt="checked" />
</div>
@@ -44,19 +44,19 @@ const AddStorageItem = (props) => (
? { display: "none" }
: {}
}
class="add__storage"
className="add__storage"
>
<a onClick={props.openDetails}>Details</a>
</div>
</div>
<div
class="storage__main"
className="storage__main"
style={props.state.open ? { display: "block" } : { display: "none" }}
>
<p>
Subscribe to myDrive, {bytes(+props.plan.metadata.amount)} of
data for {"$" + parseInt(props.plan.amount, 10) / 100}, reoccuring
every {props.plan.interval_count} {props.plan.interval}(s).
Subscribe to myDrive, {bytes(+props.plan.metadata.amount)} of data for{" "}
{"$" + parseInt(props.plan.amount, 10) / 100}, reoccuring every{" "}
{props.plan.interval_count} {props.plan.interval}(s).
</p>
<div
style={{
@@ -65,13 +65,10 @@ const AddStorageItem = (props) => (
alignItems: "center",
}}
>
<button onClick={() => props.selectPlan(props.plan)}>
Subscribe
</button>
<button onClick={() => props.selectPlan(props.plan)}>Subscribe</button>
</div>
</div>
</div>
);
export default AddStorageItem;
export default AddStorageItem;
src/components/AddStoragePage/AddStoragePage.jsx
+122 -60
View File
@@ -3,68 +3,130 @@ import SpinnerLogin from "../SpinnerLogin";
import AddStorageItem from "../AddStorageItem";
const AddStoragePage = (props) => (
<div>
<div className="storage__back">
<div class="storage__block">
<div class="inner__storage">
<div class="login__logo">
<img src="/images/icon.png" alt="logo"/>
</div>
<div class="storage__main">
<h2>Select Storage Plan</h2>
<div class="wrap__storage--elements">
{props.state.storagePlans.map((currentPlan) => <AddStorageItem selectPlan={props.selectPlan} plan={currentPlan} loaded={props.state.loaded} userDetails={props.state.userDetails}/>)}
</div>
</div>
{!props.state.loaded ? undefined : props.state.userDetails.activeSubscription ?
<div className="add-storage-card__button-wrapper">
<button className="storage-item__button" onClick={props.removeSubscription}>Remove Subscription</button>
</div> : undefined}
</div>
<div>
<div className="storage__back">
<div className="storage__block">
<div className="inner__storage">
<div className="login__logo">
<img src="/images/icon.png" alt="logo" />
</div>
<div className="storage__main">
<h2>Select Storage Plan</h2>
<div className="wrap__storage--elements">
{props.state.storagePlans.map((currentPlan) => (
<AddStorageItem
selectPlan={props.selectPlan}
plan={currentPlan}
loaded={props.state.loaded}
userDetails={props.state.userDetails}
/>
))}
</div>
</div>
<div class="modal__wrap" style={props.state.showCreditCard ? {display:"block"} : {display:"none"}}>
<div class="inner__modal">
<div class="password__modal">
<div class="head__password">
<h2>Subscribe - {'$' + parseInt(props.state.selectedDetails.amount, 10) / 100} / {props.state.selectedDetails.interval_count} {props.state.selectedDetails.interval}(s)</h2>
<div class="close__modal">
<a onClick={props.selectPlan}><img src="/assets/close.svg" alt="close"/></a>
</div>
</div>
<div class="password__content">
<form onSubmit={props.pay}>
<div class="group__password" style={props.state.creditCardNumberError ? {border:'2px solid red'} : {}}>
<input value={props.state.creditCardNumber} onChange={props.onChangeCreditCardNumber} placeholder="Credit Card Number"/>
</div>
<div class="group__password" style={props.state.creditCardExpiryError ? {border:'2px solid red'} : {}}>
<input value={props.state.creditCardExpiry} onChange={props.onChangeCreditCardExpiry} placeholder="(MM/YY) Expiration Date"/>
</div>
<div class="group__password" style={props.state.creditCardCVCError ? {border:'2px solid red'} : {}}>
<input value={props.state.creditCardCVC} onChange={props.onChangeCreditCardCVC} placeholder="Credit Card CVC"/>
</div>
<div class="password__submit">
<input type="submit" value="Submit"/>
</div>
</form>
</div>
<div style={props.state.paymentLoading ? {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "61px",
paddingBottom: "23px"
} : {display: "none"}}>
<SpinnerLogin />
</div>
</div>
</div>
{!props.state.loaded ? undefined : props.state.userDetails
.activeSubscription ? (
<div className="add-storage-card__button-wrapper">
<button
className="storage-item__button"
onClick={props.removeSubscription}
>
Remove Subscription
</button>
</div>
) : undefined}
</div>
</div>
</div>
)
export default AddStoragePage;
<div
className="modal__wrap"
style={
props.state.showCreditCard ? { display: "block" } : { display: "none" }
}
>
<div className="inner__modal">
<div className="password__modal">
<div className="head__password">
<h2>
Subscribe -{" "}
{"$" + parseInt(props.state.selectedDetails.amount, 10) / 100} /{" "}
{props.state.selectedDetails.interval_count}{" "}
{props.state.selectedDetails.interval}(s)
</h2>
<div className="close__modal">
<a onClick={props.selectPlan}>
<img src="/assets/close.svg" alt="close" />
</a>
</div>
</div>
<div className="password__content">
<form onSubmit={props.pay}>
<div
className="group__password"
style={
props.state.creditCardNumberError
? { border: "2px solid red" }
: {}
}
>
<input
value={props.state.creditCardNumber}
onChange={props.onChangeCreditCardNumber}
placeholder="Credit Card Number"
/>
</div>
<div
className="group__password"
style={
props.state.creditCardExpiryError
? { border: "2px solid red" }
: {}
}
>
<input
value={props.state.creditCardExpiry}
onChange={props.onChangeCreditCardExpiry}
placeholder="(MM/YY) Expiration Date"
/>
</div>
<div
className="group__password"
style={
props.state.creditCardCVCError
? { border: "2px solid red" }
: {}
}
>
<input
value={props.state.creditCardCVC}
onChange={props.onChangeCreditCardCVC}
placeholder="Credit Card CVC"
/>
</div>
<div className="password__submit">
<input type="submit" value="Submit" />
</div>
</form>
</div>
<div
style={
props.state.paymentLoading
? {
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "61px",
paddingBottom: "23px",
}
: { display: "none" }
}
>
<SpinnerLogin />
</div>
</div>
</div>
</div>
</div>
);
export default AddStoragePage;
src/components/AddStoragePage/index.jsx
+409 -425
View File
@@ -1,475 +1,459 @@
import React from "react";
import axios from "../../axiosInterceptor";
import Swal from "sweetalert2"
import Swal from "sweetalert2";
import env from "../../enviroment/envFrontEnd";
import AddStoragePage from "./AddStoragePage";
class AddStoragePageContainer extends React.Component {
constructor(props) {
super(props);
constructor(props) {
super(props);
this.state = {
storagePlans: [],
loaded: false,
planSelected: false,
selectedDetails: {},
creditCardNumber: "",
creditCardCVC: "",
creditCardExpiry: "",
creditCardNumberError: false,
creditCardExpiryError: false,
creditCardCVCError: false,
userDetails: {},
loaded: false,
showCreditCard: false,
paymentLoading: false,
}
}
getUserDetails = () => {
axios.get("/user-service/user-detailed").then((response) => {
this.setState(() => {
return {
...this.state,
loaded: true,
userDetails: response.data
}
})
}).catch((err) => {
console.log("Loading user details error", err);
})
}
componentDidMount = () => {
this.getUserDetails();
axios.get("/user-service/get-plans").then((response) => {
this.setState(() => {
return {
...this.state,
storagePlans: response.data.data,
loaded: true
}
})
}).catch((err) => {
console.log("get plans error");
})
}
selectPlan = (plan) => {
if (this.state.planSelected) {
return this.setState(() => {
return {
...this.state,
planSelected: false,
selectedDetails: {},
showCreditCard: false
}
})
} else {
this.setState(() => {
return {
...this.state,
planSelected: true,
selectedDetails: plan,
showCreditCard: true
}
})
}
}
onChangeCreditCardNumber = (e) => {
let value = e.target.value
if (value.length < this.state.creditCardNumber.length) {
return this.setState(() => {
return {
...this.state,
creditCardNumber: value,
creditCardNumberError: false
}
})
}
const numericalValue = value.replace(/[^0-9.]/g,"")
let reconstucted = '';
for (let currentChar of numericalValue) {
reconstucted += currentChar;
const numericalOnly = reconstucted.replace(/[^0-9.]/g,"")
if (numericalOnly.length !== 16 && numericalOnly.length % 4 === 0) {
reconstucted += '-'
} else if (numericalOnly.length >= 16) {
break;
}
}
this.state = {
storagePlans: [],
loaded: false,
planSelected: false,
selectedDetails: {},
creditCardNumber: "",
creditCardCVC: "",
creditCardExpiry: "",
creditCardNumberError: false,
creditCardExpiryError: false,
creditCardCVCError: false,
userDetails: {},
loaded: false,
showCreditCard: false,
paymentLoading: false,
};
}
getUserDetails = () => {
axios
.get("/user-service/user-detailed")
.then((response) => {
this.setState(() => {
return {
...this.state,
creditCardNumber: reconstucted,
creditCardNumberError: false
}
})
}
return {
...this.state,
loaded: true,
userDetails: response.data,
};
});
})
.catch((err) => {
console.log("Loading user details error", err);
});
};
onChangeCreditCardCVC = (e) => {
let value = e.target.value
value = value.replace(/[^0-9.]/g,"");
if (value.length >= 4) {
return;
}
componentDidMount = () => {
this.getUserDetails();
axios
.get("/user-service/get-plans")
.then((response) => {
this.setState(() => {
return {
...this.state,
creditCardCVC: value,
creditCardCVCError: false
}
})
return {
...this.state,
storagePlans: response.data.data,
loaded: true,
};
});
})
.catch((err) => {
console.log("get plans error");
});
};
selectPlan = (plan) => {
if (this.state.planSelected) {
return this.setState(() => {
return {
...this.state,
planSelected: false,
selectedDetails: {},
showCreditCard: false,
};
});
} else {
this.setState(() => {
return {
...this.state,
planSelected: true,
selectedDetails: plan,
showCreditCard: true,
};
});
}
};
onChangeCreditCardNumber = (e) => {
let value = e.target.value;
if (value.length < this.state.creditCardNumber.length) {
return this.setState(() => {
return {
...this.state,
creditCardNumber: value,
creditCardNumberError: false,
};
});
}
onChangeCreditCardExpiry = (e) => {
const numericalValue = value.replace(/[^0-9.]/g, "");
let value = e.target.value
let reconstucted = "";
if (value.length < this.state.creditCardExpiry.length) {
return this.setState(() => {
return {
...this.state,
creditCardExpiry: value,
creditCardExpiryError: false,
}
})
}
for (let currentChar of numericalValue) {
reconstucted += currentChar;
const numericalValue = value.replace(/[^0-9.]/g,"")
const numericalOnly = reconstucted.replace(/[^0-9.]/g, "");
let reconstucted = ''
if (numericalOnly.length !== 16 && numericalOnly.length % 4 === 0) {
reconstucted += "-";
} else if (numericalOnly.length >= 16) {
break;
}
}
for (let currentChar of numericalValue) {
reconstucted += currentChar;
this.setState(() => {
return {
...this.state,
creditCardNumber: reconstucted,
creditCardNumberError: false,
};
});
};
const numericalOnly = reconstucted.replace(/[^0-9.]/g,"")
onChangeCreditCardCVC = (e) => {
let value = e.target.value;
if (numericalOnly.length === 2) {
reconstucted += '/'
} else if (numericalOnly.length >= 4) {
break;
}
}
value = value.replace(/[^0-9.]/g, "");
if (value.length >= 4) {
return;
}
this.setState(() => {
return {
...this.state,
creditCardCVC: value,
creditCardCVCError: false,
};
});
};
onChangeCreditCardExpiry = (e) => {
let value = e.target.value;
if (value.length < this.state.creditCardExpiry.length) {
return this.setState(() => {
return {
...this.state,
creditCardExpiry: value,
creditCardExpiryError: false,
};
});
}
const numericalValue = value.replace(/[^0-9.]/g, "");
let reconstucted = "";
for (let currentChar of numericalValue) {
reconstucted += currentChar;
const numericalOnly = reconstucted.replace(/[^0-9.]/g, "");
if (numericalOnly.length === 2) {
reconstucted += "/";
} else if (numericalOnly.length >= 4) {
break;
}
}
this.setState(() => {
return {
...this.state,
creditCardExpiry: reconstucted,
creditCardExpiryError: false,
};
});
};
pay = (e) => {
e.preventDefault();
if (this.state.paymentLoading) {
return;
}
const creditCardNumber = this.state.creditCardNumber;
const creditCardCVC = this.state.creditCardCVC;
const creditCardExpiry = this.state.creditCardExpiry;
let ccNumError = false;
let ccCVCError = false;
let ccExpiryError = false;
if (creditCardNumber.replace(/[^0-9.]/g, "").length !== 16) {
ccNumError = true;
}
if (creditCardCVC.replace(/[^0-9.]/g, "").length !== 3) {
ccCVCError = true;
}
if (creditCardExpiry.replace(/[^0-9.]/g, "").length !== 4) {
ccExpiryError = true;
}
if (ccNumError || ccCVCError || ccExpiryError) {
return this.setState(() => {
return {
...this.state,
creditCardNumberError: ccNumError,
creditCardExpiryError: ccExpiryError,
creditCardCVCError: ccCVCError,
};
});
}
const data = {
card: {
number: creditCardNumber,
expiry: creditCardExpiry,
cvc: creditCardCVC,
id: this.state.selectedDetails.id,
},
};
Swal.fire({
title: "Confirm Payment",
text: `Confirm ${
"$" + parseInt(this.state.selectedDetails.amount, 10) / 100
} payment`,
icon: "info",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Pay",
}).then((result) => {
if (result.value) {
this.setState(() => {
return {
return {
...this.state,
paymentLoading: true,
};
});
axios
.post("/user-service/create-subscription", data)
.then((response) => {
this.setState(() => {
return {
...this.state,
creditCardExpiry: reconstucted,
creditCardExpiryError: false,
}
})
}
paymentLoading: false,
};
});
pay = (e) => {
e.preventDefault();
if (this.state.paymentLoading) {
return;
}
const creditCardNumber = this.state.creditCardNumber;
const creditCardCVC = this.state.creditCardCVC;
const creditCardExpiry = this.state.creditCardExpiry;
let ccNumError = false;
let ccCVCError = false;
let ccExpiryError = false;
if (creditCardNumber.replace(/[^0-9.]/g,"").length !== 16) {
ccNumError = true;
}
if (creditCardCVC.replace(/[^0-9.]/g,"").length !== 3) {
ccCVCError = true
}
if (creditCardExpiry.replace(/[^0-9.]/g,"").length !== 4) {
ccExpiryError = true;
}
if (ccNumError || ccCVCError || ccExpiryError) {
return this.setState(() => {
return {
...this.state,
creditCardNumberError: ccNumError,
creditCardExpiryError: ccExpiryError,
creditCardCVCError: ccCVCError
}
})
}
const data = {
card: {
number: creditCardNumber,
expiry: creditCardExpiry,
cvc: creditCardCVC,
id: this.state.selectedDetails.id
}
}
Swal.fire({
title: 'Confirm Payment',
text: `Confirm ${'$' + parseInt(this.state.selectedDetails.amount, 10) / 100} payment`,
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Pay'
}).then((result) => {
if (result.value) {
this.setState(() => {
return {
...this.state,
paymentLoading: true
}
})
axios.post("/user-service/create-subscription", data).then((response) => {
this.setState(() => {
return {
...this.state,
paymentLoading: false
}
})
Swal.fire(
'Payment Successful',
'Thank You! Payment Was Successful',
'success'
).then(() => {
window.location.assign(env.url)
})
}).catch((e) => {
console.log("create stripe token err", e);
this.setState(() => {
return {
...this.state,
paymentLoading: false
}
})
Swal.fire({
icon: 'error',
title: 'Payment Error',
text: 'Could Not Process Payment',
})
})
}
Swal.fire(
"Payment Successful",
"Thank You! Payment Was Successful",
"success"
).then(() => {
window.location.assign(env.url);
});
})
}
.catch((e) => {
console.log("create stripe token err", e);
this.setState(() => {
return {
...this.state,
paymentLoading: false,
};
});
Swal.fire({
icon: "error",
title: "Payment Error",
text: "Could Not Process Payment",
});
});
}
});
};
removeSubscription = () => {
Swal.fire({
title: 'Remove Subscription?',
text: "This will remove all myDrive files",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, cancel subscription'
}).then((result) => {
if (result.value) {
axios.delete('/user-service/remove-subscription').then((response) => {
Swal.fire(
'Subscription Removed',
'Your subscription for myDrive has been canceled.',
'success'
).then(() => {
window.location.assign(env.url)
})
}).catch((err) => {
console.log("could not remove subscription", err);
Swal.fire({
icon: 'error',
title: 'Remove Subscription Error',
text: 'Could Not Renive Subscription',
})
})
}
removeSubscription = () => {
Swal.fire({
title: "Remove Subscription?",
text: "This will remove all myDrive files",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, cancel subscription",
}).then((result) => {
if (result.value) {
axios
.delete("/user-service/remove-subscription")
.then((response) => {
Swal.fire(
"Subscription Removed",
"Your subscription for myDrive has been canceled.",
"success"
).then(() => {
window.location.assign(env.url);
});
})
}
.catch((err) => {
console.log("could not remove subscription", err);
Swal.fire({
icon: "error",
title: "Remove Subscription Error",
text: "Could Not Renive Subscription",
});
});
}
});
};
render() {
render() {
return (
<AddStoragePage
removeSubscription={this.removeSubscription}
pay={this.pay}
onChangeCreditCardExpiry={this.onChangeCreditCardExpiry}
onChangeCreditCardCVC={this.onChangeCreditCardCVC}
onChangeCreditCardNumber={this.onChangeCreditCardNumber}
selectPlan={this.selectPlan}
getUserDetails={this.getUserDetails}
state={this.state}
{...this.props}
/>
// <div>
return (
// <div className="storage__back">
<AddStoragePage
removeSubscription={this.removeSubscription}
pay={this.pay}
onChangeCreditCardExpiry={this.onChangeCreditCardExpiry}
onChangeCreditCardCVC={this.onChangeCreditCardCVC}
onChangeCreditCardNumber={this.onChangeCreditCardNumber}
selectPlan={this.selectPlan}
getUserDetails={this.getUserDetails}
state={this.state}
{...this.props}/>
// <div>
// <div className="storage__block">
// <div className="inner__storage">
// <div className="login__logo">
// <img src="/images/icon.png" alt="logo"/>
// </div>
// <div className="storage__main">
// <h2>Select Storage Plan</h2>
// <div className="wrap__storage--elements">
// {this.state.storagePlans.map((currentPlan) => <AddStorageItem selectPlan={this.selectPlan} plan={currentPlan} loaded={this.state.loaded} userDetails={this.state.userDetails}/>)}
// </div>
// </div>
// {!this.state.loaded ? undefined : this.state.userDetails.activeSubscription ?
// <div className="add-storage-card__button-wrapper">
// <button className="storage-item__button" onClick={this.removeSubscription}>Remove Subscription</button>
// </div> : undefined}
// </div>
// </div>
// </div>
// <div className="storage__back">
// <div className="modal__wrap" style={this.state.showCreditCard ? {display:"block"} : {display:"none"}}>
// <div className="inner__modal">
// <div className="password__modal">
// <div className="head__password">
// <h2>Subscribe - {'$' + parseInt(this.state.selectedDetails.amount, 10) / 100} / {this.state.selectedDetails.interval_count} {this.state.selectedDetails.interval}(s)</h2>
// <div className="close__modal">
// <a onClick={this.selectPlan}><img src="/assets/close.svg" alt="close"/></a>
// </div>
// </div>
// <div className="password__content">
// <form onSubmit={this.pay}>
// <div className="group__password" style={this.state.creditCardNumberError ? {border:'2px solid red'} : {}}>
// <input value={this.state.creditCardNumber} onChange={this.onChangeCreditCardNumber} placeholder="Credit Card Number"/>
// </div>
// <div className="group__password" style={this.state.creditCardExpiryError ? {border:'2px solid red'} : {}}>
// <input value={this.state.creditCardExpiry} onChange={this.onChangeCreditCardExpiry} placeholder="(MM/YY) Expiration Date"/>
// </div>
// <div className="group__password" style={this.state.creditCardCVCError ? {border:'2px solid red'} : {}}>
// <input value={this.state.creditCardCVC} onChange={this.onChangeCreditCardCVC} placeholder="Credit Card CVC"/>
// </div>
// <div className="password__submit">
// <input type="submit" value="Submit"/>
// </div>
// </form>
// </div>
// <div style={this.state.paymentLoading ? {
// display: "flex",
// justifyContent: "center",
// alignItems: "center",
// height: "61px",
// paddingBottom: "23px"
// } : {display: "none"}}>
// <SpinnerLogin />
// </div>
// </div>
// </div>
// </div>
// <div class="storage__block">
// <div class="inner__storage">
// <div class="login__logo">
// <img src="/images/icon.png" alt="logo"/>
// </div>
// <div class="storage__main">
// <h2>Select Storage Plan</h2>
// <div class="wrap__storage--elements">
// {this.state.storagePlans.map((currentPlan) => <AddStorageItem selectPlan={this.selectPlan} plan={currentPlan} loaded={this.state.loaded} userDetails={this.state.userDetails}/>)}
// </div>
// </div>
// {!this.state.loaded ? undefined : this.state.userDetails.activeSubscription ?
// <div className="add-storage-card__button-wrapper">
// <button className="storage-item__button" onClick={this.removeSubscription}>Remove Subscription</button>
// </div> : undefined}
// </div>
// </div>
// </div>
// {/* {!this.state.planSelected ?
// <div class="modal__wrap" style={this.state.showCreditCard ? {display:"block"} : {display:"none"}}>
// <div class="inner__modal">
// <div class="password__modal">
// <div class="head__password">
// <h2>Subscribe - {'$' + parseInt(this.state.selectedDetails.amount, 10) / 100} / {this.state.selectedDetails.interval_count} {this.state.selectedDetails.interval}(s)</h2>
// <div class="close__modal">
// <a onClick={this.selectPlan}><img src="/assets/close.svg" alt="close"/></a>
// </div>
// </div>
// <div class="password__content">
// <form onSubmit={this.pay}>
// <div class="group__password" style={this.state.creditCardNumberError ? {border:'2px solid red'} : {}}>
// <input value={this.state.creditCardNumber} onChange={this.onChangeCreditCardNumber} placeholder="Credit Card Number"/>
// </div>
// <div class="group__password" style={this.state.creditCardExpiryError ? {border:'2px solid red'} : {}}>
// <input value={this.state.creditCardExpiry} onChange={this.onChangeCreditCardExpiry} placeholder="(MM/YY) Expiration Date"/>
// </div>
// <div class="group__password" style={this.state.creditCardCVCError ? {border:'2px solid red'} : {}}>
// <input value={this.state.creditCardCVC} onChange={this.onChangeCreditCardCVC} placeholder="Credit Card CVC"/>
// </div>
// <div class="password__submit">
// <input type="submit" value="Submit"/>
// </div>
// </form>
// </div>
// <div style={this.state.paymentLoading ? {
// display: "flex",
// justifyContent: "center",
// alignItems: "center",
// height: "61px",
// paddingBottom: "23px"
// } : {display: "none"}}>
// <SpinnerLogin />
// </div>
// </div>
// </div>
// </div>
// // <div className="add-storage__box">
// {/* {!this.state.planSelected ?
// // <div className="add-storage__box">
// // <p className="add-storage__title">Storage Plans</p>
// // <p className="add-storage__title">Storage Plans</p>
// // <div className="add-storage__body">
// // <div className="add-storage__body">
// // {this.state.storagePlans.map((currentPlan) => <AddStorageItem selectPlan={this.selectPlan} plan={currentPlan}/>)}
// // </div>
// // {this.state.storagePlans.map((currentPlan) => <AddStorageItem selectPlan={this.selectPlan} plan={currentPlan}/>)}
// // </div>
// // {!this.state.loaded ? undefined : this.state.userDetails.activeSubscription ? <div className="add-storage-card__button-wrapper">
// // <button className="storage-item__button" onClick={this.removeSubscription}>Remove Subscription</button>
// // </div> : undefined}
// // {!this.state.loaded ? undefined : this.state.userDetails.activeSubscription ? <div className="add-storage-card__button-wrapper">
// // <button className="storage-item__button" onClick={this.removeSubscription}>Remove Subscription</button>
// // </div> : undefined}
// // </div>
// <div className="storage__back">
// // </div>
// <div className="storage__back">
// <div class="storage__block">
// <div class="inner__storage">
// <div class="login__logo">
// <img src="/images/icon.png" alt="logo"/>
// </div>
// <div class="storage__main">
// <h2>Select Storage Plan</h2>
// <div class="wrap__storage--elements">
// {this.state.storagePlans.map((currentPlan) => <AddStorageItem selectPlan={this.selectPlan} plan={currentPlan}/>)}
// </div>
// </div>
// </div>
// </div>
// <div className="storage__block">
// <div className="inner__storage">
// <div className="login__logo">
// <img src="/images/icon.png" alt="logo"/>
// </div>
// <div className="storage__main">
// <h2>Select Storage Plan</h2>
// <div className="wrap__storage--elements">
// {this.state.storagePlans.map((currentPlan) => <AddStorageItem selectPlan={this.selectPlan} plan={currentPlan}/>)}
// </div>
// </div>
// </div>
// </div>
// </div>
// :
// </div>
// <div className="add-storage-card__wrapper">
// :
// <div className="add-storage-card__close-wrapper">
// <img onClick={this.selectPlan} className="add-storage-card__close" src="/images/close_icon.png"/>
// </div>
// <div className="add-storage-card__wrapper">
// <div className="add-storage-card__title-wrapper">
// <p className="add-storage-card__title">{bytes(+this.state.selectedDetails.metadata.amount)} Plan / {this.state.selectedDetails.interval_count} {this.state.selectedDetails.interval}(s)</p>
// </div>
// <div className="add-storage-card__close-wrapper">
// <img onClick={this.selectPlan} className="add-storage-card__close" src="/images/close_icon.png"/>
// </div>
// <div className="add-storage-card__number-wrapper">
// <input className="add-storage-card__number" onChange={this.onChangeCreditCardNumber} value={this.state.creditCardNumber} placeholder="Credit Card Number"/>
// </div>
// <div className="add-storage-card__title-wrapper">
// <p className="add-storage-card__title">{bytes(+this.state.selectedDetails.metadata.amount)} Plan / {this.state.selectedDetails.interval_count} {this.state.selectedDetails.interval}(s)</p>
// </div>
// <div className="add-storage-card__expiry-wrapper">
// <input className="add-storage-card__expiry" onChange={this.onChangeCreditCardExpiry} value={this.state.creditCardExpiry} placeholder="Expire Date (MM/YYYY)"/>
// <input className="add-storage-card__cvc" onChange={this.onChangeCreditCardCVC} value={this.state.creditCardCVC} placeholder="CVC"/>
// </div>
// <div className="add-storage-card__number-wrapper">
// <input className="add-storage-card__number" onChange={this.onChangeCreditCardNumber} value={this.state.creditCardNumber} placeholder="Credit Card Number"/>
// </div>
// <div className="add-storage-card__button-wrapper">
// <button className="storage-item__button" onClick={this.pay}>Pay {'$' + parseInt(this.state.selectedDetails.amount, 10) / 100}</button>
// </div>
// <div className="add-storage-card__expiry-wrapper">
// <input className="add-storage-card__expiry" onChange={this.onChangeCreditCardExpiry} value={this.state.creditCardExpiry} placeholder="Expire Date (MM/YYYY)"/>
// <input className="add-storage-card__cvc" onChange={this.onChangeCreditCardCVC} value={this.state.creditCardCVC} placeholder="CVC"/>
// </div>
// </div>
// } */}
// <div className="add-storage-card__button-wrapper">
// <button className="storage-item__button" onClick={this.pay}>Pay {'$' + parseInt(this.state.selectedDetails.amount, 10) / 100}</button>
// </div>
// </div>
)
}
// </div>
// } */}
// </div>
);
}
}
export default AddStoragePageContainer;
export default AddStoragePageContainer;
src/components/FolderTree/FolderTree.jsx
+1 -1
View File
@@ -21,7 +21,7 @@ const FolderTree = (props) => (
</div>
</div>
// <div class="folder__structure" style={{overflow:"unset", maxHeight:"unset", maxWidth:"unset"}}>
// <div className="folder__structure" style={{overflow:"unset", maxHeight:"unset", maxWidth:"unset"}}>
// {(env.activeSubscription || !env.commercialMode) ? <FolderTreeStorage type={"mongo"}/> : undefined}
// {env.s3Enabled ? <FolderTreeStorage type={"s3"}/> : undefined}
// {env.googleDriveEnabled ? <FolderTreeStorage type={"drive"}/> : undefined}
src/components/FolderTreeStorage/FolderTreeStorage.jsx
+3 -3
View File
@@ -38,10 +38,10 @@ const FolderTreeStorage = (props) => (
</div>
//return
// <div class="elem__structure root__element">
// <div class={props.state.open ? "parent__structure active__parent" : "parent__structure"}>
// <div className="elem__structure root__element">
// <div className={props.state.open ? "parent__structure active__parent" : "parent__structure"}>
// <span onClick={props.arrowClick}><img src="/assets/arrowstructure.svg" alt="arrowstructure"/></span>
// <div class="info__name">
// <div className="info__name">
// <p>{props.type === "drive" ? "Google Drive" : props.type === "mongo" ? "myDrive" : "Amazon S3"}</p>
// </div>
// </div>
src/components/GoogleAccountPage/GoogleAccountPage.jsx
+34 -25
View File
@@ -1,33 +1,42 @@
import React from "react";
const GoogleAccountPage = (props) => (
<div class="modal__wrap" style={!props.state.accountDetailsLoaded ? {background: 'unset'} : {}}>
<div class="inner__modal">
{props.state.accountDetailsLoaded ?
<div class="password__modal">
<div class="head__password">
<h2>Google Account</h2>
<div class="close__modal">
{/* <a onClick={props.changeShowAddName}><img src="/assets/close.svg" alt="close"/></a> */}
</div>
</div>
<div class="password__content">
<form onSubmit={props.addGoogleAccount}>
{/* <div class="group__password">
<div
className="modal__wrap"
style={!props.state.accountDetailsLoaded ? { background: "unset" } : {}}
>
<div className="inner__modal">
{props.state.accountDetailsLoaded ? (
<div className="password__modal">
<div className="head__password">
<h2>Google Account</h2>
<div className="close__modal">
{/* <a onClick={props.changeShowAddName}><img src="/assets/close.svg" alt="close"/></a> */}
</div>
</div>
<div className="password__content">
<form onSubmit={props.addGoogleAccount}>
{/* <div className="group__password">
<input value={props.state.name} onChange={props.onChangeAddName} placeholder="Name"/>
</div> */}
<div class="password__submit">
<input type="submit" value={props.state.accountAdded ? 'Go Back' : "Add Google Account"}/>
</div>
</form>
</div>
</div> :
<div>
<p>{props.state.info}</p>
</div>
}
<div className="password__submit">
<input
type="submit"
value={
props.state.accountAdded ? "Go Back" : "Add Google Account"
}
/>
</div>
</form>
</div>
</div>
) : (
<div>
<p>{props.state.info}</p>
</div>
)}
</div>
)
</div>
);
export default GoogleAccountPage;
export default GoogleAccountPage;
src/components/Header/Header.jsx
+15 -14
View File
@@ -2,10 +2,10 @@ import React from "react";
const Header = (props) => (
<header>
<div class="container">
<div class="outer__header">
<div class="left__header">
<div class="logo__wrapper">
<div className="container">
<div className="outer__header">
<div className="left__header">
<div className="logo__wrapper">
<a onClick={props.goHome}>
<img
className="header__icon"
@@ -14,7 +14,7 @@ const Header = (props) => (
/>
</a>
</div>
<div class="search__wrapper">
<div className="search__wrapper">
<a href="#">
<img src="/assets/searchicon.svg" alt="search" />
</a>
@@ -27,7 +27,7 @@ const Header = (props) => (
onBlur={props.hideSuggested}
/>
<div
class="search__files--dropdown"
className="search__files--dropdown"
style={
props.state.focused && props.searchValue.length !== 0
? { display: "block" }
@@ -36,11 +36,12 @@ const Header = (props) => (
>
<div
onMouseDown={props.selectSuggestedByParent}
class="elem__search--files search__filter--local"
className="elem__search--files search__filter--local"
>
<a>
Search for <span class="file__name">{props.searchValue}</span>
<span class="spacer">
Search for{" "}
<span className="file__name">{props.searchValue}</span>
<span className="spacer">
<img src="/assets/spacer.svg" alt="spacer" />
</span>
</a>
@@ -48,15 +49,15 @@ const Header = (props) => (
</div>
</div>
</div>
<div class="right__header">
<div class="profile__info">
<div class="settings__button">
<div className="right__header">
<div className="profile__info">
<div className="settings__button">
<a onClick={props.goToSettings}>
<img src="/assets/settings.svg" alt="settings" />
</a>
</div>
<div class="profile__wrapper">
<div class="profile__button">
<div className="profile__wrapper">
<div className="profile__button">
<a style={{ backgroundColor: "#3c85ee" }}>
<span style={{ color: "#fff" }}>{props.getProfilePic()}</span>
</a>
src/components/InvoiceItem/InvoiceItem.jsx
+21 -11
View File
@@ -2,15 +2,25 @@ import React from "react";
import moment from "moment";
const InvoiceItem = (props) => (
<tr>
<td class="date__history">{moment.unix(props.currentInvoice.created).format("L")}</td>
<td class="plan__history">myDrive Standard Plan</td>
<td class="amount__history">{'$' + parseInt(props.currentInvoice.amount_due, 10) / 100}</td>
<td class={props.currentInvoice.paid ? "status__history" : "status__history unpaid"}>{props.currentInvoice.paid ? "Paid" : "Unpaid"}</td>
<td>
<a onClick={props.downloadInvoice}>Invoice</a>
</td>
</tr>
)
<tr>
<td className="date__history">
{moment.unix(props.currentInvoice.created).format("L")}
</td>
<td className="plan__history">myDrive Standard Plan</td>
<td className="amount__history">
{"$" + parseInt(props.currentInvoice.amount_due, 10) / 100}
</td>
<td
className={
props.currentInvoice.paid ? "status__history" : "status__history unpaid"
}
>
{props.currentInvoice.paid ? "Paid" : "Unpaid"}
</td>
<td>
<a onClick={props.downloadInvoice}>Invoice</a>
</td>
</tr>
);
export default InvoiceItem;
export default InvoiceItem;
src/components/LeftSection/LeftSection.jsx
+9 -9
View File
@@ -24,8 +24,8 @@ class LeftSection extends React.Component {
: { left: "-290px" }
}
>
<div class="navigation__block">
<div class="add__new">
<div className="navigation__block">
<div className="add__new">
<a onClick={this.props.showDropDown}>
<p>ADD NEW</p>
<span>
@@ -33,7 +33,7 @@ class LeftSection extends React.Component {
</span>
</a>
<div
class="dropdown__list"
className="dropdown__list"
style={
this.props.state.open
? { display: "block" }
@@ -53,7 +53,7 @@ class LeftSection extends React.Component {
/>
<a
onClick={this.props.showUploadOverlay}
class="upload__files"
className="upload__files"
>
<span>
<img src="/assets/uploadicon.svg" alt="upload" />
@@ -64,7 +64,7 @@ class LeftSection extends React.Component {
) : (
<a
onClick={this.props.showUploadOverlay}
class="upload__files"
className="upload__files"
>
<span>
<img src="/assets/uploadicon.svg" alt="upload" />
@@ -84,9 +84,9 @@ class LeftSection extends React.Component {
</ul>
</div>
</div>
<div class="page__navigation">
<div className="page__navigation">
<ul>
<li class="active__page">
<li className="active__page">
<a onClick={this.props.goHome}>
<span>
<img src="/assets/homea.svg" alt="homeactive" />
@@ -97,11 +97,11 @@ class LeftSection extends React.Component {
</ul>
</div>
<UploadStorageSwitcher />
<div class="folder__structure">
<div className="folder__structure">
<FolderTree />
</div>
<div
class={
className={
this.props.state.hideFolderTree
? "utility__buttons utility__buttons_no_border"
: "utility__buttons"
src/components/MainSection/MainSection.jsx
+22 -20
View File
@@ -7,7 +7,7 @@ import LeftSection from "../LeftSection";
const MainSection = React.forwardRef((props, ref) => {
return (
<div class="content__block">
<div className="content__block">
<div
className="overlay"
style={
@@ -16,16 +16,16 @@ const MainSection = React.forwardRef((props, ref) => {
: { display: "none" }
}
></div>
<div class="small__switcher--content">
<a onClick={props.switchLeftSectionMode} class="menu__button">
<i class="fas fa-bars"></i>
<div className="small__switcher--content">
<a onClick={props.switchLeftSectionMode} className="menu__button">
<i className="fas fa-bars"></i>
</a>
<a onClick={props.switchRightSectionMode} class="image__viewer">
<i class="fas fa-images"></i>
<a onClick={props.switchRightSectionMode} className="image__viewer">
<i className="fas fa-images"></i>
</a>
</div>
<div
class="file__container"
className="file__container"
style={
props.routeType === "search"
? { flexDirection: "column" }
@@ -33,9 +33,9 @@ const MainSection = React.forwardRef((props, ref) => {
}
>
{true ? undefined : (
<div class="file__control--panel empty__control--panel">
<div class="file__get--started">
<div class="get__started--image">
<div className="file__control--panel empty__control--panel">
<div className="file__get--started">
<div className="get__started--image">
<img src="/assets/get_startedfile.svg" alt="get" />
</div>
<h6>All your files in one place</h6>
@@ -46,29 +46,31 @@ const MainSection = React.forwardRef((props, ref) => {
{props.routeType === "search" ? (
<div
class="file__control--panel folder__view"
className="file__control--panel folder__view"
style={{ paddingBottom: "0", marginBottom: "-50px" }}
>
<div class="results__files">
<div className="results__files">
<h2>
<span class="counter__result">
<span className="counter__result">
{props.files.length + props.folders.length >= 50
? "50+"
: props.files.length + props.folders.length}
</span>{" "}
<span class="result__word">results</span> for{" "}
<span class="result__search--word">{props.cachedSearch}</span>
<span className="result__word">results</span> for{" "}
<span className="result__search--word">
{props.cachedSearch}
</span>
</h2>
<p class="searching__result">
<p className="searching__result">
You are searching in{" "}
<span class="root__parent">
<span className="root__parent">
{props.parent === "/"
? "Home"
: props.parentNameList.length !== 0
? props.parentNameList[props.parentNameList.length - 1]
: "Unknown"}
</span>{" "}
<span class="spacer">
<span className="spacer">
<img
style={{
height: "11px",
@@ -79,11 +81,11 @@ const MainSection = React.forwardRef((props, ref) => {
alt="spacer"
/>
</span>
<span class="current__folder"></span>{" "}
<span className="current__folder"></span>{" "}
<a
href="#"
style={{ display: "none" }}
class="search__filter--global"
className="search__filter--global"
>
Show results from everywhere
</a>
src/components/MoverModel/index.jsx
+43 -43
View File
@@ -7,50 +7,50 @@ class MoverModel extends React.Component {
render() {
return (
<div class="modal__wrap" style="display:none;">
<div class="inner__modal">
<div class="destination__modal">
<div class="destination__head">
<div className="modal__wrap" style="display:none;">
<div className="inner__modal">
<div className="destination__modal">
<div className="destination__head">
<h2>Choose destination</h2>
<div class="close__modal">
<div className="close__modal">
<a href="#">
<img src="/assets/close.svg" alt="close" />
</a>
</div>
</div>
<div class="destination__structure">
<div class="folder__structure">
<div class="elem__structure">
<div class="parent__structure">
<div className="destination__structure">
<div className="folder__structure">
<div className="elem__structure">
<div className="parent__structure">
<span>
<i class="fas fa-caret-right"></i>
<i className="fas fa-caret-right"></i>
</span>
<div class="info__name">
<div className="info__name">
<p>myDrive</p>
</div>
</div>
<div class="child__structure" style="display:none;">
<div class="elem__structure">
<div class="parent__structure">
<div className="child__structure" style="display:none;">
<div className="elem__structure">
<div className="parent__structure">
<span>
<i class="fas fa-caret-right"></i>
<i className="fas fa-caret-right"></i>
</span>
<div class="info__name">
<div className="info__name">
<p>
<span>
<i class="fas fa-folder"></i>
<i className="fas fa-folder"></i>
</span>
Images
</p>
</div>
</div>
<div class="child__structure" style="display:none;">
<div class="elem__structure">
<div class="parent__structure last__structure">
<div class="info__name">
<div className="child__structure" style="display:none;">
<div className="elem__structure">
<div className="parent__structure last__structure">
<div className="info__name">
<p>
<span>
<i class="fas fa-folder"></i>
<i className="fas fa-folder"></i>
</span>
Videos
</p>
@@ -60,28 +60,28 @@ class MoverModel extends React.Component {
</div>
</div>
</div>
<div class="child__structure" style="display:none;">
<div class="elem__structure">
<div class="parent__structure">
<div className="child__structure" style="display:none;">
<div className="elem__structure">
<div className="parent__structure">
<span>
<i class="fas fa-caret-right"></i>
<i className="fas fa-caret-right"></i>
</span>
<div class="info__name">
<div className="info__name">
<p>
<span>
<i class="fas fa-folder"></i>
<i className="fas fa-folder"></i>
</span>
Images
</p>
</div>
</div>
<div class="child__structure" style="display:none;">
<div class="elem__structure">
<div class="parent__structure last__structure">
<div class="info__name">
<div className="child__structure" style="display:none;">
<div className="elem__structure">
<div className="parent__structure last__structure">
<div className="info__name">
<p>
<span>
<i class="fas fa-folder"></i>
<i className="fas fa-folder"></i>
</span>
Videos
</p>
@@ -92,29 +92,29 @@ class MoverModel extends React.Component {
</div>
</div>
</div>
<div class="elem__structure">
<div class="parent__structure">
<div className="elem__structure">
<div className="parent__structure">
<span>
<i class="fas fa-caret-right"></i>
<i className="fas fa-caret-right"></i>
</span>
<div class="info__name">
<div className="info__name">
<p>Amazon S3</p>
</div>
</div>
</div>
<div class="elem__structure">
<div class="parent__structure">
<div className="elem__structure">
<div className="parent__structure">
<span>
<i class="fas fa-caret-right"></i>
<i className="fas fa-caret-right"></i>
</span>
<div class="info__name">
<div className="info__name">
<p>Google Drive</p>
</div>
</div>
</div>
</div>
</div>
<div class="destination__move">
<div className="destination__move">
<a href="#">Move To Folder</a>
</div>
</div>
@@ -124,4 +124,4 @@ class MoverModel extends React.Component {
}
}
export default MoverModel;
export default MoverModel;
src/components/ParentBar/ParentBar.jsx
+13 -10
View File
@@ -1,14 +1,17 @@
import React from "react";
const ParentBar = (props) => (
<div class="path__files">
<a onClick={props.homeClick}>myDrive</a>
<span class="spacer__path">
<img src="/assets/spacer.svg" alt="spacer"/>
</span>
<p onClick={props.onFolderClick} class="current__folder">{props.parentNameList.length !== 0
? props.parentNameList[props.parentNameList.length - 1] : "No Name"}</p>
</div>
)
<div className="path__files">
<a onClick={props.homeClick}>myDrive</a>
<span className="spacer__path">
<img src="/assets/spacer.svg" alt="spacer" />
</span>
<p onClick={props.onFolderClick} className="current__folder">
{props.parentNameList.length !== 0
? props.parentNameList[props.parentNameList.length - 1]
: "No Name"}
</p>
</div>
);
export default ParentBar;
export default ParentBar;
src/components/ParentBarChild/index.jsx
+14 -15
View File
@@ -1,21 +1,20 @@
import React from "react";
class ParentBarChild extends React.Component {
constructor(props) {
super(props);
}
constructor(props) {
super(props)
}
render() {
return (
<div>
<span class="spacer__path">
<img src="/assets/spacer.svg" alt="spacer" />
</span>
<p class="current__folder">{this.props.name}</p>
</div>
)
}
render() {
return (
<div>
<span className="spacer__path">
<img src="/assets/spacer.svg" alt="spacer" />
</span>
<p className="current__folder">{this.props.name}</p>
</div>
);
}
}
export default ParentBarChild;
export default ParentBarChild;
src/components/ResetPasswordPage/ResetPasswordPage.jsx
+42 -24
View File
@@ -1,30 +1,48 @@
import React from "react";
const ResetPasswordPage = (props) => (
<div class="modal__wrap">
<div class="inner__modal">
<div class="password__modal">
<div class="head__password">
<h2>{"Reset Password"}</h2>
<div class="close__modal">
</div>
</div>
<div class="password__content">
<form onSubmit={props.resetPassword}>
<div style={props.state.passwordChanged ? {display:"none"} : {}} class="group__password">
<input value={props.state.password} onChange={props.passwordOnChange} placeholder="New Password" type="password"/>
</div>
<div style={props.state.passwordChanged ? {display:"none"} : {}} class="group__password">
<input value={props.state.verifyPassword} onChange={props.verifyPasswordOnChange} placeholder="Verify New Password" type="password"/>
</div>
<div class="password__submit">
<input type="submit" value={props.state.passwordChanged ? 'Go Back' : 'Submit'}/>
</div>
</form>
</div>
</div>
<div className="modal__wrap">
<div className="inner__modal">
<div className="password__modal">
<div className="head__password">
<h2>{"Reset Password"}</h2>
<div className="close__modal"></div>
</div>
<div className="password__content">
<form onSubmit={props.resetPassword}>
<div
style={props.state.passwordChanged ? { display: "none" } : {}}
className="group__password"
>
<input
value={props.state.password}
onChange={props.passwordOnChange}
placeholder="New Password"
type="password"
/>
</div>
<div
style={props.state.passwordChanged ? { display: "none" } : {}}
className="group__password"
>
<input
value={props.state.verifyPassword}
onChange={props.verifyPasswordOnChange}
placeholder="Verify New Password"
type="password"
/>
</div>
<div className="password__submit">
<input
type="submit"
value={props.state.passwordChanged ? "Go Back" : "Submit"}
/>
</div>
</form>
</div>
</div>
</div>
)
</div>
);
export default ResetPasswordPage;
export default ResetPasswordPage;
src/components/SettingsPage/index.jsx
+192 -192
View File
@@ -830,10 +830,10 @@ class SettingsPageContainer extends React.Component {
return (
<div>
<div class="main__wrapper">
<div className="main__wrapper">
<div
onClick={this.showSideBar}
class="overlay"
className="overlay"
style={
this.state.sideBarOpen
? { display: "block" }
@@ -844,17 +844,17 @@ class SettingsPageContainer extends React.Component {
<Header goHome={this.goHome} />
<div
class="main__wrapper--container settings__container"
className="main__wrapper--container settings__container"
style={this.props.loading ? { display: "none" } : {}}
>
<div
class="menu__block"
className="menu__block"
style={
this.state.sideBarOpen ? { left: "0px" } : { left: "-250px" }
}
>
<div class="file__settings">
<div class="back__button">
<div className="file__settings">
<div className="back__button">
<a onClick={this.goHome}>
<span>
<img src="/assets/backarrow.svg" alt="backarrow" />
@@ -862,10 +862,10 @@ class SettingsPageContainer extends React.Component {
BACK TO FILES
</a>
</div>
<div class="settings__menu">
<div className="settings__menu">
<ul>
<li
class={
className={
this.state.mode === "general" ? "active__settings" : ""
}
data-settings="general__settings"
@@ -875,7 +875,7 @@ class SettingsPageContainer extends React.Component {
</a>
</li>
<li
class={
className={
this.state.mode === "storage" ? "active__settings" : ""
}
data-settings="storage__accounts"
@@ -890,7 +890,7 @@ class SettingsPageContainer extends React.Component {
? { display: "block" }
: { display: "none" }
}
class={
className={
this.state.mode === "billing" ? "active__settings" : ""
}
data-settings="billing__settings"
@@ -900,7 +900,7 @@ class SettingsPageContainer extends React.Component {
</a>
</li>
<li
class={
className={
this.state.mode === "notifications"
? "active__settings"
: ""
@@ -915,9 +915,9 @@ class SettingsPageContainer extends React.Component {
</div>
</div>
</div>
<div class="menu__block">
<div class="file__settings">
<div class="back__button">
<div className="menu__block">
<div className="file__settings">
<div className="back__button">
<a onClick={this.goHome}>
<span>
<img src="/assets/backarrow.svg" alt="backarrow" />
@@ -925,10 +925,10 @@ class SettingsPageContainer extends React.Component {
BACK TO FILES
</a>
</div>
<div class="settings__menu">
<div className="settings__menu">
<ul>
<li
class={
className={
this.state.mode === "general" ? "active__settings" : ""
}
data-settings="general__settings"
@@ -940,7 +940,7 @@ class SettingsPageContainer extends React.Component {
</a>
</li>
<li
class={
className={
this.state.mode === "storage" ? "active__settings" : ""
}
data-settings="storage__accounts"
@@ -957,7 +957,7 @@ class SettingsPageContainer extends React.Component {
? { display: "block" }
: { display: "none" }
}
class={
className={
this.state.mode === "billing" ? "active__settings" : ""
}
data-settings="billing__settings"
@@ -969,7 +969,7 @@ class SettingsPageContainer extends React.Component {
</a>
</li>
<li
class={
className={
this.state.mode === "notifications"
? "active__settings"
: ""
@@ -989,34 +989,34 @@ class SettingsPageContainer extends React.Component {
</div>
</div>
<div class="content__block">
<div class="small__switcher--content">
<a onClick={this.showSideBar} class="menu__button">
<i class="fas fa-bars"></i>
<div className="content__block">
<div className="small__switcher--content">
<a onClick={this.showSideBar} className="menu__button">
<i className="fas fa-bars"></i>
</a>
{/* <a href="#" class="image__viewer">
<i class="fas fa-images"></i>
{/* <a href="#" className="image__viewer">
<i className="fas fa-images"></i>
</a> */}
</div>
<div class="main__settings--block">
<div className="main__settings--block">
<div
class="inner__settings general__settings"
className="inner__settings general__settings"
style={
this.state.mode === "general"
? { display: "block" }
: { display: "none" }
}
>
<div class="elem__settings">
<div class="head__settings">
<div className="elem__settings">
<div className="head__settings">
<h2>Personal info</h2>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Profile picture</p>
</div>
<div class="control__value">
<div class="profile__picture">
<div className="control__value">
<div className="profile__picture">
<p style={{ backgroundColor: "#3c85ee" }}>
<span style={{ color: "#fff" }}>
{this.getProfilePicName()}
@@ -1024,15 +1024,15 @@ class SettingsPageContainer extends React.Component {
</p>
</div>
</div>
<div class="value__updater">
<div className="value__updater">
{/* <a href="#">Upload</a> */}
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Name</p>
</div>
<div class="control__value">
<div className="control__value">
<p>
{this.state.loaded
? this.state.userDetails.name
@@ -1041,47 +1041,47 @@ class SettingsPageContainer extends React.Component {
: "Loading..."}
</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a onClick={this.changeShowAddName}>Change</a>
</div>
</div>
</div>
<div class="elem__settings">
<div class="head__settings">
<div className="elem__settings">
<div className="head__settings">
<h2>Security</h2>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Logout Account</p>
</div>
<div class="control__value">
<div className="control__value">
<p></p>
</div>
<div class="value__updater">
<div className="value__updater">
<a onClick={this.logout}>Logout</a>
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Email</p>
</div>
<div class="control__value">
<div className="control__value">
<p>
{this.state.loaded
? this.state.userDetails.email
: "Loading..."}
</p>
</div>
<div class="value__updater">
<div className="value__updater">
{/* <a href="#">Change</a> */}
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Password</p>
</div>
<div class="control__value">
<div className="control__value">
<p>
{this.state.loaded
? this.state.userDetails.passwordLastModified
@@ -1092,10 +1092,10 @@ class SettingsPageContainer extends React.Component {
: "Loading..."}
</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a
onClick={this.changeShowChangePassword}
class="modal__button"
className="modal__button"
data-modal="password__modal"
>
Change
@@ -1103,86 +1103,86 @@ class SettingsPageContainer extends React.Component {
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Logout All Accounts</p>
</div>
<div class="control__value">
<div className="control__value">
<p></p>
</div>
<div class="value__updater">
<div className="value__updater">
<a onClick={this.logoutAll}>Logout All</a>
</div>
</div>
{/* <div class="elem__control--settings">
<div class="control__title">
{/* <div className="elem__control--settings">
<div className="control__title">
<p>Two factor authentication</p>
</div>
<div class="control__value">
<div className="control__value">
<p>Disabled</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a href="#">Enable</a>
</div>
</div> */}
</div>
<div class="elem__settings" style={{ display: "none" }}>
<div class="head__settings">
<div className="elem__settings" style={{ display: "none" }}>
<div className="head__settings">
<h2>Preferences</h2>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Language</p>
</div>
<div class="control__value">
<div className="control__value">
<p>English</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a href="#">Change</a>
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Date format</p>
</div>
<div class="control__value">
<div className="control__value">
<p>MM / DD / YYYY</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a href="#">Change</a>
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Date Time zone</p>
</div>
<div class="control__value">
<div className="control__value">
<p>GMT +7</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a href="#">Change</a>
</div>
</div>
</div>
</div>
<div
class="inner__settings storage__accounts"
className="inner__settings storage__accounts"
style={
this.state.mode === "storage"
? { display: "block" }
: { display: "none" }
}
>
<div class="elem__settings">
<div class="head__settings">
<div className="elem__settings">
<div className="head__settings">
<h2>Storage Accounts</h2>
</div>
<div class="elem__control--settings storage__control">
<div class="active__storage">
<div class="control__title">
<div class="double__title">
<div className="elem__control--settings storage__control">
<div className="active__storage">
<div className="control__title">
<div className="double__title">
<p>
{env.commercialMode ? "myDrive" : "Local Storage"}
</p>
@@ -1196,10 +1196,10 @@ class SettingsPageContainer extends React.Component {
</span>
</div>
</div>
<div class="control__value">
<div class="available__space--wrap">
<div className="control__value">
<div className="available__space--wrap">
<div
class="space__bar"
className="space__bar"
style={
!this.state.loaded
? {}
@@ -1210,7 +1210,7 @@ class SettingsPageContainer extends React.Component {
}
>
<div
class="active__space--bar"
className="active__space--bar"
style={{
backgroundColor: "#3c85ee",
width: !this.state.loaded
@@ -1244,7 +1244,7 @@ class SettingsPageContainer extends React.Component {
</span>
</div>
</div>
<div class="value__updater">
<div className="value__updater">
<a
onClick={
env.commercialMode
@@ -1256,7 +1256,7 @@ class SettingsPageContainer extends React.Component {
</a>
</div>
</div>
<div class="more__space" style={{ display: "none" }}>
<div className="more__space" style={{ display: "none" }}>
<p>
<img src="/assets/star.svg" alt="star" />{" "}
<span>Earn more free space.</span> Get an additional
@@ -1265,9 +1265,9 @@ class SettingsPageContainer extends React.Component {
<a href="#">Invite Friends</a>
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div class="double__title">
<div className="elem__control--settings">
<div className="control__title">
<div className="double__title">
<p>Google Drive</p>
<span>
{!this.state.loaded
@@ -1278,10 +1278,10 @@ class SettingsPageContainer extends React.Component {
</span>
</div>
</div>
<div class="control__value">
<div class="available__space--wrap">
<div className="control__value">
<div className="available__space--wrap">
<div
class="space__bar"
className="space__bar"
style={
!this.state.loaded
? {}
@@ -1291,7 +1291,7 @@ class SettingsPageContainer extends React.Component {
}
>
<div
class="active__space--bar"
className="active__space--bar"
style={{
backgroundColor: "#3c85ee",
width: !this.state.loaded
@@ -1317,7 +1317,7 @@ class SettingsPageContainer extends React.Component {
</span>
</div>
</div>
<div class="value__updater">
<div className="value__updater">
<a onClick={this.showGoogleAccount}>
{!this.state.loaded
? "Loading..."
@@ -1328,9 +1328,9 @@ class SettingsPageContainer extends React.Component {
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div class="double__title">
<div className="elem__control--settings">
<div className="control__title">
<div className="double__title">
<p>Amazon S3</p>
<span>
{!this.state.loaded
@@ -1342,7 +1342,7 @@ class SettingsPageContainer extends React.Component {
</div>
</div>
<div
class="control__value"
className="control__value"
style={
!this.state.loaded
? {}
@@ -1351,10 +1351,10 @@ class SettingsPageContainer extends React.Component {
: { display: "none" }
}
>
<div class="available__space--wrap">
<div class="space__bar">
<div className="available__space--wrap">
<div className="space__bar">
<div
class="active__space--bar"
className="active__space--bar"
style={{
backgroundColor: "#3c85ee",
width: "100%",
@@ -1374,7 +1374,7 @@ class SettingsPageContainer extends React.Component {
</span>
</div>
</div>
<div class="value__updater">
<div className="value__updater">
<a onClick={this.showS3Account}>
{!this.state.loaded
? "Loading..."
@@ -1386,10 +1386,10 @@ class SettingsPageContainer extends React.Component {
</div>
</div>
<div
class="elem__settings more__accounts"
className="elem__settings more__accounts"
style={{ display: "none" }}
>
<div class="head__settings">
<div className="head__settings">
<h2>Add more accounts</h2>
</div>
<div
@@ -1402,27 +1402,27 @@ class SettingsPageContainer extends React.Component {
>
<p>More Storage Options Coming Soon!</p>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>BackBlaze</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a href="#">Enable</a>
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Sia Network</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a href="#">Enable</a>
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Localhost</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a href="#">Enable</a>
</div>
</div>
@@ -1430,22 +1430,22 @@ class SettingsPageContainer extends React.Component {
</div>
<div
class="inner__settings billing__settings"
className="inner__settings billing__settings"
style={
this.state.mode === "billing"
? { display: "block" }
: { display: "none" }
}
>
<div class="elem__settings">
<div class="head__settings">
<div className="elem__settings">
<div className="head__settings">
<h2>Payment</h2>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Payment method</p>
</div>
<div class="control__value">
<div className="control__value">
<p>
{this.state.loaded && this.state.invoicesLoaded
? !this.state.invoiceData.card
@@ -1454,15 +1454,15 @@ class SettingsPageContainer extends React.Component {
: "No Payment Method"}
</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a onClick={this.launchStoragePage}>Change</a>
</div>
</div>
<div class="elem__control--settings">
<div class="control__title">
<div className="elem__control--settings">
<div className="control__title">
<p>Billing cycle</p>
</div>
<div class="control__value">
<div className="control__value">
<p>
{this.state.loaded && this.state.invoicesLoaded
? !this.state.invoiceData.subscription
@@ -1474,22 +1474,22 @@ class SettingsPageContainer extends React.Component {
: "No Subscription"}
</p>
</div>
<div class="value__updater">
<div className="value__updater">
<a onClick={this.launchStoragePage}>Change</a>
</div>
</div>
</div>
<div class="elem__settings">
<div class="head__settings">
<div className="elem__settings">
<div className="head__settings">
<h2>History</h2>
</div>
<div class="history.__table">
<div className="history.__table">
<table>
<tr>
<th class="date__history">DATE</th>
<th class="plan__history">PLAN</th>
<th class="amount__history">AMOUNT</th>
<th class="status__history">STATUS</th>
<th className="date__history">DATE</th>
<th className="plan__history">PLAN</th>
<th className="amount__history">AMOUNT</th>
<th className="status__history">STATUS</th>
<th></th>
</tr>
@@ -1501,28 +1501,28 @@ class SettingsPageContainer extends React.Component {
);
})}
{/* <tr>
<td class="date__history">May 1, 2020</td>
<td class="plan__history">myDrive Standard Plan</td>
<td class="amount__history">$9.99</td>
<td class="status__history unpaid">Unpaid</td>
<td className="date__history">May 1, 2020</td>
<td className="plan__history">myDrive Standard Plan</td>
<td className="amount__history">$9.99</td>
<td className="status__history unpaid">Unpaid</td>
<td>
<a href="#">Invoice</a>
</td>
</tr>
<tr>
<td class="date__history">May 1, 2020</td>
<td class="plan__history">myDrive Standard Plan</td>
<td class="amount__history">$9.99</td>
<td class="status__history paid">Paid</td>
<td className="date__history">May 1, 2020</td>
<td className="plan__history">myDrive Standard Plan</td>
<td className="amount__history">$9.99</td>
<td className="status__history paid">Paid</td>
<td>
<a href="#">Receipt</a>
</td>
</tr>
<tr>
<td class="date__history">May 1, 2020</td>
<td class="plan__history">myDrive Standard Plan</td>
<td class="amount__history">$9.99</td>
<td class="status__history paid">Paid</td>
<td className="date__history">May 1, 2020</td>
<td className="plan__history">myDrive Standard Plan</td>
<td className="amount__history">$9.99</td>
<td className="status__history paid">Paid</td>
<td>
<a href="#">Receipt</a>
</td>
@@ -1533,18 +1533,18 @@ class SettingsPageContainer extends React.Component {
</div>
<div
class="inner__settings notification__settings"
className="inner__settings notification__settings"
style={
this.state.mode === "notifications"
? { display: "block" }
: { display: "none" }
}
>
<div class="elem__settings">
<div class="head__settings">
<div className="elem__settings">
<div className="head__settings">
<h2>Customization</h2>
</div>
<div class="settings__switchers">
<div className="settings__switchers">
<span>Set Defaults</span>
<p>
<input
@@ -1614,11 +1614,11 @@ class SettingsPageContainer extends React.Component {
</div>
</div>
{/* <div class="elem__settings">
<div class="head__settings">
{/* <div className="elem__settings">
<div className="head__settings">
<h2>Marketing</h2>
</div>
<div class="settings__switchers">
<div className="settings__switchers">
<span>Email me about</span>
<p>
<input type="checkbox" id="test4" />
@@ -1643,16 +1643,16 @@ class SettingsPageContainer extends React.Component {
</div>
<div
class="modal__wrap"
className="modal__wrap"
style={
this.state.addS3AccountOpen
? { display: "block" }
: { display: "none" }
}
>
<div class="inner__modal">
<div class="password__modal">
<div class="head__password">
<div className="inner__modal">
<div className="password__modal">
<div className="head__password">
<h2>
{!this.state.loaded
? "Loading..."
@@ -1660,13 +1660,13 @@ class SettingsPageContainer extends React.Component {
? "Edit Amazon S3 Account"
: "Add Amazon S3 Account"}
</h2>
<div class="close__modal">
<div className="close__modal">
<a onClick={this.showS3Account}>
<img src="/assets/close.svg" alt="close" />
</a>
</div>
</div>
<div class="password__content">
<div className="password__content">
<form
onSubmit={
!this.state.loaded
@@ -1677,7 +1677,7 @@ class SettingsPageContainer extends React.Component {
}
>
<div
class="group__password"
className="group__password"
style={
!this.state.loaded
? {}
@@ -1693,7 +1693,7 @@ class SettingsPageContainer extends React.Component {
/>
</div>
<div
class="group__password"
className="group__password"
style={
!this.state.loaded
? {}
@@ -1709,7 +1709,7 @@ class SettingsPageContainer extends React.Component {
/>
</div>
<div
class="group__password"
className="group__password"
style={
!this.state.loaded
? {}
@@ -1725,7 +1725,7 @@ class SettingsPageContainer extends React.Component {
placeholder="S3 Key"
/>
</div>
<div class="password__submit">
<div className="password__submit">
<input
type="submit"
value={
@@ -1748,7 +1748,7 @@ class SettingsPageContainer extends React.Component {
: { display: "none" }
}
>
<div class="password__submit">
<div className="password__submit">
{/* <input onClick={this.downloadPersonalFileList} value="Download S3 File List"/> */}
<button>Download S3 Metadata List</button>
</div>
@@ -1762,7 +1762,7 @@ class SettingsPageContainer extends React.Component {
: { display: "none" }
}
>
<div class="password__submit">
<div className="password__submit">
<div>
<input
ref={this.uploadReference}
@@ -1785,7 +1785,7 @@ class SettingsPageContainer extends React.Component {
: { display: "none" }
}
>
<div class="password__submit">
<div className="password__submit">
{/* <input onClick={this.downloadPersonalFileList} value="Download S3 File List"/> */}
<button>Delete S3 Metadata</button>
</div>
@@ -1796,16 +1796,16 @@ class SettingsPageContainer extends React.Component {
</div>
<div
class="modal__wrap"
className="modal__wrap"
style={
this.state.addGoogleAccountOpen
? { display: "block" }
: { display: "none" }
}
>
<div class="inner__modal">
<div class="password__modal">
<div class="head__password">
<div className="inner__modal">
<div className="password__modal">
<div className="head__password">
<h2>
{!this.state.loaded
? "Loading..."
@@ -1813,13 +1813,13 @@ class SettingsPageContainer extends React.Component {
? "Remove Google Drive Account"
: "Add Google Drive Account"}
</h2>
<div class="close__modal">
<div className="close__modal">
<a onClick={this.showGoogleAccount}>
<img src="/assets/close.svg" alt="close" />
</a>
</div>
</div>
<div class="password__content">
<div className="password__content">
<form
onSubmit={
!this.state.loaded
@@ -1830,7 +1830,7 @@ class SettingsPageContainer extends React.Component {
}
>
<div
class="group__password"
className="group__password"
style={
!this.state.loaded
? {}
@@ -1846,7 +1846,7 @@ class SettingsPageContainer extends React.Component {
/>
</div>
<div
class="group__password"
className="group__password"
style={
!this.state.loaded
? {}
@@ -1862,7 +1862,7 @@ class SettingsPageContainer extends React.Component {
placeholder="Drive Client Secret"
/>
</div>
<div class="password__submit">
<div className="password__submit">
<input
type="submit"
value={
@@ -1881,26 +1881,26 @@ class SettingsPageContainer extends React.Component {
</div>
<div
class="modal__wrap"
className="modal__wrap"
style={
this.state.showChangePassword
? { display: "block" }
: { display: "none" }
}
>
<div class="inner__modal">
<div class="password__modal">
<div class="head__password">
<div className="inner__modal">
<div className="password__modal">
<div className="head__password">
<h2>Update password</h2>
<div class="close__modal">
<div className="close__modal">
<a onClick={this.changeShowChangePassword}>
<img src="/assets/close.svg" alt="close" />
</a>
</div>
</div>
<div class="password__content">
<div className="password__content">
<form onSubmit={this.submitPasswordChange}>
<div class="group__password">
<div className="group__password">
<input
onChange={this.onChangeOldPassword}
value={this.state.oldPassword}
@@ -1908,7 +1908,7 @@ class SettingsPageContainer extends React.Component {
placeholder="Old password"
/>
</div>
<div class="group__password">
<div className="group__password">
<input
onChange={this.onChangeNewPassword}
value={this.state.newPassword}
@@ -1916,7 +1916,7 @@ class SettingsPageContainer extends React.Component {
placeholder="New password"
/>
</div>
<div class="group__password">
<div className="group__password">
<input
onChange={this.onChangeVerifyNewPassword}
value={this.state.verifyNewPassword}
@@ -1924,7 +1924,7 @@ class SettingsPageContainer extends React.Component {
placeholder="Repeat new password"
/>
</div>
<div class="password__submit">
<div className="password__submit">
<input type="submit" value="Update Password" />
</div>
</form>
@@ -1934,31 +1934,31 @@ class SettingsPageContainer extends React.Component {
</div>
<div
class="modal__wrap"
className="modal__wrap"
style={
this.state.showAddName ? { display: "block" } : { display: "none" }
}
>
<div class="inner__modal">
<div class="password__modal">
<div class="head__password">
<div className="inner__modal">
<div className="password__modal">
<div className="head__password">
<h2>{"Update Name"}</h2>
<div class="close__modal">
<div className="close__modal">
<a onClick={this.changeShowAddName}>
<img src="/assets/close.svg" alt="close" />
</a>
</div>
</div>
<div class="password__content">
<div className="password__content">
<form onSubmit={this.submitAddName}>
<div class="group__password">
<div className="group__password">
<input
value={this.state.name}
onChange={this.onChangeAddName}
placeholder="Name"
/>
</div>
<div class="password__submit">
<div className="password__submit">
<input type="submit" value="Update Name" />
</div>
</form>
src/components/ShareModel/index.jsx
+391 -301
View File
@@ -1,12 +1,16 @@
import React from "react";
import {connect} from "react-redux"
import { connect } from "react-redux";
import { editFile } from "../../actions/files";
import axios from "../../axiosInterceptor"
import axios from "../../axiosInterceptor";
import env from "../../enviroment/envFrontEnd";
import capitalize from "../../utils/capitalize";
import bytes from "bytes";
import copy from "copy-text-to-clipboard";
import { setShareSelected, editSelectedItem, editShareSelected } from "../../actions/selectedItem";
import {
setShareSelected,
editSelectedItem,
editShareSelected,
} from "../../actions/selectedItem";
import SpinnerImage from "../SpinnerImage";
import SpinnerPage from "../SpinnerPage";
import Swal from "sweetalert2";
@@ -17,34 +21,38 @@ class ShareModelContainer extends React.Component {
constructor(props) {
super(props);
this.state= {
shareableLink: "Fetching Link...",
loaded: false,
sendTo: "",
emailSent: false,
copySelected: false,
public: false,
shared: false,
}
this.state = {
shareableLink: "Fetching Link...",
loaded: false,
sendTo: "",
emailSent: false,
copySelected: false,
public: false,
shared: false,
};
this.lastLoadedID = ''
this.lastLoadedID = "";
}
componentDidMount = () => {
const id = this.props.shareSelected._id;
//`/file-service/info/${id}`
const url = this.props.shareSelected.metadata.drive ? `/file-service-google/info/${id}` : `/file-service/info/${id}`;
axios.get(url).then((response) => {
const url = this.props.shareSelected.metadata.drive
? `/file-service-google/info/${id}`
: `/file-service/info/${id}`;
axios
.get(url)
.then((response) => {
console.log("file info response", response.data);
const linkType = response.data.metadata.linkType;
const shareURL = this.props.shareSelected.metadata.drive ? response.data.metadata.link : `${currentURL}/download-page/${this.props.shareSelected._id}/${this.props.shareSelected.metadata.link}`
const shareURL = this.props.shareSelected.metadata.drive
? response.data.metadata.link
: `${currentURL}/download-page/${this.props.shareSelected._id}/${this.props.shareSelected.metadata.link}`;
console.log("share link type", linkType, response.data);
@@ -52,28 +60,21 @@ class ShareModelContainer extends React.Component {
...this.state,
shared: linkType ? true : false,
loaded: true,
shareableLink: shareURL
}))
}).catch((e) => {
console.log("Cannot get share file data", e);
})
}
shareableLink: shareURL,
}));
})
.catch((e) => {
console.log("Cannot get share file data", e);
});
};
componentDidUpdate = () => {
// console.log("share model updated");
// if (this.lastLoadedID !== this.props.shareSelected._id && this.props.shareSelected !== "") {
// if (this.props.shareSelected.metadata.link && !this.props.shareSelected.metadata.drive) {
// console.log("link already exists");
// this.lastLoadedID = this.props.shareSelected._id;
// const shareURL = this.props.shareSelected.metadata.drive ? results.data : `${currentURL}/download-page/${this.props.shareSelected._id}/${this.props.shareSelected.metadata.link}`
// return this.setState(() => {
// return {
// ...this.state,
@@ -83,27 +84,18 @@ class ShareModelContainer extends React.Component {
// }
// })
// }
// this.lastLoadedID = this.props.shareSelected._id;
// console.log("share props", this.props.shareSelected)
// const url = this.props.shareSelected.metadata.drive ? currentURL +`/file-service-google/make-public/${this.props.shareSelected._id}` : currentURL +`/file-service/make-public/${this.props.shareSelected._id}`;
// console.log("share", url)
// axios.patch(url, undefined).then((results) => {
// this.props.shareSelected.metadata.link = results.data;
// this.props.dispatch(editFile(this.props.shareSelected._id,{"metadata": {
// ...this.props.shareSelected.metadata,
// link: results.data,
// linkType: "public"
// }}));
// const shareURL = this.props.shareSelected.metadata.drive ? results.data : `${currentURL}/download-page/${this.props.shareSelected._id}/${this.props.shareSelected.metadata.link}`
// this.setState(() => {
// return {
// ...this.state,
@@ -113,73 +105,67 @@ class ShareModelContainer extends React.Component {
// }
// })
// })
// }
}
};
sendEmail = (e) => {
e.preventDefault()
e.preventDefault();
if (this.state.sendTo.length === 0 || !this.state.loaded) return;
if (!this.state.shared) {
Swal.fire({
icon: 'error',
title: 'You must share the file first',
text: 'Select make public or make one time before sending email',
})
icon: "error",
title: "You must share the file first",
text: "Select make public or make one time before sending email",
});
return;
}
console.log("sending email share request")
console.log("sending email share request");
const data = {
file: {
_id: this.props.shareSelected._id,
resp: this.state.sendTo
}
}
axios.post("/file-service/send-share-email", data).then((response) => {
file: {
_id: this.props.shareSelected._id,
resp: this.state.sendTo,
},
};
axios
.post("/file-service/send-share-email", data)
.then((response) => {
console.log("sent email share");
this.setState(() => {
return {
...this.state,
emailSent: true
}
})
}).catch((err) => {
console.log("share file email failed", err)
return {
...this.state,
emailSent: true,
};
});
})
.catch((err) => {
console.log("share file email failed", err);
Swal.fire({
icon: 'error',
title: 'Cannot send share email',
text: 'An error occurred when sending share email',
})
})
}
icon: "error",
title: "Cannot send share email",
text: "An error occurred when sending share email",
});
});
};
onChangeEmail = (e) => {
const value = e.target.value;
this.setState(() => {
return {
...this.state,
sendTo: value
}
})
}
return {
...this.state,
sendTo: value,
};
});
};
closeShareModel = () => {
this.props.dispatch(setShareSelected(""))
this.props.dispatch(setShareSelected(""));
this.setState(() => {
return {
shareableLink: "Fetching Link...",
@@ -187,269 +173,334 @@ class ShareModelContainer extends React.Component {
sendTo: "",
emailSent: false,
copySelected: false,
public: false
}
})
this.lastLoadedID = ''
}
public: false,
};
});
this.lastLoadedID = "";
};
copyClick = () => {
if (!this.state.loaded) return;
copy(this.state.shareableLink)
copy(this.state.shareableLink);
console.log("link copied")
console.log("link copied");
this.setState(() => {
this.setState(
() => {
return {
...this.state,
copySelected: true
}
}, () => {
console.log("new state set")
...this.state,
copySelected: true,
};
},
() => {
console.log("new state set");
window.setTimeout(() => {
this.setState(() => {
this.setState(() => {
return {
...this.state,
copySelected: false,
};
});
}, 750);
}
);
};
return {
...this.state,
copySelected: false
}
})
}, 750)
})
}
removePublicLink = async () => {
const url = this.props.shareSelected.metadata.drive
? `/file-service-google/remove-link/${this.props.shareSelected._id}`
: `/file-service/remove-link/${this.props.shareSelected._id}`;
removePublicLink = async() => {
const url = this.props.shareSelected.metadata.drive ? `/file-service-google/remove-link/${this.props.shareSelected._id}` : `/file-service/remove-link/${this.props.shareSelected._id}`
axios
.delete(url, {})
.then(() => {
this.props.dispatch(
editFile(this.props.shareSelected._id, {
metadata: {
...this.props.shareSelected.metadata,
link: undefined,
linkType: undefined,
},
})
);
axios.delete(url, {
}).then(() => {
this.props.dispatch(
editSelectedItem({ link: undefined, linkType: undefined })
);
this.props.dispatch(editFile(this.props.shareSelected._id,{"metadata": {
...this.props.shareSelected.metadata,
link: undefined,
linkType: undefined
}}))
this.props.dispatch(editSelectedItem({link: undefined,
linkType: undefined}))
this.props.dispatch(editShareSelected({"metadata": {
...this.props.shareSelected.metadata,
link: undefined,
linkType: undefined
}}))
this.props.dispatch(
editShareSelected({
metadata: {
...this.props.shareSelected.metadata,
link: undefined,
linkType: undefined,
},
})
);
this.setState(() => ({
...this.state,
shared: false,
}))
}));
//this.closeShareModel();
}).catch((err) => {
console.log(err)
})
.catch((err) => {
console.log(err);
Swal.fire({
icon: 'error',
title: 'Cannot remove public link',
text: 'An error occurred when removing public link',
})
})
}
icon: "error",
title: "Cannot remove public link",
text: "An error occurred when removing public link",
});
});
};
makePublic = () => {
this.showingSwal = true;
Swal.fire({
title: 'Are you sure?',
text: "Making this public, will allow anyone to have access to it",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, make public'
}).then((result) => {
title: "Are you sure?",
text: "Making this public, will allow anyone to have access to it",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, make public",
}).then((result) => {
this.showingSwal = false;
this.showingSwal = false;
if (result.value) {
if (result.value) {
const url = this.props.shareSelected.metadata.drive
? `/file-service-google/make-public/${this.props.shareSelected._id}`
: `/file-service/make-public/${this.props.shareSelected._id}`;
const url = this.props.shareSelected.metadata.drive ? `/file-service-google/make-public/${this.props.shareSelected._id}` : `/file-service/make-public/${this.props.shareSelected._id}`;
axios.patch(url, undefined).then((results) => {
this.props.dispatch(editFile(this.props.shareSelected._id,{"metadata": {
...this.props.shareSelected.metadata,
link: results.data,
linkType: "public"
}}))
axios
.patch(url, undefined)
.then((results) => {
this.props.dispatch(
editFile(this.props.shareSelected._id, {
metadata: {
...this.props.shareSelected.metadata,
link: results.data,
linkType: "public",
},
})
);
this.props.dispatch(editSelectedItem({link: results.data,
linkType: "public"}))
this.props.dispatch(
editSelectedItem({ link: results.data, linkType: "public" })
);
this.props.dispatch(editShareSelected({"metadata": {
...this.props.shareSelected.metadata,
link: results.data,
linkType: "public"
}}))
this.props.dispatch(
editShareSelected({
metadata: {
...this.props.shareSelected.metadata,
link: results.data,
linkType: "public",
},
})
);
const shareURL = this.props.shareSelected.metadata.drive ? results.data : `${currentURL}/download-page/${this.props.shareSelected._id}/${results.data}`
const shareURL = this.props.shareSelected.metadata.drive
? results.data
: `${currentURL}/download-page/${this.props.shareSelected._id}/${results.data}`;
this.setState(() => ({
...this.state,
shared: true,
shareableLink: shareURL
}))
}).catch((err) => {
console.log(err)
Swal.fire({
icon: 'error',
title: 'Cannot make public',
text: 'An error occurred when making file public'
})
})
}
})
}
this.setState(() => ({
...this.state,
shared: true,
shareableLink: shareURL,
}));
})
.catch((err) => {
console.log(err);
Swal.fire({
icon: "error",
title: "Cannot make public",
text: "An error occurred when making file public",
});
});
}
});
};
makeOne = () => {
this.showingSwal = true;
this.showingSwal = true;
Swal.fire({
title: "Are you sure?",
text: "One time link, will allow anyone to access this file once",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3085d6",
cancelButtonColor: "#d33",
confirmButtonText: "Yes, create link",
}).then((result) => {
this.showingSwal = false;
Swal.fire({
title: 'Are you sure?',
text: "One time link, will allow anyone to access this file once",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, create link'
}).then((result) => {
this.showingSwal = false;
if (result.value) {
axios.patch(`/file-service/make-one/${this.props.shareSelected._id}`, undefined).then((results) => {
this.props.dispatch(editFile(this.props.shareSelected._id,{"metadata": {
...this.props.shareSelected.metadata,
link: results.data,
linkType: "one"
}}))
this.props.dispatch(editSelectedItem({link: results.data,
linkType: "one"}))
this.props.dispatch(editShareSelected({"metadata": {
...this.props.shareSelected.metadata,
link: results.data,
linkType: "one"
}}))
this.setState(() => ({
...this.state,
shared: true,
}))
const shareURL = this.props.shareSelected.metadata.drive ? results.data : `${currentURL}/download-page/${this.props.shareSelected._id}/${results.data}`
this.setState(() => ({
...this.state,
shared: true,
shareableLink: shareURL
}))
}).catch((err) => {
console.log(err)
Swal.fire({
icon: 'error',
title: 'Cannot make one time public link',
text: 'An error occurred when making one time public link',
})
if (result.value) {
axios
.patch(
`/file-service/make-one/${this.props.shareSelected._id}`,
undefined
)
.then((results) => {
this.props.dispatch(
editFile(this.props.shareSelected._id, {
metadata: {
...this.props.shareSelected.metadata,
link: results.data,
linkType: "one",
},
})
);
}
})
this.props.dispatch(
editSelectedItem({ link: results.data, linkType: "one" })
);
}
this.props.dispatch(
editShareSelected({
metadata: {
...this.props.shareSelected.metadata,
link: results.data,
linkType: "one",
},
})
);
this.setState(() => ({
...this.state,
shared: true,
}));
const shareURL = this.props.shareSelected.metadata.drive
? results.data
: `${currentURL}/download-page/${this.props.shareSelected._id}/${results.data}`;
this.setState(() => ({
...this.state,
shared: true,
shareableLink: shareURL,
}));
})
.catch((err) => {
console.log(err);
Swal.fire({
icon: "error",
title: "Cannot make one time public link",
text: "An error occurred when making one time public link",
});
});
}
});
};
removeLink = () => {
const url = this.props.shareSelected.metadata.drive
? `/file-service-google/remove-link/${this.props.shareSelected._id}`
: `/file-service/remove-link/${this.props.shareSelected._id}`;
const url = this.props.shareSelected.metadata.drive ? `/file-service-google/remove-link/${this.props.shareSelected._id}` : `/file-service/remove-link/${this.props.shareSelected._id}`
axios
.delete(url, {})
.then(() => {
this.props.dispatch(
editFile(this.props.shareSelected._id, {
metadata: {
...this.props.shareSelected.metadata,
link: undefined,
linkType: undefined,
},
})
);
axios.delete(url, {
}).then(() => {
this.props.dispatch(
editSelectedItem({ link: undefined, linkType: undefined })
);
this.props.dispatch(editFile(this.props.shareSelected._id,{"metadata": {
...this.props.shareSelected.metadata,
link: undefined,
linkType: undefined
}}))
this.props.dispatch(editSelectedItem({link: undefined,
linkType: undefined}))
this.props.dispatch(editShareSelected({"metadata": {
...this.props.shareSelected.metadata,
link: undefined,
linkType: undefined
}}))
}).catch((err) => {
console.log(err)
this.props.dispatch(
editShareSelected({
metadata: {
...this.props.shareSelected.metadata,
link: undefined,
linkType: undefined,
},
})
);
})
.catch((err) => {
console.log(err);
Swal.fire({
icon: 'error',
title: 'Cannot remove public link',
text: 'An error occurred when removing public link',
})
})
}
icon: "error",
title: "Cannot remove public link",
text: "An error occurred when removing public link",
});
});
};
render() {
return (
<div class="modal__wrap" style={this.props.shareSelected !== "" ? {display:"block"} : {display:"none"}}>
<div class="inner__modal">
<div class="share__modal">
<div class="share__head">
<div class="share__type">
<div
className="modal__wrap"
style={
this.props.shareSelected !== ""
? { display: "block" }
: { display: "none" }
}
>
<div className="inner__modal">
<div className="share__modal">
<div className="share__head">
<div className="share__type">
<img src="/assets/extension1.svg" alt="extension" />
</div>
<div class="share__info">
<p>{this.props.shareSelected !== "" ? capitalize(this.props.shareSelected.filename) : ""}</p>
<span>{this.props.shareSelected !== "" ? bytes(this.props.shareSelected.length) : 0}</span>
<div className="share__info">
<p>
{this.props.shareSelected !== ""
? capitalize(this.props.shareSelected.filename)
: ""}
</p>
<span>
{this.props.shareSelected !== ""
? bytes(this.props.shareSelected.length)
: 0}
</span>
</div>
<div class="close__modal">
<div className="close__modal">
<a>
<img src="/assets/close.svg" alt="close" onClick={this.closeShareModel}/>
<img
src="/assets/close.svg"
alt="close"
onClick={this.closeShareModel}
/>
</a>
</div>
</div>
<div class="share__recipient">
<div className="share__recipient">
<p>Send to:</p>
<form onSubmit={this.sendEmail}>
<div class="group__input float__span">
<input onChange={this.onChangeEmail} value={this.state.sendTo} type="text" placeholder="Email Address"/>
<div className="group__input float__span">
<input
onChange={this.onChangeEmail}
value={this.state.sendTo}
type="text"
placeholder="Email Address"
/>
{/* <span>Email address</span> */}
</div>
<div class="group__submit">
<div className="group__submit">
<input type="submit" value="Send" />
</div>
</form>
<div class="share__success" style={this.state.emailSent ? {display:"block"} : {display:"none"}}>
<div
className="share__success"
style={
this.state.emailSent
? { display: "block" }
: { display: "none" }
}
>
<p>
<span>
<img src="/assets/success.svg" alt="success" />
@@ -458,37 +509,76 @@ class ShareModelContainer extends React.Component {
</p>
</div>
</div>
<div className="share-model-spinner-wrapper" style={!this.state.loaded ? {} : {display: "none"}}>
<div
className="share-model-spinner-wrapper"
style={!this.state.loaded ? {} : { display: "none" }}
>
<SpinnerPage />
</div>
<div className="share-model-share-buttons-wrapper" style={!this.state.shared && this.state.loaded ? {} : {display:"none"}}>
<div
className="share-model-share-buttons-wrapper"
style={
!this.state.shared && this.state.loaded
? {}
: { display: "none" }
}
>
<div className="share-button__wrapper">
<button onClick={this.makePublic} className="button popup-window__button">Make Public</button>
<button
onClick={this.makePublic}
className="button popup-window__button"
>
Make Public
</button>
</div>
<div className="share-button__wrapper">
<button onClick={this.makeOne} style={this.props.shareSelected.metadata.drive ? {display: "none"} : {}} className="button popup-window__button">Make One Time Link</button>
<button
onClick={this.makeOne}
style={
this.props.shareSelected.metadata.drive
? { display: "none" }
: {}
}
className="button popup-window__button"
>
Make One Time Link
</button>
</div>
</div>
<div class="get__share--link" style={this.state.shared ? {} : {display: "none"}}>
<div
className="get__share--link"
style={this.state.shared ? {} : { display: "none" }}
>
<p>File link:</p>
<div class="get__link">
<div class="copied__wrap" style={this.state.copySelected ? {display: "block"} : {display:"none"}}>
<div className="get__link">
<div
className="copied__wrap"
style={
this.state.copySelected
? { display: "block" }
: { display: "none" }
}
>
<p>
<img src="/assets/copiedcheck.svg" alt="check" /> Copied
</p>
</div>
<input
type="text"
value={this.state.shareableLink}
readonly
/>
<input type="text" value={this.state.shareableLink} readonly />
<a onClick={this.copyClick}>
<img src="/assets/copy.svg" alt="copy" />
</a>
</div>
</div>
<div className="share-button__wrapper" style={this.state.shared ? {} : {display:"none"}}>
<button onClick={this.removePublicLink} className="button popup-window__button">Remove Public Access</button>
<div
className="share-button__wrapper"
style={this.state.shared ? {} : { display: "none" }}
>
<button
onClick={this.removePublicLink}
className="button popup-window__button"
>
Remove Public Access
</button>
</div>
</div>
</div>
@@ -498,7 +588,7 @@ class ShareModelContainer extends React.Component {
}
const connectStoreToProp = (state) => ({
shareSelected: state.selectedItem.shareSelected
})
shareSelected: state.selectedItem.shareSelected,
});
export default connect(connectStoreToProp)(ShareModelContainer);
src/components/UploadItem/UploadItem.jsx
+40 -30
View File
@@ -9,29 +9,36 @@ const UploadItem = (props) => {
if (!completed && !canceled) {
return (
<div class="elem__upload uploading__now">
<div class="upload__elem--status">
<div className="elem__upload uploading__now">
<div className="upload__elem--status">
<span>
<img src="/assets/upload_now.svg" alt="upload" />
</span>
</div>
<div class="upload__info">
<div class="top__upload">
<div class="upload__text">
<div className="upload__info">
<div className="top__upload">
<div className="upload__text">
<p>{props.name}</p>
</div>
<div class="upload__size">
<div class="stop__download">
<div className="upload__size">
<div className="stop__download">
<span>
<img onClick={props.cancelUploadEvent} src="/assets/cancel.svg" alt="cancel" />
<img
onClick={props.cancelUploadEvent}
src="/assets/cancel.svg"
alt="cancel"
/>
</span>
</div>
<span>{bytes(props.size)}</span>
<span>{bytes(props.size)}</span>
</div>
</div>
<div class="bottom__upload">
<div class="progress__upload">
<div class="active__progress" style={{width:`${props.progress}%`}}></div>
<div className="bottom__upload">
<div className="progress__upload">
<div
className="active__progress"
style={{ width: `${props.progress}%` }}
></div>
</div>
</div>
</div>
@@ -39,24 +46,27 @@ const UploadItem = (props) => {
);
} else if (completed) {
return (
<div class="elem__upload uploaded__already">
<div class="upload__elem--status">
<div className="elem__upload uploaded__already">
<div className="upload__elem--status">
<span>
<img src="/assets/uploaded__success.svg" alt="upload" />
</span>
</div>
<div class="upload__info">
<div class="top__upload">
<div class="upload__text">
<div className="upload__info">
<div className="top__upload">
<div className="upload__text">
<p>{props.name}</p>
</div>
<div class="upload__size">
<span>{bytes(props.size)}</span>
<div className="upload__size">
<span>{bytes(props.size)}</span>
</div>
</div>
<div class="bottom__upload">
<div class="progress__upload">
<div class="active__progress" style={{width:`${props.progress}%`}}></div>
<div className="bottom__upload">
<div className="progress__upload">
<div
className="active__progress"
style={{ width: `${props.progress}%` }}
></div>
</div>
</div>
</div>
@@ -64,23 +74,23 @@ const UploadItem = (props) => {
);
} else {
return (
<div class="elem__upload uploaded__cancelled">
<div class="upload__elem--status">
<div className="elem__upload uploaded__cancelled">
<div className="upload__elem--status">
<span>
<img src="/assets/uploaded__failed.svg" alt="upload" />
</span>
</div>
<div class="upload__info">
<div class="top__upload">
<div class="upload__text">
<div className="upload__info">
<div className="top__upload">
<div className="upload__text">
<p>{props.name}</p>
</div>
<div class="retry__download">
<div className="retry__download">
<a href="#">Retry</a>
</div>
</div>
<div class="bottom__upload">
<div class="failed__info">
<div className="bottom__upload">
<div className="failed__info">
<span>Upload failed</span>
</div>
</div>
src/components/UploadOverlay/UploadOverlay.jsx
+18 -9
View File
@@ -1,14 +1,23 @@
import React from "react";
const UploadOverlay = (props) => (
<div onClick={props.closeOverlay} class="upload__overlay" draggable="true" onDrop={props.onDragDropEvent} onDragOver={props.onDragOverEvent} onDragLeave={props.onDragLeaveEvent} onDragEnter={props.onDragEnterEvent} style={props.uploadOverlayOpen ? {display:"block"} : {display:"none"}}>
<div class="inner__upload">
<div class="upload__image">
<img src="/assets/upload.svg" alt="upload"/>
</div>
<p>Drop your files anywhere to start uploading</p>
</div>
<div
onClick={props.closeOverlay}
className="upload__overlay"
draggable="true"
onDrop={props.onDragDropEvent}
onDragOver={props.onDragOverEvent}
onDragLeave={props.onDragLeaveEvent}
onDragEnter={props.onDragEnterEvent}
style={props.uploadOverlayOpen ? { display: "block" } : { display: "none" }}
>
<div className="inner__upload">
<div className="upload__image">
<img src="/assets/upload.svg" alt="upload" />
</div>
<p>Drop your files anywhere to start uploading</p>
</div>
)
</div>
);
export default UploadOverlay;
export default UploadOverlay;
src/components/Uploader/Uploader.jsx
+4 -4
View File
@@ -3,17 +3,17 @@ import React from "react";
const Uploader = React.forwardRef((props, ref) => (
<div
class="upload__status"
className="upload__status"
style={
props.uploads.length !== 0 ? { display: "block" } : { display: "none" }
}
>
<div class="head__upload">
<div className="head__upload">
<p>
Uploading {props.uploads.length}{" "}
{props.uploads.length === 1 ? "file" : "files"}
</p>
<div class="hide__upload">
<div className="hide__upload">
<a onClick={() => props.minimizeUploader()}>
<img src="/assets/upload_hide.svg" alt="upload__hide" />
</a>
@@ -26,7 +26,7 @@ const Uploader = React.forwardRef((props, ref) => (
</a>
</div>
</div>
<div class="content__upload">
<div className="content__upload">
{props.uploaderShow
? props.uploads.map((upload) => {
return <UploadItem key={upload.id} {...upload} />;