Update styles for auth (#1054)
This commit is contained in:
Neeraj Gupta
GitHub
commit
6e0856e02c
|
|
@ -200,6 +200,7 @@
|
|||
"CREATE_ALBUM_FAILED": "Failed to create album , please try again",
|
||||
"SEARCH": "Search",
|
||||
"SEARCH_RESULTS": "Search results",
|
||||
"NO_RESULTS": "No results found",
|
||||
"SEARCH_HINT": "Search for albums, dates ...",
|
||||
"SEARCH_TYPE": {
|
||||
"COLLECTION": "Album",
|
||||
|
|
@ -514,6 +515,6 @@
|
|||
"FEEDBACK_REQUIRED_FOUND_ANOTHER_SERVICE": "What does the other service do better?",
|
||||
"RECOVER_TWO_FACTOR": "Recover two-factor",
|
||||
"at": "at",
|
||||
"AUTHENTICATOR_TITLE": "ente Authenticator",
|
||||
"DOWNLOAD_AUTH_MOBILE_APP": "Download our mobile app to add & manage your secrets."
|
||||
"AUTH_NEXT": "next",
|
||||
"AUTH_DOWNLOAD_MOBILE_APP": "Download our mobile app to manage your secrets"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export const AuthFooter = () => {
|
|||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}>
|
||||
<p>{t('DOWNLOAD_AUTH_MOBILE_APP')}</p>
|
||||
<p>{t('AUTH_DOWNLOAD_MOBILE_APP')}</p>
|
||||
<a href="https://github.com/ente-io/auth#-download" download>
|
||||
<Button
|
||||
style={{
|
||||
|
|
@ -2,12 +2,14 @@ import React, { useState, useEffect } from 'react';
|
|||
import { TOTP, HOTP } from 'otpauth';
|
||||
import { Code } from 'types/authenticator/code';
|
||||
import TimerProgress from './TimerProgress';
|
||||
import { t } from 'i18next';
|
||||
import { ButtonBase, Snackbar } from '@mui/material';
|
||||
|
||||
const TOTPDisplay = ({ issuer, account, code, nextCode }) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: '4px 16px',
|
||||
padding: '12px 20px 0px 20px',
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
minWidth: '320px',
|
||||
|
|
@ -36,6 +38,8 @@ const TOTPDisplay = ({ issuer, account, code, nextCode }) => {
|
|||
marginBottom: '8px',
|
||||
textAlign: 'left',
|
||||
fontSize: '12px',
|
||||
maxWidth: '200px',
|
||||
color: 'grey',
|
||||
}}>
|
||||
{account}
|
||||
</p>
|
||||
|
|
@ -53,10 +57,11 @@ const TOTPDisplay = ({ issuer, account, code, nextCode }) => {
|
|||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
marginTop: '32px',
|
||||
alignItems: 'flex-end',
|
||||
minWidth: '120px',
|
||||
textAlign: 'right',
|
||||
marginTop: 'auto',
|
||||
marginBottom: '1rem',
|
||||
}}>
|
||||
<p
|
||||
style={{
|
||||
|
|
@ -65,8 +70,9 @@ const TOTPDisplay = ({ issuer, account, code, nextCode }) => {
|
|||
fontSize: '10px',
|
||||
marginTop: 'auto',
|
||||
textAlign: 'right',
|
||||
color: 'grey',
|
||||
}}>
|
||||
next
|
||||
{t('AUTH_NEXT')}
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
|
|
@ -75,6 +81,7 @@ const TOTPDisplay = ({ issuer, account, code, nextCode }) => {
|
|||
marginBottom: '0px',
|
||||
marginTop: 'auto',
|
||||
textAlign: 'right',
|
||||
color: 'grey',
|
||||
}}>
|
||||
{nextCode}
|
||||
</p>
|
||||
|
|
@ -112,6 +119,7 @@ const OTPDisplay = (props: OTPDisplayProps) => {
|
|||
const [code, setCode] = useState('');
|
||||
const [nextCode, setNextCode] = useState('');
|
||||
const [codeErr, setCodeErr] = useState('');
|
||||
const [hasCopied, setHasCopied] = useState(false);
|
||||
|
||||
const generateCodes = () => {
|
||||
try {
|
||||
|
|
@ -143,6 +151,14 @@ const OTPDisplay = (props: OTPDisplayProps) => {
|
|||
}
|
||||
};
|
||||
|
||||
const copyCode = () => {
|
||||
navigator.clipboard.writeText(code);
|
||||
setHasCopied(true);
|
||||
setTimeout(() => {
|
||||
setHasCopied(false);
|
||||
}, 2000);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// this is to set the initial code and nextCode on component mount
|
||||
generateCodes();
|
||||
|
|
@ -174,12 +190,22 @@ const OTPDisplay = (props: OTPDisplayProps) => {
|
|||
<div style={{ padding: '8px' }}>
|
||||
<TimerProgress period={codeInfo.period ?? Code.defaultPeriod} />
|
||||
{codeErr === '' ? (
|
||||
<TOTPDisplay
|
||||
issuer={codeInfo.issuer}
|
||||
account={codeInfo.account}
|
||||
code={code}
|
||||
nextCode={nextCode}
|
||||
/>
|
||||
<ButtonBase
|
||||
component="div"
|
||||
onClick={() => {
|
||||
copyCode();
|
||||
}}>
|
||||
<TOTPDisplay
|
||||
issuer={codeInfo.issuer}
|
||||
account={codeInfo.account}
|
||||
code={code}
|
||||
nextCode={nextCode}
|
||||
/>
|
||||
<Snackbar
|
||||
open={hasCopied}
|
||||
message="Code copied to clipboard"
|
||||
/>
|
||||
</ButtonBase>
|
||||
) : (
|
||||
<BadCodeInfo codeInfo={codeInfo} codeErr={codeErr} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ const NavbarBase = styled(FlexWrapper)`
|
|||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
z-index: 10;
|
||||
border-bottom: 1px solid ${({ theme }) => theme.palette.divider};
|
||||
background-color: ${({ theme }) => theme.colors.background.base};
|
||||
margin-bottom: 16px;
|
||||
|
|
|
|||
|
|
@ -4,15 +4,19 @@ import { getAuthCodes } from 'services/authenticator/authenticatorService';
|
|||
import { CustomError } from 'utils/error';
|
||||
import { PAGES } from 'constants/pages';
|
||||
import { useRouter } from 'next/router';
|
||||
import { AuthFooter } from 'components/Authenicator/AuthFooder';
|
||||
import { AuthFooter } from 'components/Authenicator/AuthFooter';
|
||||
import { AppContext } from 'pages/_app';
|
||||
import { TextField } from '@mui/material';
|
||||
import AuthNavbar from 'components/pages/auth/Navbar';
|
||||
import { t } from 'i18next';
|
||||
import EnteSpinner from 'components/EnteSpinner';
|
||||
import VerticallyCentered from 'components/Container';
|
||||
|
||||
const AuthenticatorCodesPage = () => {
|
||||
const appContext = useContext(AppContext);
|
||||
const router = useRouter();
|
||||
const [codes, setCodes] = useState([]);
|
||||
const [hasFetched, setHasFetched] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -28,6 +32,7 @@ const AuthenticatorCodesPage = () => {
|
|||
// do not log errors
|
||||
}
|
||||
}
|
||||
setHasFetched(true);
|
||||
};
|
||||
fetchCodes();
|
||||
appContext.showNavBar(false);
|
||||
|
|
@ -43,6 +48,17 @@ const AuthenticatorCodesPage = () => {
|
|||
.includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
if (!hasFetched) {
|
||||
return (
|
||||
<>
|
||||
<VerticallyCentered>
|
||||
<EnteSpinner></EnteSpinner>
|
||||
</VerticallyCentered>
|
||||
;
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<AuthNavbar />
|
||||
|
|
@ -53,16 +69,18 @@ const AuthenticatorCodesPage = () => {
|
|||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
}}>
|
||||
<div style={{ marginBottom: '2rem' }} />
|
||||
<h2>{t('AUTHENTICATOR_TITLE')}</h2>
|
||||
<div style={{ marginBottom: '1rem' }} />
|
||||
{filteredCodes.length === 0 && searchTerm.length === 0 ? (
|
||||
<></>
|
||||
) : (
|
||||
<input
|
||||
type="text"
|
||||
placeholder={t('SEARCH')}
|
||||
value={searchTerm}
|
||||
<TextField
|
||||
id="search"
|
||||
name="search"
|
||||
label={t('SEARCH')}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
variant="filled"
|
||||
value={searchTerm}
|
||||
autoFocus
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -76,7 +94,7 @@ const AuthenticatorCodesPage = () => {
|
|||
marginTop: '32px',
|
||||
}}>
|
||||
{searchTerm.length !== 0 ? (
|
||||
<p>No results found.</p>
|
||||
<p>{t('NO_RESULTS')}</p>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in a new issue