60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
import { useState } from "react";
|
|
import { post } from "../../api";
|
|
import { useT } from "../../i18n";
|
|
import { useStore } from "../../store";
|
|
import { GitAccount } from "./GitAccount";
|
|
import { ApiTokens } from "./ApiTokens";
|
|
import { CliInstall } from "./CliInstall";
|
|
import { Memory } from "./Memory";
|
|
import { Telegram } from "./Telegram";
|
|
|
|
export function Account() {
|
|
const t = useT();
|
|
const me = useStore((s) => s.me);
|
|
const [form, setForm] = useState({ current: "", next: "", repeat: "" });
|
|
const [notice, setNotice] = useState<{ ok: boolean; text: string }>();
|
|
|
|
const save = async () => {
|
|
if (form.next !== form.repeat) return setNotice({ ok: false, text: t("login.mismatch") });
|
|
try {
|
|
await post("/auth/password", { current: form.current || undefined, new: form.next });
|
|
setForm({ current: "", next: "", repeat: "" });
|
|
setNotice({ ok: true, text: t("account.changed") });
|
|
} catch (e: any) {
|
|
setNotice({ ok: false, text: e.message });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="panel">
|
|
<h3>
|
|
{t("account.title")}: {me?.username}
|
|
</h3>
|
|
<div className="form">
|
|
{me?.has_password && (
|
|
<>
|
|
<label>{t("account.current")}</label>
|
|
<input type="password" value={form.current} onChange={(e) => setForm({ ...form, current: e.target.value })} autoComplete="current-password" />
|
|
</>
|
|
)}
|
|
<label>{t("account.new")}</label>
|
|
<input type="password" value={form.next} onChange={(e) => setForm({ ...form, next: e.target.value })} autoComplete="new-password" />
|
|
<label>{t("login.passwordRepeat")}</label>
|
|
<input type="password" value={form.repeat} onChange={(e) => setForm({ ...form, repeat: e.target.value })} autoComplete="new-password" />
|
|
</div>
|
|
{notice && <div className={`notice ${notice.ok ? "ok" : "err"}`} style={{ marginTop: 10 }}>{notice.text}</div>}
|
|
<button className="primary" style={{ marginTop: 12 }} disabled={!form.next} onClick={save}>
|
|
{t("account.change")}
|
|
</button>
|
|
<div style={{ fontSize: 12, color: "var(--muted)", marginTop: 8 }}>{t("account.hint")}</div>
|
|
</div>
|
|
<Memory />
|
|
<GitAccount />
|
|
<CliInstall />
|
|
<Telegram />
|
|
<ApiTokens />
|
|
</>
|
|
);
|
|
}
|