beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #37 from ente-io/re-enable-web-signups

Browse source 
Re enable web signups
This commit is contained in:
Vishnu Mohandas 2021-03-09 16:17:03 +05:30 committed by GitHub
parent ae3e33730e e70b8b3f24
commit cdecc7f906
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 139 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/vault.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

1
public/vault.svg
View file

File diff suppressed because one or more lines are too long
Side by side

Before

Width:  |  Height:  |  Size: 7.7 KiB

14
src/pages/_app.tsx
View file

@ -116,7 +116,7 @@ const GlobalStyles = createGlobalStyle`
background-size: cover; background-size: cover;
border: none; border: none;
} }
.btn-primary { .btn-primary ,.btn:focus {
background: #2dc262; background: #2dc262;
border-color: #29a354; border-color: #29a354;
padding: 8px; padding: 8px;
@ -135,6 +135,18 @@ const GlobalStyles = createGlobalStyle`
color: #fff; color: #fff;
border-radius: 12px; border-radius: 12px;
} }
.jumbotron{
background-color: #191919;
color: #fff;
text-align: center;
margin-top: 50px;
}
.alert-success {
background-color: #c4ffd6;
}
.alert-primary {
background-color: #c4ffd6;
}
`; `;
const Image = styled.img` const Image = styled.img`

4
src/pages/gallery/components/Collections.tsx
View file

