Etebase change to login.
Tom Hacohen
4 years ago
parent
6d18d494a7
commit
1817fbf87d
@ -1,104 +0,0 @@
|
|||||||
// SPDX-FileCopyrightText: © 2017 EteSync Authors
|
|
||||||
// SPDX-License-Identifier: AGPL-3.0-only
|
|
||||||
|
|
||||||
import * as React from "react";
|
|
||||||
import Button from "@material-ui/core/Button";
|
|
||||||
import TextField from "@material-ui/core/TextField";
|
|
||||||
|
|
||||||
interface FormErrors {
|
|
||||||
errorEncryptionPassword?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
class EncryptionLoginForm extends React.PureComponent {
|
|
||||||
public state: {
|
|
||||||
errors: FormErrors;
|
|
||||||
encryptionPassword: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
public props: {
|
|
||||||
onSubmit: (encryptionPassword: string) => void;
|
|
||||||
loading?: boolean;
|
|
||||||
error?: Error;
|
|
||||||
};
|
|
||||||
|
|
||||||
constructor(props: any) {
|
|
||||||
super(props);
|
|
||||||
this.state = {
|
|
||||||
errors: {},
|
|
||||||
encryptionPassword: "",
|
|
||||||
};
|
|
||||||
this.generateEncryption = this.generateEncryption.bind(this);
|
|
||||||
this.handleInputChange = this.handleInputChange.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
public handleInputChange(event: React.ChangeEvent<any>) {
|
|
||||||
const name = event.target.name;
|
|
||||||
const value = event.target.value;
|
|
||||||
this.setState({
|
|
||||||
[name]: value,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
public generateEncryption(e: any) {
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
const encryptionPassword = this.state.encryptionPassword;
|
|
||||||
|
|
||||||
const errors: FormErrors = {};
|
|
||||||
const fieldRequired = "This field is required!";
|
|
||||||
if (!encryptionPassword) {
|
|
||||||
errors.errorEncryptionPassword = fieldRequired;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Object.keys(errors).length) {
|
|
||||||
this.setState({ errors });
|
|
||||||
return;
|
|
||||||
} else {
|
|
||||||
this.setState({ errors: {} });
|
|
||||||
}
|
|
||||||
|
|
||||||
this.props.onSubmit(encryptionPassword);
|
|
||||||
}
|
|
||||||
|
|
||||||
public render() {
|
|
||||||
const styles = {
|
|
||||||
form: {
|
|
||||||
},
|
|
||||||
submit: {
|
|
||||||
marginTop: 40,
|
|
||||||
textAlign: "right" as any,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<React.Fragment>
|
|
||||||
{(this.props.error) && (<div>Error! {this.props.error.message}</div>)}
|
|
||||||
<form style={styles.form} onSubmit={this.generateEncryption}>
|
|
||||||
<TextField
|
|
||||||
type="password"
|
|
||||||
autoFocus
|
|
||||||
error={!!this.state.errors.errorEncryptionPassword}
|
|
||||||
helperText={this.state.errors.errorEncryptionPassword}
|
|
||||||
label="Encryption Password"
|
|
||||||
name="encryptionPassword"
|
|
||||||
value={this.state.encryptionPassword}
|
|
||||||
onChange={this.handleInputChange}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div style={styles.submit}>
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
variant="contained"
|
|
||||||
color="secondary"
|
|
||||||
disabled={this.props.loading}
|
|
||||||
>
|
|
||||||
{this.props.loading ? "Loading…" : "Continue"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</React.Fragment>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default EncryptionLoginForm;
|
|
||||||
@ -0,0 +1,26 @@
|
|||||||
|
// SPDX-FileCopyrightText: © 2017 Etebase Authors
|
||||||
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { createSelector } from "reselect";
|
||||||
|
|
||||||
|
import * as Etebase from "etebase";
|
||||||
|
|
||||||
|
import * as store from "./store";
|
||||||
|
import { usePromiseMemo } from "./helpers";
|
||||||
|
|
||||||
|
export const credentialsSelector = createSelector(
|
||||||
|
(state: store.StoreState) => state.credentials2.storedSession,
|
||||||
|
(storedSession) => {
|
||||||
|
if (storedSession) {
|
||||||
|
return Etebase.Account.restore(storedSession);
|
||||||
|
} else {
|
||||||
|
return Promise.resolve(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export function useCredentials() {
|
||||||
|
const credentialsPromise = useSelector(credentialsSelector);
|
||||||
|
return usePromiseMemo(credentialsPromise, [credentialsPromise]);
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
import memoize from "memoizee";
|
||||||
|
|
||||||
|
import * as Etebase from "etebase";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
|
||||||
|
import { StoreState } from "./store";
|
||||||
|
import { CacheCollectionsData, CacheItems, CacheItemsData } from "./store/reducers";
|
||||||
|
import { usePromiseMemo } from "./helpers";
|
||||||
|
|
||||||
|
export const getCollections = memoize(async function (cachedCollections: CacheCollectionsData, etebase: Etebase.Account) {
|
||||||
|
const colMgr = getCollectionManager(etebase);
|
||||||
|
const ret: Etebase.Collection[] = [];
|
||||||
|
for (const cached of cachedCollections.values()) {
|
||||||
|
ret.push(await colMgr.cacheLoad(Etebase.fromBase64(cached)));
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}, { length: 1 });
|
||||||
|
|
||||||
|
export const getCollectionsByType = memoize(async function (cachedCollections: CacheCollectionsData, colType: string, etebase: Etebase.Account) {
|
||||||
|
const collections = await getCollections(cachedCollections, etebase);
|
||||||
|
const ret: Etebase.Collection[] = [];
|
||||||
|
for (const col of collections) {
|
||||||
|
const meta = await col.getMeta();
|
||||||
|
if (meta.type === colType) {
|
||||||
|
ret.push(col);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}, { length: 2 });
|
||||||
|
|
||||||
|
export const getItems = memoize(async function (cachedItems: CacheItems, itemMgr: Etebase.CollectionItemManager) {
|
||||||
|
const ret = new Map<string, Etebase.CollectionItem>();
|
||||||
|
for (const cached of cachedItems.values()) {
|
||||||
|
const item = await itemMgr.cacheLoad(Etebase.fromBase64(cached));
|
||||||
|
ret.set(item.uid, item);
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}, { length: 1 });
|
||||||
|
|
||||||
|
export const getItemsByType = memoize(async function (cachedCollections: CacheCollectionsData, cachedItems: CacheItemsData, colType: string, etebase: Etebase.Account) {
|
||||||
|
const colMgr = getCollectionManager(etebase);
|
||||||
|
const collections = await getCollectionsByType(cachedCollections, colType, etebase);
|
||||||
|
const ret = new Map<string, Map<string, Etebase.CollectionItem>>();
|
||||||
|
for (const col of collections) {
|
||||||
|
const itemMgr = colMgr.getItemManager(col);
|
||||||
|
const cachedColItems = cachedItems.get(col.uid);
|
||||||
|
if (cachedColItems) {
|
||||||
|
const items = await getItems(cachedColItems, itemMgr);
|
||||||
|
ret.set(col.uid, items);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}, { length: 3 });
|
||||||
|
|
||||||
|
export const getCollectionManager = memoize(function (etebase: Etebase.Account) {
|
||||||
|
return etebase.getCollectionManager();
|
||||||
|
});
|
||||||
|
|
||||||
|
// React specific stuff
|
||||||
|
export function useCollections(etebase: Etebase.Account, colType: string) {
|
||||||
|
const cachedCollections = useSelector((state: StoreState) => state.cache2.collections);
|
||||||
|
return usePromiseMemo(
|
||||||
|
getCollectionsByType(cachedCollections, colType, etebase),
|
||||||
|
[etebase, cachedCollections, colType]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useItems(etebase: Etebase.Account, colType: string) {
|
||||||
|
const cachedCollections = useSelector((state: StoreState) => state.cache2.collections);
|
||||||
|
const cachedItems = useSelector((state: StoreState) => state.cache2.items);
|
||||||
|
return usePromiseMemo(
|
||||||
|
getItemsByType(cachedCollections, cachedItems, colType, etebase),
|
||||||
|
[etebase, cachedCollections, cachedItems, colType]
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
// SPDX-FileCopyrightText: © 2017 EteSync Authors
|
||||||
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
|
// SPDX-FileCopyrightText: © 2017 EteSync Authors
|
||||||
|
// SPDX-License-Identifier: AGPL-3.0-only
|
||||||
|
|
||||||
|
// SPDX-FileCopyrightText: © 2019 EteSync Authors
|
||||||
|
// SPDX-License-Identifier: GPL-3.0-only
|
||||||
|
|
||||||
|
import * as EteSync from "etesync";
|
||||||
|
|
||||||
|
export const deriveKey = EteSync.deriveKey;
|
||||||
Loading…
Reference in New Issue