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

Re enable web signups

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`

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 <Container />;
+    }
     return (
         <Container>
             <Wrapper>

src/pages/gallery/components/UploadProgress.tsx

@@ -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>

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) {
             <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 }) => {
@@ -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>
+            )}
         </>
     );
 }

src/pages/generate/index.tsx

@@ -109,10 +109,10 @@ export default function Generate() {
 
     return (
         <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>
-                    <div className="text-center">
+                    <div className="text-center" style={{ marginBottom: '40px' }}>
                         <p>{constants.ENTER_ENC_PASSPHRASE}</p>
                         {constants.PASSPHRASE_DISCLAIMER()}
                     </div>
@@ -137,7 +137,7 @@ 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')}
@@ -146,6 +146,7 @@ export default function Generate() {
                                             touched.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>

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,29 +37,16 @@ export default function Home() {
             setData(LS_KEYS.USER, { email });
             router.push('/verify');
         } 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);
     };
 
     const register = () => {
-        setShowMessage(true);
+        router.push('/signup');
-        setTimeout(() => setShowMessage(false), 15000);
     };
 
     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' }}>
@@ -126,6 +110,5 @@ export default function Home() {
                 </Card.Body>
             </Card>
         </Container>
-        </>
     );
 }

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: () => (
-        <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',