@ -54,7 +54,9 @@ const Chip = styled.button<{ active: boolean }>`
export default function Collections(props: CollectionProps) { export default function Collections(props: CollectionProps) {
const { selected, collections, selectCollection } = props; const { selected, collections, selectCollection } = props;
const clickHandler = (id?: number) => () => selectCollection(id); const clickHandler = (id?: number) => () => selectCollection(id);
if (collections.length == 0) {
return <Container />;
}
return ( return (
<Container> <Container>
<Wrapper> <Wrapper>

2
src/pages/gallery/components/UploadProgress.tsx
View file

@ -20,7 +20,7 @@ export default function UploadProgress({
> >
<Modal.Header> <Modal.Header>
<Modal.Title id="contained-modal-title-vcenter"> <Modal.Title id="contained-modal-title-vcenter">
Uploading Files {constants.UPLOADING_FILES}
</Modal.Title> </Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>

42
src/pages/gallery/index.tsx
View file

@ -23,7 +23,7 @@ import {
} from 'services/collectionService'; } from 'services/collectionService';
import constants from 'utils/strings/constants'; import constants from 'utils/strings/constants';
import AlertBanner from './components/AlertBanner'; import AlertBanner from './components/AlertBanner';
import { Alert } from 'react-bootstrap'; import { Alert, Button, Jumbotron } from 'react-bootstrap';
const DATE_CONTAINER_HEIGHT = 45; const DATE_CONTAINER_HEIGHT = 45;
const IMAGE_CONTAINER_HEIGHT = 200; const IMAGE_CONTAINER_HEIGHT = 200;
@ -95,6 +95,16 @@ const ListContainer = styled.div<{ columns: number }>`
} }
`; `;
const Image = styled.img`
width: 200px;
max-width: 100%;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
`;
const DateContainer = styled.div` const DateContainer = styled.div`
padding-top: 15px; padding-top: 15px;
`; `;
@ -320,7 +330,7 @@ export default function Gallery(props) {
<LoadingBar color="#2dc262" ref={loadingBar} /> <LoadingBar color="#2dc262" ref={loadingBar} />
{isFirstLoad && ( {isFirstLoad && (
<div className="text-center"> <div className="text-center">
<Alert variant="primary"> <Alert variant="success">
{constants.INITIAL_LOAD_DELAY_WARNING} {constants.INITIAL_LOAD_DELAY_WARNING}
</Alert> </Alert>
</div> </div>
@ -340,7 +350,17 @@ export default function Gallery(props) {
refetchData={syncWithRemote} refetchData={syncWithRemote}
setBannerErrorCode={setBannerErrorCode} setBannerErrorCode={setBannerErrorCode}
/> />
{filteredData.length ? ( {!isFirstLoad && data.length == 0 ? (
<Jumbotron>
<Image alt="vault" src="/vault.png" />
<Button
variant="primary"
onClick={props.showUploadModal}
>
{constants.UPLOAD_FIRST_PHOTO}
</Button>
</Jumbotron>
) : filteredData.length ? (
<Container> <Container>
<AutoSizer> <AutoSizer>
{({ height, width }) => { {({ height, width }) => {
@ -413,7 +433,7 @@ export default function Gallery(props) {
<List <List
itemSize={(index) => itemSize={(index) =>
timeStampList[index].itemType === timeStampList[index].itemType ===
ITEM_TYPE.TIME ITEM_TYPE.TIME
? DATE_CONTAINER_HEIGHT ? DATE_CONTAINER_HEIGHT
: IMAGE_CONTAINER_HEIGHT : IMAGE_CONTAINER_HEIGHT
} }
@ -430,14 +450,14 @@ export default function Gallery(props) {
columns={ columns={
timeStampList[index] timeStampList[index]
.itemType === .itemType ===
ITEM_TYPE.TIME ITEM_TYPE.TIME
? 1 ? 1
: columns : columns
} }
> >
{timeStampList[index] {timeStampList[index]
.itemType === .itemType ===
ITEM_TYPE.TIME ? ( ITEM_TYPE.TIME ? (
<DateContainer> <DateContainer>
{ {
timeStampList[ timeStampList[
@ -456,7 +476,7 @@ export default function Gallery(props) {
index index
] ]
.itemStartIndex + .itemStartIndex +
idx idx
); );
} }
) )
@ -485,6 +505,14 @@ export default function Gallery(props) {
<div>{constants.NOTHING_HERE}</div> <div>{constants.NOTHING_HERE}</div>
</DeadCenter> </DeadCenter>
)} )}
{data.length < 30 && (
<Alert
variant="success"
style={{ position: 'fixed', bottom: '1%', width: '100%', textAlign: 'center', marginBottom: '0px' }}
>
{constants.INSTALL_MOBILE_APP()}
</Alert>
)}
</> </>
); );
} }

15
src/pages/generate/index.tsx
View file

@ -109,10 +109,10 @@ export default function Generate() {
return ( return (
<Container> <Container>
<Image alt="vault" src="/vault.svg" /> {/* <Image alt="vault" src="/vault.png" style={{ paddingBottom: '40px' }} /> */}
<Card> <Card style={{ maxWidth: '540px', padding: '20px' }}>
<Card.Body> <Card.Body>
<div className="text-center"> <div className="text-center" style={{ marginBottom: '40px' }}>
<p>{constants.ENTER_ENC_PASSPHRASE}</p> <p>{constants.ENTER_ENC_PASSPHRASE}</p>
{constants.PASSPHRASE_DISCLAIMER()} {constants.PASSPHRASE_DISCLAIMER()}
</div> </div>
@ -137,15 +137,16 @@ export default function Generate() {
<Form noValidate onSubmit={handleSubmit}> <Form noValidate onSubmit={handleSubmit}>
<Form.Group> <Form.Group>
<Form.Control <Form.Control
type="text" type="password"
placeholder={constants.PASSPHRASE_HINT} placeholder={constants.PASSPHRASE_HINT}
value={values.passphrase} value={values.passphrase}
onChange={handleChange('passphrase')} onChange={handleChange('passphrase')}
onBlur={handleBlur('passphrase')} onBlur={handleBlur('passphrase')}
isInvalid={Boolean( isInvalid={Boolean(
touched.passphrase && touched.passphrase &&
errors.passphrase errors.passphrase
)} )}
autoFocus={true}
disabled={loading} disabled={loading}
/> />
<Form.Control.Feedback type="invalid"> <Form.Control.Feedback type="invalid">
@ -154,7 +155,7 @@ export default function Generate() {
</Form.Group> </Form.Group>
<Form.Group> <Form.Group>
<Form.Control <Form.Control
type="text" type="password"
placeholder={ placeholder={
constants.PASSPHRASE_CONFIRM constants.PASSPHRASE_CONFIRM
} }
@ -170,7 +171,7 @@ export default function Generate() {
{errors.confirm} {errors.confirm}
</Form.Control.Feedback> </Form.Control.Feedback>
</Form.Group> </Form.Group>
<Button type="submit" block disabled={loading}> <Button type="submit" block disabled={loading} style={{ marginTop: '28px' }}>
{constants.SET_PASSPHRASE} {constants.SET_PASSPHRASE}
</Button> </Button>
</Form> </Form>

145
src/pages/index.tsx
View file

@ -10,8 +10,6 @@ import * as Yup from 'yup';
import { getOtt } from 'services/userService'; import { getOtt } from 'services/userService';
import Container from 'components/Container'; import Container from 'components/Container';
import { setData, LS_KEYS, getData } from 'utils/storage/localStorage'; import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
import { Alert } from 'react-bootstrap';
interface formValues { interface formValues {
email: string; email: string;
} }
@ -19,7 +17,6 @@ interface formValues {
export default function Home() { export default function Home() {
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const router = useRouter(); const router = useRouter();
const [showMessage, setShowMessage] = useState(false);
useEffect(() => { useEffect(() => {
router.prefetch('/verify'); router.prefetch('/verify');
@ -40,92 +37,78 @@ export default function Home() {
setData(LS_KEYS.USER, { email }); setData(LS_KEYS.USER, { email });
router.push('/verify'); router.push('/verify');
} catch (e) { } catch (e) {
if (e.response.status == 403) { setFieldError('email', `${constants.UNKNOWN_ERROR} ${e.message}`);
setFieldError('email', `${constants.USER_DOES_NOT_EXIST}`);
} else {
setFieldError(
'email',
`${constants.UNKNOWN_ERROR} ${e.message}`
);
}
} }
setLoading(false); setLoading(false);
}; };
const register = () => { const register = () => {
setShowMessage(true); router.push('/signup');
setTimeout(() => setShowMessage(false), 15000);
}; };
return ( return (
<> <Container>
<div style={{ display: showMessage ? 'block' : 'none', textAlign: 'center' }}> <Card style={{ minWidth: '320px' }} className="text-center">
<Alert variant="warning">{constants.WEB_SIGNUPS_DISABLED()}</Alert> <Card.Body style={{ padding: '40px 30px' }}>
</div> <Card.Title style={{ marginBottom: '32px' }}>
{constants.LOGIN}
<Container> </Card.Title>
<Card style={{ minWidth: '320px' }} className="text-center"> <Formik<formValues>
<Card.Body style={{ padding: '40px 30px' }}> initialValues={{ email: '' }}
<Card.Title style={{ marginBottom: '32px' }}> validationSchema={Yup.object().shape({
{constants.LOGIN} email: Yup.string()
</Card.Title> .email(constants.EMAIL_ERROR)
<Formik<formValues> .required(constants.REQUIRED),
initialValues={{ email: '' }} })}
validationSchema={Yup.object().shape({ onSubmit={loginUser}
email: Yup.string() >
.email(constants.EMAIL_ERROR) {({
.required(constants.REQUIRED), values,
})} errors,
onSubmit={loginUser} touched,
> handleChange,
{({ handleBlur,
values, handleSubmit,
errors, }) => (
touched, <Form noValidate onSubmit={handleSubmit}>
handleChange, <Form.Group controlId="formBasicEmail">
handleBlur, <Form.Control
handleSubmit, type="email"
}) => ( placeholder={constants.ENTER_EMAIL}
<Form noValidate onSubmit={handleSubmit}> value={values.email}
<Form.Group controlId="formBasicEmail"> onChange={handleChange('email')}
<Form.Control onBlur={handleBlur('email')}
type="email" isInvalid={Boolean(
placeholder={constants.ENTER_EMAIL} touched.email && errors.email
value={values.email} )}
onChange={handleChange('email')} autoFocus={true}
onBlur={handleBlur('email')}
isInvalid={Boolean(
touched.email && errors.email
)}
autoFocus={true}
disabled={loading}
/>
<FormControl.Feedback type="invalid">
{errors.email}
</FormControl.Feedback>
</Form.Group>
<Button
variant="primary"
type="submit"
block
disabled={loading} disabled={loading}
style={{ marginBottom: '12px' }} />
> <FormControl.Feedback type="invalid">
{constants.LOGIN} {errors.email}
</Button> </FormControl.Feedback>
</Form> </Form.Group>
)} <Button
</Formik> variant="primary"
<Card.Link type="submit"
href="#" block
onClick={register} disabled={loading}
style={{ fontSize: '14px' }} style={{ marginBottom: '12px' }}
> >
{constants.NO_ACCOUNT} {constants.LOGIN}
</Card.Link> </Button>
</Card.Body> </Form>
</Card> )}
</Container> </Formik>
</> <Card.Link
href="#"
onClick={register}
style={{ fontSize: '14px' }}
>
{constants.NO_ACCOUNT}
</Card.Link>
</Card.Body>
</Card>
</Container>
); );
} }

24
src/utils/strings/englishConstants.tsx
View file

@ -57,21 +57,13 @@ const englishConstants = {
2: 'uploading your files', 2: 'uploading your files',
3: 'files uploaded successfully!', 3: 'files uploaded successfully!',
}, },
UPLOADING_FILES: `uploading files`,
OF: 'of', OF: 'of',
SUBSCRIPTION_EXPIRED: SUBSCRIPTION_EXPIRED:
'your subscription has expired, please renew it form the mobile app', 'your subscription has expired, please renew it form the mobile app',
STORAGE_QUOTA_EXCEEDED: STORAGE_QUOTA_EXCEEDED:
'you have exceeded your storage quota, please upgrade your plan from the mobile app', 'you have exceeded your storage quota, please upgrade your plan from the mobile app',
INITIAL_LOAD_DELAY_WARNING: 'the first load may take some time', INITIAL_LOAD_DELAY_WARNING: 'the first load may take some time',
WEB_SIGNUPS_DISABLED: () => (
<div>
sorry signups are possibly only on the{' '}
<a href="https://ente.io/app" target="_blank">
mobile app
</a>
</div>
),
USER_DOES_NOT_EXIST: 'sorry, could not find a user with that email', USER_DOES_NOT_EXIST: 'sorry, could not find a user with that email',
UPLOAD_BUTTON_TEXT: 'upload', UPLOAD_BUTTON_TEXT: 'upload',
NO_ACCOUNT: "don't have an account?", NO_ACCOUNT: "don't have an account?",
@ -85,6 +77,20 @@ const englishConstants = {
NO_INTERNET_CONNECTION: NO_INTERNET_CONNECTION:
'please check your internet connection and try again', 'please check your internet connection and try again',
TITLE: 'ente.io | encrypted photo storage', TITLE: 'ente.io | encrypted photo storage',
UPLOAD_FIRST_PHOTO: 'backup your first photo',
INSTALL_MOBILE_APP: () => (
<div>
install our{' '}
<a href="https://play.google.com/store/apps/details?id=io.ente.photos" target="_blank">
android
</a>{' '}
or{' '}
<a href="https://apps.apple.com/in/app/ente-photos/id1542026904" target="_blank">
ios app{' '}
</a>
to automatically backup all your photos
</div>
),
LOGOUT: 'logout', LOGOUT: 'logout',
LOGOUT_WARNING: 'sure you want to logout?', LOGOUT_WARNING: 'sure you want to logout?',
CANCEL: 'cancel', CANCEL: 'cancel',