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;
border: none;
}
.btn-primary {
.btn-primary ,.btn:focus {
background: #2dc262;
border-color: #29a354;
padding: 8px;
@ -135,6 +135,18 @@ const GlobalStyles = createGlobalStyle`
color: #fff;
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`

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) {
const { selected, collections, selectCollection } = props;
const clickHandler = (id?: number) => () => selectCollection(id);
if (collections.length == 0) {
return <Container />;
}
return (
<Container>
<Wrapper>

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

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

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

@ -23,7 +23,7 @@ import {
} from 'services/collectionService';
import constants from 'utils/strings/constants';
import AlertBanner from './components/AlertBanner';
import { Alert } from 'react-bootstrap';
import { Alert, Button, Jumbotron } from 'react-bootstrap';
const DATE_CONTAINER_HEIGHT = 45;
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`
padding-top: 15px;
`;
@ -320,7 +330,7 @@ export default function Gallery(props) {
<LoadingBar color="#2dc262" ref={loadingBar} />
{isFirstLoad && (
<div className="text-center">
<Alert variant="primary">
<Alert variant="success">
{constants.INITIAL_LOAD_DELAY_WARNING}
</Alert>
</div>
@ -340,7 +350,17 @@ export default function Gallery(props) {
refetchData={syncWithRemote}
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>
<AutoSizer>
{({ height, width }) => {
@ -413,7 +433,7 @@ export default function Gallery(props) {
<List
itemSize={(index) =>
timeStampList[index].itemType ===
ITEM_TYPE.TIME
ITEM_TYPE.TIME
? DATE_CONTAINER_HEIGHT
: IMAGE_CONTAINER_HEIGHT
}
@ -430,14 +450,14 @@ export default function Gallery(props) {
columns={
timeStampList[index]
.itemType ===
ITEM_TYPE.TIME
ITEM_TYPE.TIME
? 1
: columns
}
>
{timeStampList[index]
.itemType ===
ITEM_TYPE.TIME ? (
ITEM_TYPE.TIME ? (
<DateContainer>
{
timeStampList[
@ -456,7 +476,7 @@ export default function Gallery(props) {
index
]
.itemStartIndex +
idx
idx
);
}
)
@ -485,6 +505,14 @@ export default function Gallery(props) {
<div>{constants.NOTHING_HERE}</div>
</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 (
<Container>
<Image alt="vault" src="/vault.svg" />
<Card>
{/* <Image alt="vault" src="/vault.png" style={{ paddingBottom: '40px' }} /> */}
<Card style={{ maxWidth: '540px', padding: '20px' }}>
<Card.Body>
<div className="text-center">
<div className="text-center" style={{ marginBottom: '40px' }}>
<p>{constants.ENTER_ENC_PASSPHRASE}</p>
{constants.PASSPHRASE_DISCLAIMER()}
</div>
@ -137,15 +137,16 @@ export default function Generate() {
<Form noValidate onSubmit={handleSubmit}>
<Form.Group>
<Form.Control
type="text"
type="password"
placeholder={constants.PASSPHRASE_HINT}
value={values.passphrase}
onChange={handleChange('passphrase')}
onBlur={handleBlur('passphrase')}
isInvalid={Boolean(
touched.passphrase &&
errors.passphrase
errors.passphrase
)}
autoFocus={true}
disabled={loading}
/>
<Form.Control.Feedback type="invalid">
@ -154,7 +155,7 @@ export default function Generate() {
</Form.Group>
<Form.Group>
<Form.Control
type="text"
type="password"
placeholder={
constants.PASSPHRASE_CONFIRM
}
@ -170,7 +171,7 @@ export default function Generate() {
{errors.confirm}
</Form.Control.Feedback>
</Form.Group>
<Button type="submit" block disabled={loading}>
<Button type="submit" block disabled={loading} style={{ marginTop: '28px' }}>
{constants.SET_PASSPHRASE}
</Button>
</Form>

145
src/pages/index.tsx
View file

@ -10,8 +10,6 @@ import * as Yup from 'yup';
import { getOtt } from 'services/userService';
import Container from 'components/Container';
import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
import { Alert } from 'react-bootstrap';
interface formValues {
email: string;
}
@ -19,7 +17,6 @@ interface formValues {
export default function Home() {
const [loading, setLoading] = useState(false);
const router = useRouter();
const [showMessage, setShowMessage] = useState(false);
useEffect(() => {
router.prefetch('/verify');
@ -40,92 +37,78 @@ export default function Home() {
setData(LS_KEYS.USER, { email });
router.push('/verify');
} catch (e) {
if (e.response.status == 403) {
setFieldError('email', `${constants.USER_DOES_NOT_EXIST}`);
} else {
setFieldError(
'email',
`${constants.UNKNOWN_ERROR} ${e.message}`
);
}
setFieldError('email', `${constants.UNKNOWN_ERROR} ${e.message}`);
}
setLoading(false);
};
const register = () => {
setShowMessage(true);
setTimeout(() => setShowMessage(false), 15000);
router.push('/signup');
};
return (
<>
<div style={{ display: showMessage ? 'block' : 'none', textAlign: 'center' }}>
<Alert variant="warning">{constants.WEB_SIGNUPS_DISABLED()}</Alert>
</div>
<Container>
<Card style={{ minWidth: '320px' }} className="text-center">
<Card.Body style={{ padding: '40px 30px' }}>
<Card.Title style={{ marginBottom: '32px' }}>
{constants.LOGIN}
</Card.Title>
<Formik<formValues>
initialValues={{ email: '' }}
validationSchema={Yup.object().shape({
email: Yup.string()
.email(constants.EMAIL_ERROR)
.required(constants.REQUIRED),
})}
onSubmit={loginUser}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="formBasicEmail">
<Form.Control
type="email"
placeholder={constants.ENTER_EMAIL}
value={values.email}
onChange={handleChange('email')}
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
<Container>
<Card style={{ minWidth: '320px' }} className="text-center">
<Card.Body style={{ padding: '40px 30px' }}>
<Card.Title style={{ marginBottom: '32px' }}>
{constants.LOGIN}
</Card.Title>
<Formik<formValues>
initialValues={{ email: '' }}
validationSchema={Yup.object().shape({
email: Yup.string()
.email(constants.EMAIL_ERROR)
.required(constants.REQUIRED),
})}
onSubmit={loginUser}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
}) => (
<Form noValidate onSubmit={handleSubmit}>
<Form.Group controlId="formBasicEmail">
<Form.Control
type="email"
placeholder={constants.ENTER_EMAIL}
value={values.email}
onChange={handleChange('email')}
onBlur={handleBlur('email')}
isInvalid={Boolean(
touched.email && errors.email
)}
autoFocus={true}
disabled={loading}
style={{ marginBottom: '12px' }}
>
{constants.LOGIN}
</Button>
</Form>
)}
</Formik>
<Card.Link
href="#"
onClick={register}
style={{ fontSize: '14px' }}
>
{constants.NO_ACCOUNT}
</Card.Link>
</Card.Body>
</Card>
</Container>
</>
/>
<FormControl.Feedback type="invalid">
{errors.email}
</FormControl.Feedback>
</Form.Group>
<Button
variant="primary"
type="submit"
block
disabled={loading}
style={{ marginBottom: '12px' }}
>
{constants.LOGIN}
</Button>
</Form>
)}
</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',
3: 'files uploaded successfully!',
},
UPLOADING_FILES: `uploading files`,
OF: 'of',
SUBSCRIPTION_EXPIRED:
'your subscription has expired, please renew it form the mobile app',
STORAGE_QUOTA_EXCEEDED:
'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',
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',
UPLOAD_BUTTON_TEXT: 'upload',
NO_ACCOUNT: "don't have an account?",
@ -85,6 +77,20 @@ const englishConstants = {
NO_INTERNET_CONNECTION:
'please check your internet connection and try again',
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_WARNING: 'sure you want to logout?',
CANCEL: 'cancel',