[auth] HTML export fixes (#4449)

This commit is contained in:
Neeraj Gupta 2024-12-20 15:45:45 +05:30 committed by GitHub
commit 65e1745aa0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 139 additions and 111 deletions

View File

@ -458,7 +458,6 @@
"pinnedCodeMessage": "{code} has been pinned", "pinnedCodeMessage": "{code} has been pinned",
"unpinnedCodeMessage": "{code} has been unpinned", "unpinnedCodeMessage": "{code} has been unpinned",
"pinned": "Pinned", "pinned": "Pinned",
"tags": "Tags", "tags": "Tags",
"createNewTag": "Create New Tag", "createNewTag": "Create New Tag",
"tag": "Tag", "tag": "Tag",
@ -502,5 +501,6 @@
"deduplicateCodes": "Deduplicate codes", "deduplicateCodes": "Deduplicate codes",
"deselectAll": "Deselect all", "deselectAll": "Deselect all",
"selectAll": "Select all", "selectAll": "Select all",
"deleteDuplicates": "Delete duplicates" "deleteDuplicates": "Delete duplicates",
"plainHTML": "Plain HTML"
} }

View File

@ -39,9 +39,9 @@ Future<void> handleExportClick(BuildContext context) async {
isInAlert: true, isInAlert: true,
buttonAction: ButtonAction.second, buttonAction: ButtonAction.second,
), ),
const ButtonWidget( ButtonWidget(
buttonType: ButtonType.secondary, buttonType: ButtonType.secondary,
labelText: "HTML", labelText: context.l10n.plainHTML,
buttonSize: ButtonSize.large, buttonSize: ButtonSize.large,
isInAlert: true, isInAlert: true,
buttonAction: ButtonAction.third, buttonAction: ButtonAction.third,

View File

@ -33,29 +33,29 @@ Future<String> generateQRImageBase64(String data) async {
return base64Encode(pngBytes); return base64Encode(pngBytes);
} }
Future<String> generateOTPEntryHtml( Future<String> generateOTPEntryHtml(Code code, BuildContext context) async {
Code code,
BuildContext context,
) async {
final qrBase64 = await generateQRImageBase64(code.rawData); final qrBase64 = await generateQRImageBase64(code.rawData);
String notes = code.display.note; String notes = code.display.note;
if (notes.isNotEmpty) { if (notes.isNotEmpty) {
notes = '<p>Note: <b>$notes</b></p>'; notes = '<p class="group">Note: <b>$notes</b></p>';
} }
return ''' return '''
<div class="otp-entry"> <table class="otp-entry">
<div> <tr>
<td>
<p><b>${code.issuer}</b></p> <p><b>${code.issuer}</b></p>
<p><b>${code.account}</b></p> <p><b>${code.account}</b></p>
<br /> <p class="group">Type: <b>${code.type.name}</b></p>
<p>Type: <b>${code.type.name}</b></p>
<p>Algorithm: <b>${code.algorithm.name}</b></p> <p>Algorithm: <b>${code.algorithm.name}</b></p>
<p>Digits: <b>${code.digits}</b></p> <p>Digits: <b>${code.digits}</b></p>
<p>Recovery Code: <b>${code.secret}</b></p> <p>Recovery Code: <b>${code.secret}</b></p>
$notes $notes
</div> </td>
<td class="otp-qr">
<img src="data:image/png;base64,$qrBase64" alt="QR Code"> <img src="data:image/png;base64,$qrBase64" alt="QR Code">
</div> </td>
</tr>
</table>
<br/> <br/>
<hr class="red-separator" /> <hr class="red-separator" />
<br/> <br/>
@ -96,7 +96,6 @@ Future<String> generateHtml(BuildContext context) async {
table { table {
width: 100%; width: 100%;
border: 1px solid #ddd;
} }
table td { table td {
@ -155,12 +154,17 @@ Future<String> generateHtml(BuildContext context) async {
} }
@media screen and (max-width: 700px) { @media screen and (max-width: 700px) {
.wrap { .otp-entry {
max-width: auto; display: block;
} }
.gutter { .otp-entry td {
padding: 10px; display: block;
width: 100%;
}
.otp-qr img {
margin-top: 10px;
} }
} }
@ -170,25 +174,49 @@ Future<String> generateHtml(BuildContext context) async {
} }
.otp-entry { .otp-entry {
display: flex; width: 100%;
align-items: center; table-layout: fixed;
justify-content: space-between; border-collapse: collapse;
} }
.otp-entry div { .otp-entry td {
flex: 1; padding: 20px;
margin: 0px;
vertical-align: middle;
}
.otp-entry td:first-child {
width: 70%;
word-wrap: break-word;
overflow-wrap: break-word;
}
.otp-qr img {
max-width: 200px;
height: auto;
display: block;
margin: 0 auto;
}
.otp-entry td.otp-qr {
width: 30%;
text-align: center;
vertical-align: middle;
} }
.otp-entry p { .otp-entry p {
margin: 2px 0; margin: 2px 0;
} }
.otp-entry p.group {
margin-top: 15px;
}
hr.red-separator { hr.red-separator {
border: none; border: none;
height: 1px; height: 1px;
background-color: rgb(173, 0, 255); background-color: rgb(173, 0, 255);
} }
</style> </style>
</head> </head>
<body> <body>