diff --git a/public/vault.png b/public/vault.png new file mode 100644 index 000000000..eef80791d Binary files /dev/null and b/public/vault.png differ diff --git a/public/vault.svg b/public/vault.svg deleted file mode 100644 index 21ae7596f..000000000 --- a/public/vault.svg +++ /dev/null @@ -1 +0,0 @@ -vault \ No newline at end of file diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index bfe42eeaf..c53740ae6 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -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` diff --git a/src/pages/gallery/components/Collections.tsx b/src/pages/gallery/components/Collections.tsx index b1c67e018..639f36fe4 100644 --- a/src/pages/gallery/components/Collections.tsx +++ b/src/pages/gallery/components/Collections.tsx @@ -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 ; + } return ( diff --git a/src/pages/gallery/components/UploadProgress.tsx b/src/pages/gallery/components/UploadProgress.tsx index abb7a38b5..3bedb3c85 100644 --- a/src/pages/gallery/components/UploadProgress.tsx +++ b/src/pages/gallery/components/UploadProgress.tsx @@ -20,7 +20,7 @@ export default function UploadProgress({ > - Uploading Files + {constants.UPLOADING_FILES} diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx index 1f916fb5f..09a1fbe4f 100644 --- a/src/pages/gallery/index.tsx +++ b/src/pages/gallery/index.tsx @@ -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) { {isFirstLoad && (
- + {constants.INITIAL_LOAD_DELAY_WARNING}
@@ -340,7 +350,17 @@ export default function Gallery(props) { refetchData={syncWithRemote} setBannerErrorCode={setBannerErrorCode} /> - {filteredData.length ? ( + {!isFirstLoad && data.length == 0 ? ( + + vault + + + ) : filteredData.length ? ( {({ height, width }) => { @@ -413,7 +433,7 @@ export default function Gallery(props) { 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 ? ( { timeStampList[ @@ -456,7 +476,7 @@ export default function Gallery(props) { index ] .itemStartIndex + - idx + idx ); } ) @@ -485,6 +505,14 @@ export default function Gallery(props) {
{constants.NOTHING_HERE}
)} + {data.length < 30 && ( + + {constants.INSTALL_MOBILE_APP()} + + )} ); } diff --git a/src/pages/generate/index.tsx b/src/pages/generate/index.tsx index cfdab5651..814494764 100644 --- a/src/pages/generate/index.tsx +++ b/src/pages/generate/index.tsx @@ -109,10 +109,10 @@ export default function Generate() { return ( - vault - + {/* vault */} + -
+

{constants.ENTER_ENC_PASSPHRASE}

{constants.PASSPHRASE_DISCLAIMER()}
@@ -137,15 +137,16 @@ export default function Generate() {
@@ -154,7 +155,7 @@ export default function Generate() { -
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ecfa9d845..66e7e7dcc 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -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 ( - <> -
- {constants.WEB_SIGNUPS_DISABLED()} -
- - - - - - {constants.LOGIN} - - - initialValues={{ email: '' }} - validationSchema={Yup.object().shape({ - email: Yup.string() - .email(constants.EMAIL_ERROR) - .required(constants.REQUIRED), - })} - onSubmit={loginUser} - > - {({ - values, - errors, - touched, - handleChange, - handleBlur, - handleSubmit, - }) => ( -
- - - - {errors.email} - - - -
- )} - - - {constants.NO_ACCOUNT} - - - - - + /> + + {errors.email} + + + + + )} + + + {constants.NO_ACCOUNT} + + + + ); } diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index cc7d1479e..f2af9fd2e 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -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: () => ( -
- sorry signups are possibly only on the{' '} - - mobile app - -
- ), 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: () => ( +
+ install our{' '} + + android + {' '} + or{' '} + + ios app{' '} + + to automatically backup all your photos +
+ ), LOGOUT: 'logout', LOGOUT_WARNING: 'sure you want to logout?', CANCEL: 'cancel',