Merge branch 'master' into dedupe-upload
This commit is contained in:
commit
4f9e0bd66f
|
@ -1,18 +1,12 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import Container from 'components/Container';
|
import Container from 'components/Container';
|
||||||
import styled from 'styled-components';
|
|
||||||
import Card from 'react-bootstrap/Card';
|
import Card from 'react-bootstrap/Card';
|
||||||
import Form from 'react-bootstrap/Form';
|
import Form from 'react-bootstrap/Form';
|
||||||
import Button from 'react-bootstrap/Button';
|
import Button from 'react-bootstrap/Button';
|
||||||
import constants from 'utils/strings/constants';
|
import constants from 'utils/strings/constants';
|
||||||
import { Formik, FormikHelpers } from 'formik';
|
import { Formik, FormikHelpers } from 'formik';
|
||||||
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
|
||||||
import { useRouter } from 'next/router';
|
|
||||||
import * as Yup from 'yup';
|
import * as Yup from 'yup';
|
||||||
import { KeyAttributes } from 'types';
|
import SubmitButton from './SubmitButton';
|
||||||
import CryptoWorker, { setSessionKeys } from 'utils/crypto';
|
|
||||||
import { Spinner } from 'react-bootstrap';
|
|
||||||
import { propTypes } from 'react-bootstrap/esm/Image';
|
|
||||||
|
|
||||||
interface formValues {
|
interface formValues {
|
||||||
passphrase: string;
|
passphrase: string;
|
||||||
|
@ -83,13 +77,11 @@ export default function PassPhraseForm(props: Props) {
|
||||||
{errors.passphrase}
|
{errors.passphrase}
|
||||||
</Form.Control.Feedback>
|
</Form.Control.Feedback>
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
<Button block type="submit" disabled={loading}>
|
<SubmitButton
|
||||||
{loading ? (
|
buttonText={props.buttonText}
|
||||||
<Spinner animation="border" />
|
loading={loading}
|
||||||
) : (
|
/>
|
||||||
props.buttonText
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
<br />
|
<br />
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
|
|
|
@ -8,6 +8,7 @@ import { Formik, FormikHelpers } from 'formik';
|
||||||
import * as Yup from 'yup';
|
import * as Yup from 'yup';
|
||||||
import Button from 'react-bootstrap/Button';
|
import Button from 'react-bootstrap/Button';
|
||||||
import { Spinner } from 'react-bootstrap';
|
import { Spinner } from 'react-bootstrap';
|
||||||
|
import SubmitButton from './SubmitButton';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
callback: (passphrase: any, setFieldError: any) => Promise<void>;
|
callback: (passphrase: any, setFieldError: any) => Promise<void>;
|
||||||
|
@ -107,18 +108,10 @@ function SetPassword(props: Props) {
|
||||||
{errors.confirm}
|
{errors.confirm}
|
||||||
</Form.Control.Feedback>
|
</Form.Control.Feedback>
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
<Button
|
<SubmitButton
|
||||||
type="submit"
|
buttonText={props.buttonText}
|
||||||
block
|
loading={loading}
|
||||||
disabled={loading}
|
/>
|
||||||
style={{ marginTop: '28px' }}
|
|
||||||
>
|
|
||||||
{loading ? (
|
|
||||||
<Spinner animation="border" />
|
|
||||||
) : (
|
|
||||||
props.buttonText
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
|
|
|
@ -165,7 +165,7 @@ export default function Sidebar(props: Props) {
|
||||||
style={{
|
style={{
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
color: '#F96C6C',
|
color: '#F96C6C',
|
||||||
marginTop: '30px',
|
margin: '30px 0',
|
||||||
}}
|
}}
|
||||||
onClick={() => props.setConfirmAction(CONFIRM_ACTION.LOGOUT)}
|
onClick={() => props.setConfirmAction(CONFIRM_ACTION.LOGOUT)}
|
||||||
>
|
>
|
||||||
|
|
31
src/components/SubmitButton.tsx
Normal file
31
src/components/SubmitButton.tsx
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Button, Spinner } from 'react-bootstrap';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
loading: boolean;
|
||||||
|
buttonText: string;
|
||||||
|
}
|
||||||
|
const SubmitButton = ({ loading, buttonText }: Props) => (
|
||||||
|
<Button
|
||||||
|
variant="success"
|
||||||
|
type="submit"
|
||||||
|
block
|
||||||
|
disabled={loading}
|
||||||
|
style={{ padding: '0', height: '40px' }}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<Spinner
|
||||||
|
as="span"
|
||||||
|
style={{
|
||||||
|
height: '35px',
|
||||||
|
width: '35px',
|
||||||
|
}}
|
||||||
|
animation="border"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
buttonText
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default SubmitButton;
|
|
@ -110,15 +110,15 @@ const GlobalStyles = createGlobalStyle`
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
.btn-primary {
|
.btn-success {
|
||||||
background: #2dc262;
|
background: #2dc262;
|
||||||
border-color: #29a354;
|
border-color: #29a354;
|
||||||
}
|
}
|
||||||
.btn-primary:hover {
|
.btn-success:hover ,.btn-success:focus .btn-success:active{
|
||||||
background-color: #29a354;
|
background-color: #29a354;
|
||||||
border-color: #2dc262;
|
border-color: #2dc262;
|
||||||
}
|
}
|
||||||
.btn-primary:disabled {
|
.btn-success:disabled {
|
||||||
background-color: #69b383;
|
background-color: #69b383;
|
||||||
}
|
}
|
||||||
.btn-outline-success {
|
.btn-outline-success {
|
||||||
|
@ -129,13 +129,7 @@ const GlobalStyles = createGlobalStyle`
|
||||||
.btn-outline-success:hover {
|
.btn-outline-success:hover {
|
||||||
background: #2dc262;
|
background: #2dc262;
|
||||||
}
|
}
|
||||||
.btn-outline-danger {
|
.btn-outline-danger, .btn-outline-secondary, .btn-outline-primary{
|
||||||
border-width: 2px;
|
|
||||||
}
|
|
||||||
.btn-outline-secondary {
|
|
||||||
border-width: 2px;
|
|
||||||
}
|
|
||||||
.btn-outline-primary {
|
|
||||||
border-width: 2px;
|
border-width: 2px;
|
||||||
}
|
}
|
||||||
.card {
|
.card {
|
||||||
|
@ -263,7 +257,7 @@ export default function App({ Component, pageProps, err }) {
|
||||||
</Navbar>
|
</Navbar>
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<Container>
|
<Container>
|
||||||
<Spinner animation="border" role="status" variant="primary">
|
<Spinner animation="border" role="status" variant="success">
|
||||||
<span className="sr-only">Loading...</span>
|
<span className="sr-only">Loading...</span>
|
||||||
</Spinner>
|
</Spinner>
|
||||||
</Container>
|
</Container>
|
||||||
|
|
|
@ -60,6 +60,7 @@ const Container = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
|
||||||
.pswp-thumbnail {
|
.pswp-thumbnail {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -10,6 +10,7 @@ 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 SubmitButton from 'components/SubmitButton';
|
||||||
interface formValues {
|
interface formValues {
|
||||||
email: string;
|
email: string;
|
||||||
}
|
}
|
||||||
|
@ -88,18 +89,14 @@ export default function Home() {
|
||||||
{errors.email}
|
{errors.email}
|
||||||
</FormControl.Feedback>
|
</FormControl.Feedback>
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
<Button
|
<SubmitButton
|
||||||
variant="primary"
|
buttonText={constants.LOGIN}
|
||||||
type="submit"
|
loading={loading}
|
||||||
block
|
/>
|
||||||
disabled={loading}
|
|
||||||
style={{ marginBottom: '12px' }}
|
|
||||||
>
|
|
||||||
{constants.LOGIN}
|
|
||||||
</Button>
|
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
|
<br />
|
||||||
<Card.Link
|
<Card.Link
|
||||||
href="#"
|
href="#"
|
||||||
onClick={register}
|
onClick={register}
|
||||||
|
|
|
@ -11,6 +11,7 @@ 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 { DisclaimerContainer } from 'components/Container';
|
import { DisclaimerContainer } from 'components/Container';
|
||||||
|
import SubmitButton from 'components/SubmitButton';
|
||||||
|
|
||||||
interface FormValues {
|
interface FormValues {
|
||||||
name: string;
|
name: string;
|
||||||
|
@ -105,14 +106,11 @@ export default function Home() {
|
||||||
<DisclaimerContainer>
|
<DisclaimerContainer>
|
||||||
{constants.DATA_DISCLAIMER}
|
{constants.DATA_DISCLAIMER}
|
||||||
</DisclaimerContainer>
|
</DisclaimerContainer>
|
||||||
<Button
|
|
||||||
variant="primary"
|
<SubmitButton
|
||||||
type="submit"
|
buttonText={constants.SUBMIT}
|
||||||
block
|
loading={loading}
|
||||||
disabled={loading}
|
/>
|
||||||
>
|
|
||||||
{constants.SUBMIT}
|
|
||||||
</Button>
|
|
||||||
</Form>
|
</Form>
|
||||||
)}
|
)}
|
||||||
</Formik>
|
</Formik>
|
||||||
|
|
|
@ -17,6 +17,7 @@ import {
|
||||||
isTokenValid,
|
isTokenValid,
|
||||||
} from 'services/userService';
|
} from 'services/userService';
|
||||||
import { setIsFirstLogin } from 'utils/storage';
|
import { setIsFirstLogin } from 'utils/storage';
|
||||||
|
import SubmitButton from 'components/SubmitButton';
|
||||||
|
|
||||||
const Image = styled.img`
|
const Image = styled.img`
|
||||||
width: 350px;
|
width: 350px;
|
||||||
|
@ -145,9 +146,10 @@ export default function Verify() {
|
||||||
{errors.ott}
|
{errors.ott}
|
||||||
</Form.Control.Feedback>
|
</Form.Control.Feedback>
|
||||||
</Form.Group>
|
</Form.Group>
|
||||||
<Button type="submit" block disabled={loading}>
|
<SubmitButton
|
||||||
{constants.VERIFY}
|
buttonText={constants.VERIFY}
|
||||||
</Button>
|
loading={loading}
|
||||||
|
/>
|
||||||
<br />
|
<br />
|
||||||
{resend === 0 && (
|
{resend === 0 && (
|
||||||
<a href="#" onClick={resendEmail}>
|
<a href="#" onClick={resendEmail}>
|
||||||
|
|
Loading…
Reference in a new issue