mirror of
https://github.com/HeyPuter/puter
synced 2024-11-14 22:06:00 +00:00
Tweak QR code sizes
This commit is contained in:
KernelDeimos
parent
75bd1bc4c8
commit
099699198c
@ -1,9 +1,16 @@
|
||||
import { Component } from "../../util/Component.js";
|
||||
import UIComponentWindow from "../UIComponentWindow.js";
|
||||
|
||||
export default class QRCodeView extends Component {
|
||||
static PROPERTIES = {
|
||||
value: {
|
||||
description: 'The text to encode in the QR code',
|
||||
},
|
||||
size: {
|
||||
value: 150,
|
||||
},
|
||||
enlarge_option: {
|
||||
value: true,
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,9 +23,13 @@ export default class QRCodeView extends Component {
|
||||
align-items: center;
|
||||
}
|
||||
.qr-code img {
|
||||
width: 150px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.has-enlarge-option {
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: zoom-in
|
||||
}
|
||||
`
|
||||
|
||||
create_template ({ template }) {
|
||||
@ -35,8 +46,36 @@ export default class QRCodeView extends Component {
|
||||
// $(this.dom_).find('.qr-code').empty();
|
||||
new QRCode($(this.dom_).find('.qr-code').get(0), {
|
||||
text: value,
|
||||
// TODO: dynamic size
|
||||
width: this.get('size'),
|
||||
height: this.get('size'),
|
||||
currectLevel: QRCode.CorrectLevel.H,
|
||||
});
|
||||
|
||||
if ( this.get('enlarge_option') ) {
|
||||
$(this.dom_).find('.qr-code img').addClass('has-enlarge-option');
|
||||
$(this.dom_).find('.qr-code img').on('click', async () => {
|
||||
UIComponentWindow({
|
||||
component: new QRCodeView({
|
||||
value: value,
|
||||
size: 400,
|
||||
enlarge_option: false,
|
||||
}),
|
||||
title: i18n('enlarged_qr_code'),
|
||||
backdrop: true,
|
||||
dominant: true,
|
||||
width: 550,
|
||||
height: 'auto',
|
||||
body_css: {
|
||||
width: 'initial',
|
||||
height: '100%',
|
||||
'background-color': 'rgb(245 247 249)',
|
||||
'backdrop-filter': 'blur(3px)',
|
||||
padding: '20px',
|
||||
},
|
||||
})
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,8 +28,6 @@ let checkbox_id_ = 0;
|
||||
async function UIWindowQR(options){
|
||||
const confirmations = options.confirmations || [];
|
||||
|
||||
const promise = new TeePromise();
|
||||
|
||||
options = options ?? {};
|
||||
|
||||
const placeholder_qr = Placeholder();
|
||||
@ -45,54 +43,6 @@ async function UIWindowQR(options){
|
||||
|
||||
h += placeholder_qr.html;
|
||||
|
||||
if ( options.text_alternative ) {
|
||||
h += `<div class="otp-as-text">`;
|
||||
h += `<p style="text-align: center; font-size: 16px; padding: 10px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${
|
||||
html_encode(options.text_alternative)
|
||||
}</p>`;
|
||||
h += `</div>`;
|
||||
}
|
||||
|
||||
if ( options.recovery_codes ) {
|
||||
h += `<div class="recovery-codes">`;
|
||||
h += `<h2 style="text-align: center; font-size: 16px; padding: 10px; font-weight: 400; margin: -10px 10px 20px 10px; -webkit-font-smoothing: antialiased; color: #5f626d;">${
|
||||
i18n('recovery_codes')
|
||||
}</h2>`;
|
||||
h += `<div class="recovery-codes-list">`;
|
||||
for ( let i=0 ; i < options.recovery_codes.length ; i++ ) {
|
||||
h += `<div class="recovery-code">${
|
||||
html_encode(options.recovery_codes[i])
|
||||
}</div>`;
|
||||
}
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
}
|
||||
|
||||
for ( let i=0 ; i < confirmations.length ; i++ ) {
|
||||
const confirmation = confirmations[i];
|
||||
// checkbox
|
||||
h += `<div class="qr-code-checkbox">`;
|
||||
h += `<input type="checkbox" id="checkbox_${++checkbox_id_}" name="confirmation_${i}">`;
|
||||
h += `<label for="checkbox_${checkbox_id_}">${confirmation}</label>`;
|
||||
h += `</div>`;
|
||||
}
|
||||
|
||||
// h += `<button class="code-confirm-btn" style="margin: 20px auto; display: block; width: 100%; padding: 10px; font-size: 16px; font-weight: 400; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer;">${
|
||||
// i18n('confirm')
|
||||
// }</button>`;
|
||||
if ( options.has_confirm_and_cancel ) {
|
||||
h += `<button type="submit" class="button button-block button-primary code-confirm-btn" style="margin-top:10px;" disabled>${
|
||||
i18n('confirm')
|
||||
}</button>`;
|
||||
h += `<button type="submit" class="button button-block button-secondary code-cancel-btn" style="margin-top:10px;">${
|
||||
i18n('cancel')
|
||||
}</button>`;
|
||||
} else {
|
||||
h += `<button type="submit" class="button button-block button-primary code-confirm-btn" style="margin-top:10px;">${
|
||||
i18n('done')
|
||||
}</button>`;
|
||||
}
|
||||
|
||||
const el_window = await UIWindow({
|
||||
title: 'Instant Login!',
|
||||
app: 'instant-login',
|
||||
@ -110,7 +60,7 @@ async function UIWindowQR(options){
|
||||
allow_native_ctxmenu: false,
|
||||
allow_user_select: false,
|
||||
backdrop: true,
|
||||
width: 550,
|
||||
width: 450,
|
||||
height: 'auto',
|
||||
dominant: true,
|
||||
show_in_taskbar: false,
|
||||
@ -123,12 +73,13 @@ async function UIWindowQR(options){
|
||||
height: '100%',
|
||||
'background-color': 'rgb(245 247 249)',
|
||||
'backdrop-filter': 'blur(3px)',
|
||||
padding: '20px',
|
||||
padding: '50px 20px',
|
||||
},
|
||||
})
|
||||
|
||||
const component_qr = new QRCodeView({
|
||||
value: options.text
|
||||
value: options.text,
|
||||
size: 250,
|
||||
});
|
||||
|
||||
const component_flexer = new Flexer({
|
||||
@ -141,38 +92,10 @@ async function UIWindowQR(options){
|
||||
component_flexer.attach(placeholder_qr);
|
||||
// placeholder_qr.replaceWith($(`<h1>test</h1>`).get(0));
|
||||
|
||||
if ( false ) {
|
||||
// generate auth token QR code
|
||||
new QRCode($(el_window).find('.otp-qr-code').get(0), {
|
||||
text: options.text,
|
||||
width: 455,
|
||||
height: 455,
|
||||
colorDark : "#000000",
|
||||
colorLight : "#ffffff",
|
||||
correctLevel : QRCode.CorrectLevel.H
|
||||
});
|
||||
}
|
||||
|
||||
if ( confirmations.length > 0 ) {
|
||||
$(el_window).find('.code-confirm-btn').prop('disabled', true);
|
||||
}
|
||||
|
||||
$(el_window).find('.qr-code-checkbox input').on('change', () => {
|
||||
const all_checked = $(el_window).find('.qr-code-checkbox input').toArray().every(el => el.checked);
|
||||
$(el_window).find('.code-confirm-btn').prop('disabled', !all_checked);
|
||||
});
|
||||
|
||||
$(el_window).find('.code-confirm-btn').on('click', () => {
|
||||
$(el_window).close();
|
||||
promise.resolve(true);
|
||||
});
|
||||
|
||||
$(el_window).find('.code-cancel-btn').on('click', () => {
|
||||
$(el_window).close();
|
||||
promise.resolve(false);
|
||||
});
|
||||
|
||||
return await promise;
|
||||
}
|
||||
|
||||
export default UIWindowQR
|
||||
@ -44,7 +44,11 @@ window.i18n = function (key, replacements = [], encode_html = true) {
|
||||
str = key;
|
||||
}
|
||||
str = ReplacePlaceholders(str);
|
||||
str = encode_html ? html_encode(str) : str;
|
||||
if ( encode_html ) {
|
||||
str = html_encode(str);
|
||||
// html_encode doesn't render line breaks
|
||||
str = str.replace(/\n/g, '<br />');
|
||||
}
|
||||
// replace %% occurrences with the values in replacements
|
||||
// %% is for simple text replacements
|
||||
// %strong% is for <strong> tags
|
||||
|
||||
@ -105,6 +105,7 @@ const en = {
|
||||
end_hard: "End Hard",
|
||||
end_process_force_confirm: "Are you sure you want to force-quit this process?",
|
||||
end_soft: "End Soft",
|
||||
enlarged_qr_code: "Enlarged QR Code",
|
||||
enter_password_to_confirm_delete_user: "Enter your password to confirm account deletion",
|
||||
error_unknown_cause: "An unknown error occurred.",
|
||||
feedback: "Feedback",
|
||||
@ -212,7 +213,7 @@ const en = {
|
||||
save_account_to_publish: 'Please create an account to proceed.',
|
||||
save_session: 'Save session',
|
||||
save_session_c2a: 'Create an account to save your current session and avoid losing your work.',
|
||||
scan_qr_c2a: 'Scan the code below to log into this session from other devices',
|
||||
scan_qr_c2a: 'Scan the code below\nto log into this session from other devices',
|
||||
scan_qr_2fa: 'Scan the QR code with your authenticator app',
|
||||
scan_qr_generic: 'Scan this QR code using your phone or another device',
|
||||
seconds: 'seconds',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user