Fix the Form class and more user settings
This commit is contained in:
MathMan05
parent
d641ee6961
commit
db7b55b79c
5 changed files with 675 additions and 240 deletions
|
|
@ -932,82 +932,125 @@ class Localuser {
|
|||
}
|
||||
{
|
||||
const security = settings.addButton("Account Settings");
|
||||
if (this.mfa_enabled) {
|
||||
security.addTextInput("Disable 2FA, totp code:", _ => {
|
||||
fetch(this.info.api + "/users/@me/mfa/totp/disable", {
|
||||
method: "POST",
|
||||
const genSecurity = () => {
|
||||
security.removeAll();
|
||||
if (this.mfa_enabled) {
|
||||
security.addButtonInput("", "Disable 2FA", () => {
|
||||
const form = security.addSubForm("2FA Disable", (_) => {
|
||||
if (_.message) {
|
||||
switch (_.code) {
|
||||
case 60008:
|
||||
form.error("code", "Invalid code");
|
||||
break;
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.mfa_enabled = false;
|
||||
security.returnFromSub();
|
||||
genSecurity();
|
||||
}
|
||||
}, {
|
||||
fetchURL: (this.info.api + "/users/@me/mfa/totp/disable"),
|
||||
headers: this.headers
|
||||
});
|
||||
form.addTextInput("Code:", "code", { required: true });
|
||||
});
|
||||
}
|
||||
else {
|
||||
security.addButtonInput("", "Enable 2FA", async () => {
|
||||
let secret = "";
|
||||
for (let i = 0; i < 18; i++) {
|
||||
secret += "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"[Math.floor(Math.random() * 32)];
|
||||
}
|
||||
const form = security.addSubForm("2FA Setup", (_) => {
|
||||
if (_.message) {
|
||||
switch (_.code) {
|
||||
case 60008:
|
||||
form.error("code", "Invalid code");
|
||||
break;
|
||||
case 400:
|
||||
form.error("password", "Incorrect password");
|
||||
break;
|
||||
}
|
||||
}
|
||||
else {
|
||||
genSecurity();
|
||||
this.mfa_enabled = true;
|
||||
security.returnFromSub();
|
||||
}
|
||||
}, {
|
||||
fetchURL: (this.info.api + "/users/@me/mfa/totp/enable/"),
|
||||
headers: this.headers
|
||||
});
|
||||
form.addTitle("Copy this secret into your totp(time-based one time password) app");
|
||||
form.addText(`Your secret is: ${secret} and it's 6 digits, with a 30 second token period`);
|
||||
form.addTextInput("Account Password:", "password", { required: true, password: true });
|
||||
form.addTextInput("Code:", "code", { required: true });
|
||||
form.setValue("secret", secret);
|
||||
});
|
||||
}
|
||||
security.addButtonInput("", "Change discriminator", () => {
|
||||
const form = security.addSubForm("Change Discriminator", (_) => { security.returnFromSub(); }, {
|
||||
fetchURL: (this.info.api + "/users/@me/"),
|
||||
headers: this.headers,
|
||||
body: JSON.stringify({
|
||||
code: _
|
||||
})
|
||||
}).then(r => r.json()).then(json => {
|
||||
if (json.message) {
|
||||
alert(json.message);
|
||||
method: "PATCH"
|
||||
});
|
||||
form.addTextInput("New discriminator:", "discriminator");
|
||||
});
|
||||
security.addButtonInput("", "Change email", () => {
|
||||
const form = security.addSubForm("Change Email", (_) => { security.returnFromSub(); }, {
|
||||
fetchURL: (this.info.api + "/users/@me/"),
|
||||
headers: this.headers,
|
||||
method: "PATCH"
|
||||
});
|
||||
form.addTextInput("Password:", "password", { password: true });
|
||||
if (this.mfa_enabled) {
|
||||
form.addTextInput("Code:", "code");
|
||||
}
|
||||
form.addTextInput("New email:", "email");
|
||||
});
|
||||
security.addButtonInput("", "Change username", () => {
|
||||
const form = security.addSubForm("Change Username", (_) => { security.returnFromSub(); }, {
|
||||
fetchURL: (this.info.api + "/users/@me/"),
|
||||
headers: this.headers,
|
||||
method: "PATCH"
|
||||
});
|
||||
form.addTextInput("Password:", "password", { password: true });
|
||||
if (this.mfa_enabled) {
|
||||
form.addTextInput("Code:", "code");
|
||||
}
|
||||
form.addTextInput("New username:", "username");
|
||||
});
|
||||
security.addButtonInput("", "Change password", () => {
|
||||
const form = security.addSubForm("Change Password", (_) => { security.returnFromSub(); }, {
|
||||
fetchURL: (this.info.api + "/users/@me/"),
|
||||
headers: this.headers,
|
||||
method: "PATCH"
|
||||
});
|
||||
form.addTextInput("Old password:", "password", { password: true });
|
||||
if (this.mfa_enabled) {
|
||||
form.addTextInput("Code:", "code");
|
||||
}
|
||||
let in1 = "";
|
||||
let in2 = "";
|
||||
form.addTextInput("New password:", "").watchForChange(text => {
|
||||
in1 = text;
|
||||
});
|
||||
const copy = form.addTextInput("New password again:", "");
|
||||
copy.watchForChange(text => {
|
||||
in2 = text;
|
||||
});
|
||||
form.setValue("new_password", () => {
|
||||
if (in1 === in2) {
|
||||
return in1;
|
||||
}
|
||||
else {
|
||||
this.mfa_enabled = false;
|
||||
alert("2FA turned off successfully");
|
||||
throw [copy, "Passwords don't match"];
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
else {
|
||||
security.addButtonInput("", "Enable 2FA", async () => {
|
||||
let secret = "";
|
||||
for (let i = 0; i < 18; i++) {
|
||||
secret += "ABCDEFGHIJKLMNOPQRSTUVWXYZ234567"[Math.floor(Math.random() * 32)];
|
||||
}
|
||||
let password = "";
|
||||
let code = "";
|
||||
const addmodel = new Dialog(["vdiv",
|
||||
["title", "2FA set up"],
|
||||
["text", "Copy this secret into your totp(time-based one time password) app"],
|
||||
["text", `Your secret is: ${secret} and it's 6 digits, with a 30 second token period`],
|
||||
["textbox", "Account password:", "", function () { password = this.value; }],
|
||||
["textbox", "Code:", "", function () { code = this.value; }],
|
||||
["button", "", "Submit", () => {
|
||||
fetch(this.info.api + "/users/@me/mfa/totp/enable/", {
|
||||
method: "POST",
|
||||
headers: this.headers,
|
||||
body: JSON.stringify({
|
||||
password,
|
||||
code,
|
||||
secret
|
||||
})
|
||||
}).then(r => r.json()).then(json => {
|
||||
if (json.message) {
|
||||
alert(json.message);
|
||||
}
|
||||
else {
|
||||
alert("2FA set up successfully");
|
||||
addmodel.hide();
|
||||
this.mfa_enabled = true;
|
||||
}
|
||||
});
|
||||
}]]);
|
||||
console.log("here :3");
|
||||
addmodel.show();
|
||||
});
|
||||
}
|
||||
let disc = "";
|
||||
const updatedisc = security.addButtonInput("", "Change discriminator", () => {
|
||||
const update = new Dialog(["vdiv",
|
||||
["title", "Change discriminator"],
|
||||
["textbox", "New discriminator:", "", (e) => {
|
||||
disc = e.target.value;
|
||||
}],
|
||||
["button", "", "submit", () => {
|
||||
this.changeDiscriminator(disc).then(_ => {
|
||||
if (_.message) {
|
||||
alert(_.errors.discriminator._errors[0].message);
|
||||
}
|
||||
else {
|
||||
update.hide();
|
||||
}
|
||||
});
|
||||
}]]);
|
||||
update.show();
|
||||
});
|
||||
};
|
||||
genSecurity();
|
||||
}
|
||||
{
|
||||
const connections = settings.addButton("Connections");
|
||||
|
|
@ -1086,13 +1129,6 @@ class Localuser {
|
|||
}
|
||||
settings.show();
|
||||
}
|
||||
async changeDiscriminator(discriminator) {
|
||||
return await (await fetch(this.info.api + "/users/@me/", {
|
||||
method: "PATCH",
|
||||
headers: this.headers,
|
||||
body: JSON.stringify({ discriminator })
|
||||
})).json();
|
||||
}
|
||||
async manageApplication(appId = "") {
|
||||
const res = await fetch(this.info.api + "/applications/" + appId, {
|
||||
headers: this.headers
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ class Buttons {
|
|||
generateHTMLArea(buttonInfo, htmlarea) {
|
||||
let html;
|
||||
if (buttonInfo instanceof Options) {
|
||||
buttonInfo.subOptions = undefined;
|
||||
html = buttonInfo.generateHTML();
|
||||
}
|
||||
else {
|
||||
|
|
@ -73,11 +74,13 @@ class TextInput {
|
|||
onSubmit;
|
||||
value;
|
||||
input;
|
||||
constructor(label, onSubmit, owner, { initText = "" } = {}) {
|
||||
password;
|
||||
constructor(label, onSubmit, owner, { initText = "", password = false } = {}) {
|
||||
this.label = label;
|
||||
this.value = initText;
|
||||
this.owner = owner;
|
||||
this.onSubmit = onSubmit;
|
||||
this.password = password;
|
||||
}
|
||||
generateHTML() {
|
||||
const div = document.createElement("div");
|
||||
|
|
@ -86,7 +89,7 @@ class TextInput {
|
|||
div.append(span);
|
||||
const input = document.createElement("input");
|
||||
input.value = this.value;
|
||||
input.type = "text";
|
||||
input.type = this.password ? "password" : "text";
|
||||
input.oninput = this.onChange.bind(this);
|
||||
this.input = new WeakRef(input);
|
||||
div.append(input);
|
||||
|
|
@ -109,6 +112,36 @@ class TextInput {
|
|||
this.onSubmit(this.value);
|
||||
}
|
||||
}
|
||||
class SettingsText {
|
||||
onSubmit;
|
||||
value;
|
||||
text;
|
||||
constructor(text) {
|
||||
this.text = text;
|
||||
}
|
||||
generateHTML() {
|
||||
const span = document.createElement("span");
|
||||
span.innerText = this.text;
|
||||
return span;
|
||||
}
|
||||
watchForChange() { }
|
||||
submit() { }
|
||||
}
|
||||
class SettingsTitle {
|
||||
onSubmit;
|
||||
value;
|
||||
text;
|
||||
constructor(text) {
|
||||
this.text = text;
|
||||
}
|
||||
generateHTML() {
|
||||
const span = document.createElement("h2");
|
||||
span.innerText = this.text;
|
||||
return span;
|
||||
}
|
||||
watchForChange() { }
|
||||
submit() { }
|
||||
}
|
||||
class CheckboxInput {
|
||||
label;
|
||||
owner;
|
||||
|
|
@ -400,12 +433,23 @@ class Options {
|
|||
owner;
|
||||
ltr;
|
||||
value;
|
||||
html = new WeakMap();
|
||||
container = new WeakRef(document.createElement("div"));
|
||||
constructor(name, owner, { ltr = false } = {}) {
|
||||
this.name = name;
|
||||
this.options = [];
|
||||
this.owner = owner;
|
||||
this.ltr = ltr;
|
||||
}
|
||||
removeAll() {
|
||||
while (this.options.length) {
|
||||
this.options.pop();
|
||||
}
|
||||
const container = this.container.deref();
|
||||
if (container) {
|
||||
container.innerHTML = "";
|
||||
}
|
||||
}
|
||||
watchForChange() { }
|
||||
;
|
||||
addOptions(name, { ltr = false } = {}) {
|
||||
|
|
@ -414,9 +458,39 @@ class Options {
|
|||
this.generate(options);
|
||||
return options;
|
||||
}
|
||||
subOptions;
|
||||
addSubOptions(name, { ltr = false } = {}) {
|
||||
const options = new Options(name, this, { ltr });
|
||||
this.subOptions = options;
|
||||
const container = this.container.deref();
|
||||
if (container) {
|
||||
this.generateContainter();
|
||||
}
|
||||
else {
|
||||
throw Error("Tried to make a subOptions when the options weren't rendered");
|
||||
}
|
||||
return options;
|
||||
}
|
||||
addSubForm(name, onSubmit, { ltr = false, submitText = "Submit", fetchURL = "", headers = {}, method = "POST", traditionalSubmit = false } = {}) {
|
||||
const options = new Form(name, this, onSubmit, { ltr, submitText, fetchURL, headers, method, traditionalSubmit });
|
||||
this.subOptions = options;
|
||||
const container = this.container.deref();
|
||||
if (container) {
|
||||
this.generateContainter();
|
||||
}
|
||||
else {
|
||||
throw Error("Tried to make a subForm when the options weren't rendered");
|
||||
}
|
||||
return options;
|
||||
}
|
||||
returnFromSub() {
|
||||
this.subOptions = undefined;
|
||||
this.generateContainter();
|
||||
}
|
||||
addSelect(label, onSubmit, selections, { defaultIndex = 0 } = {}) {
|
||||
const select = new SelectInput(label, onSubmit, selections, this, { defaultIndex });
|
||||
this.options.push(select);
|
||||
this.generate(select);
|
||||
return select;
|
||||
}
|
||||
addFileInput(label, onSubmit, { clear = false } = {}) {
|
||||
|
|
@ -425,8 +499,8 @@ class Options {
|
|||
this.generate(FI);
|
||||
return FI;
|
||||
}
|
||||
addTextInput(label, onSubmit, { initText = "" } = {}) {
|
||||
const textInput = new TextInput(label, onSubmit, this, { initText });
|
||||
addTextInput(label, onSubmit, { initText = "", password = false } = {}) {
|
||||
const textInput = new TextInput(label, onSubmit, this, { initText, password });
|
||||
this.options.push(textInput);
|
||||
this.generate(textInput);
|
||||
return textInput;
|
||||
|
|
@ -461,8 +535,18 @@ class Options {
|
|||
this.generate(box);
|
||||
return box;
|
||||
}
|
||||
html = new WeakMap();
|
||||
container = new WeakRef(document.createElement("div"));
|
||||
addText(str) {
|
||||
const text = new SettingsText(str);
|
||||
this.options.push(text);
|
||||
this.generate(text);
|
||||
return text;
|
||||
}
|
||||
addTitle(str) {
|
||||
const text = new SettingsTitle(str);
|
||||
this.options.push(text);
|
||||
this.generate(text);
|
||||
return text;
|
||||
}
|
||||
generate(elm) {
|
||||
const container = this.container.deref();
|
||||
if (container) {
|
||||
|
|
@ -476,24 +560,61 @@ class Options {
|
|||
container.append(div);
|
||||
}
|
||||
}
|
||||
title = new WeakRef(document.createElement("h2"));
|
||||
generateHTML() {
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("titlediv");
|
||||
if (this.name !== "") {
|
||||
const title = document.createElement("h2");
|
||||
title.textContent = this.name;
|
||||
div.append(title);
|
||||
const title = document.createElement("h2");
|
||||
title.textContent = this.name;
|
||||
div.append(title);
|
||||
if (this.name !== "")
|
||||
title.classList.add("settingstitle");
|
||||
}
|
||||
this.title = new WeakRef(title);
|
||||
const container = document.createElement("div");
|
||||
this.container = new WeakRef(container);
|
||||
container.classList.add(this.ltr ? "flexltr" : "flexttb", "flexspace");
|
||||
for (const thing of this.options) {
|
||||
this.generate(thing);
|
||||
}
|
||||
this.generateContainter();
|
||||
div.append(container);
|
||||
return div;
|
||||
}
|
||||
generateContainter() {
|
||||
const container = this.container.deref();
|
||||
if (container) {
|
||||
const title = this.title.deref();
|
||||
if (title)
|
||||
title.innerHTML = "";
|
||||
container.innerHTML = "";
|
||||
if (this.subOptions) {
|
||||
container.append(this.subOptions.generateHTML()); //more code needed, though this is enough for now
|
||||
if (title) {
|
||||
const name = document.createElement("span");
|
||||
name.innerText = this.name;
|
||||
name.classList.add("clickable");
|
||||
name.onclick = () => {
|
||||
this.returnFromSub();
|
||||
};
|
||||
title.append(name, " > ", this.subOptions.name);
|
||||
}
|
||||
}
|
||||
else {
|
||||
for (const thing of this.options) {
|
||||
this.generate(thing);
|
||||
}
|
||||
if (title) {
|
||||
title.innerText = this.name;
|
||||
}
|
||||
}
|
||||
if (title && title.innerText !== "") {
|
||||
title.classList.add("settingstitle");
|
||||
}
|
||||
else if (title) {
|
||||
title.classList.remove("settingstitle");
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.warn("tried to generate container, but it did not exist");
|
||||
}
|
||||
}
|
||||
changed() {
|
||||
if (this.owner instanceof Options || this.owner instanceof Form) {
|
||||
this.owner.changed();
|
||||
|
|
@ -531,14 +652,17 @@ class Form {
|
|||
options;
|
||||
owner;
|
||||
ltr;
|
||||
names;
|
||||
names = new Map();
|
||||
required = new WeakSet();
|
||||
submitText;
|
||||
fetchURL;
|
||||
headers;
|
||||
headers = {};
|
||||
method;
|
||||
value;
|
||||
constructor(name, owner, onSubmit, { ltr = false, submitText = "Submit", fetchURL = "", headers = {}, method = "POST" } = {}) {
|
||||
traditionalSubmit;
|
||||
values = {};
|
||||
constructor(name, owner, onSubmit, { ltr = false, submitText = "Submit", fetchURL = "", headers = {}, method = "POST", traditionalSubmit = false } = {}) {
|
||||
this.traditionalSubmit = traditionalSubmit;
|
||||
this.name = name;
|
||||
this.method = method;
|
||||
this.submitText = submitText;
|
||||
|
|
@ -549,13 +673,16 @@ class Form {
|
|||
this.ltr = ltr;
|
||||
this.onSubmit = onSubmit;
|
||||
}
|
||||
setValue(key, value) {
|
||||
this.values[key] = value;
|
||||
}
|
||||
addSelect(label, formName, selections, { defaultIndex = 0, required = false } = {}) {
|
||||
const select = this.options.addSelect(label, _ => { }, selections, { defaultIndex });
|
||||
this.names.set(formName, select);
|
||||
if (required) {
|
||||
this.required.add(select);
|
||||
}
|
||||
return;
|
||||
return select;
|
||||
}
|
||||
addFileInput(label, formName, { required = false } = {}) {
|
||||
const FI = this.options.addFileInput(label, _ => { }, {});
|
||||
|
|
@ -563,15 +690,15 @@ class Form {
|
|||
if (required) {
|
||||
this.required.add(FI);
|
||||
}
|
||||
return;
|
||||
return FI;
|
||||
}
|
||||
addTextInput(label, formName, { initText = "", required = false } = {}) {
|
||||
const textInput = this.options.addTextInput(label, _ => { }, { initText });
|
||||
addTextInput(label, formName, { initText = "", required = false, password = false } = {}) {
|
||||
const textInput = this.options.addTextInput(label, _ => { }, { initText, password });
|
||||
this.names.set(formName, textInput);
|
||||
if (required) {
|
||||
this.required.add(textInput);
|
||||
}
|
||||
return;
|
||||
return textInput;
|
||||
}
|
||||
addColorInput(label, formName, { initColor = "", required = false } = {}) {
|
||||
const colorInput = this.options.addColorInput(label, _ => { }, { initColor });
|
||||
|
|
@ -579,7 +706,7 @@ class Form {
|
|||
if (required) {
|
||||
this.required.add(colorInput);
|
||||
}
|
||||
return;
|
||||
return colorInput;
|
||||
}
|
||||
addMDInput(label, formName, { initText = "", required = false } = {}) {
|
||||
const mdInput = this.options.addMDInput(label, _ => { }, { initText });
|
||||
|
|
@ -587,7 +714,7 @@ class Form {
|
|||
if (required) {
|
||||
this.required.add(mdInput);
|
||||
}
|
||||
return;
|
||||
return mdInput;
|
||||
}
|
||||
addCheckboxInput(label, formName, { initState = false, required = false } = {}) {
|
||||
const box = this.options.addCheckboxInput(label, _ => { }, { initState });
|
||||
|
|
@ -595,17 +722,26 @@ class Form {
|
|||
if (required) {
|
||||
this.required.add(box);
|
||||
}
|
||||
return;
|
||||
return box;
|
||||
}
|
||||
addText(str) {
|
||||
this.options.addText(str);
|
||||
}
|
||||
addTitle(str) {
|
||||
this.options.addTitle(str);
|
||||
}
|
||||
generateHTML() {
|
||||
const div = document.createElement("div");
|
||||
div.append(this.options.generateHTML());
|
||||
const button = document.createElement("button");
|
||||
button.onclick = _ => {
|
||||
this.submit();
|
||||
};
|
||||
button.textContent = this.submitText;
|
||||
div.append(button);
|
||||
div.classList.add("FormSettings");
|
||||
if (!this.traditionalSubmit) {
|
||||
const button = document.createElement("button");
|
||||
button.onclick = _ => {
|
||||
this.submit();
|
||||
};
|
||||
button.textContent = this.submitText;
|
||||
div.append(button);
|
||||
}
|
||||
return div;
|
||||
}
|
||||
onSubmit;
|
||||
|
|
@ -614,21 +750,48 @@ class Form {
|
|||
}
|
||||
;
|
||||
changed() {
|
||||
if (this.traditionalSubmit) {
|
||||
this.owner.changed();
|
||||
}
|
||||
}
|
||||
submit() {
|
||||
const build = {};
|
||||
for (const key of Object.keys(this.values)) {
|
||||
const thing = this.values[key];
|
||||
if (thing instanceof Function) {
|
||||
try {
|
||||
build[key] = thing();
|
||||
}
|
||||
catch (e) {
|
||||
const elm = this.options.html.get(e[0]);
|
||||
if (elm) {
|
||||
const html = elm.deref();
|
||||
if (html) {
|
||||
this.makeError(html, e[1]);
|
||||
}
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
else {
|
||||
build[key] = thing;
|
||||
}
|
||||
}
|
||||
for (const thing of this.names.keys()) {
|
||||
if (thing === "")
|
||||
continue;
|
||||
const input = this.names.get(thing);
|
||||
build[thing] = input.value;
|
||||
}
|
||||
if (this.fetchURL === "") {
|
||||
if (this.fetchURL !== "") {
|
||||
fetch(this.fetchURL, {
|
||||
method: this.method,
|
||||
body: JSON.stringify(build)
|
||||
body: JSON.stringify(build),
|
||||
headers: this.headers
|
||||
}).then(_ => _.json()).then(json => {
|
||||
if (json.errors) {
|
||||
this.errors(json.errors);
|
||||
}
|
||||
if (json.errors && this.errors(json.errors))
|
||||
return;
|
||||
this.onSubmit(json);
|
||||
});
|
||||
}
|
||||
else {
|
||||
|
|
@ -637,16 +800,37 @@ class Form {
|
|||
console.warn("needs to be implemented");
|
||||
}
|
||||
errors(errors) {
|
||||
for (const error of errors) {
|
||||
if (!(errors instanceof Object)) {
|
||||
return;
|
||||
}
|
||||
;
|
||||
for (const error of Object.keys(errors)) {
|
||||
const elm = this.names.get(error);
|
||||
if (elm) {
|
||||
const ref = this.options.html.get(elm);
|
||||
if (ref && ref.deref()) {
|
||||
const html = ref.deref();
|
||||
this.makeError(html, error._errors[0].message);
|
||||
this.makeError(html, errors[error]._errors[0].message);
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
error(formElm, errorMessage) {
|
||||
const elm = this.names.get(formElm);
|
||||
if (elm) {
|
||||
const htmlref = this.options.html.get(elm);
|
||||
if (htmlref) {
|
||||
const html = htmlref.deref();
|
||||
if (html) {
|
||||
this.makeError(html, errorMessage);
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
console.warn(formElm + " is not a valid form property");
|
||||
}
|
||||
}
|
||||
makeError(e, message) {
|
||||
let element = e.getElementsByClassName("suberror")[0];
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue