2023-02-08 21:10:26 +00:00
|
|
|
import "./Preferences.css";
|
|
|
|
|
2023-01-20 17:07:14 +00:00
|
|
|
import { useDispatch, useSelector } from "react-redux";
|
2023-02-08 21:10:26 +00:00
|
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
|
2023-02-04 17:24:01 +00:00
|
|
|
import { DefaultImgProxy, setPreferences, UserPreferences } from "State/Login";
|
2023-01-20 17:07:14 +00:00
|
|
|
import { RootState } from "State/Store";
|
2023-02-08 21:10:26 +00:00
|
|
|
|
|
|
|
import messages from "./messages";
|
2023-01-20 17:07:14 +00:00
|
|
|
|
|
|
|
const PreferencesPage = () => {
|
2023-02-07 20:04:50 +00:00
|
|
|
const dispatch = useDispatch();
|
|
|
|
const perf = useSelector<RootState, UserPreferences>(
|
|
|
|
(s) => s.login.preferences
|
|
|
|
);
|
2023-01-20 17:07:14 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
return (
|
|
|
|
<div className="preferences">
|
2023-02-08 21:10:26 +00:00
|
|
|
<h3>
|
|
|
|
<FormattedMessage {...messages.Preferences} />
|
|
|
|
</h3>
|
2023-01-20 17:07:14 +00:00
|
|
|
|
2023-02-07 20:04:50 +00:00
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.Theme} />
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<select
|
|
|
|
value={perf.theme}
|
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({
|
|
|
|
...perf,
|
|
|
|
theme: e.target.value,
|
|
|
|
} as UserPreferences)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
2023-02-08 21:10:26 +00:00
|
|
|
<option value="system">
|
|
|
|
<FormattedMessage {...messages.System} />
|
|
|
|
</option>
|
|
|
|
<option value="light">
|
|
|
|
<FormattedMessage {...messages.Light} />
|
|
|
|
</option>
|
|
|
|
<option value="dark">
|
|
|
|
<FormattedMessage {...messages.Dark} />
|
|
|
|
</option>
|
2023-02-07 20:04:50 +00:00
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.AutoloadMedia} />
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
<small>
|
2023-02-08 21:10:26 +00:00
|
|
|
<FormattedMessage {...messages.AutoloadMediaHelp} />
|
2023-02-07 20:04:50 +00:00
|
|
|
</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<select
|
|
|
|
value={perf.autoLoadMedia}
|
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({
|
|
|
|
...perf,
|
|
|
|
autoLoadMedia: e.target.value,
|
|
|
|
} as UserPreferences)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
2023-02-08 21:10:26 +00:00
|
|
|
<option value="none">
|
|
|
|
<FormattedMessage {...messages.None} />
|
|
|
|
</option>
|
|
|
|
<option value="follows-only">
|
|
|
|
<FormattedMessage {...messages.FollowsOnly} />
|
|
|
|
</option>
|
|
|
|
<option value="all">
|
|
|
|
<FormattedMessage {...messages.All} />
|
|
|
|
</option>
|
2023-02-07 20:04:50 +00:00
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="card flex f-col">
|
|
|
|
<div className="flex w-max">
|
|
|
|
<div className="flex f-col f-grow">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.ImgProxy} />
|
|
|
|
</div>
|
|
|
|
<small>
|
|
|
|
<FormattedMessage {...messages.ImgProxyHelp} />
|
|
|
|
</small>
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
checked={perf.imgProxyConfig !== null}
|
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({
|
|
|
|
...perf,
|
|
|
|
imgProxyConfig: e.target.checked ? DefaultImgProxy : null,
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{perf.imgProxyConfig && (
|
|
|
|
<div className="w-max mt10 form">
|
|
|
|
<div className="form-group">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.ServiceUrl} />
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
<div className="w-max">
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
value={perf.imgProxyConfig?.url}
|
2023-02-08 21:10:26 +00:00
|
|
|
placeholder="URL.."
|
2023-02-07 20:04:50 +00:00
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({
|
|
|
|
...perf,
|
|
|
|
imgProxyConfig: {
|
|
|
|
...perf.imgProxyConfig!,
|
|
|
|
url: e.target.value,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
2023-01-21 16:09:35 +00:00
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
<div className="form-group">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.ServiceKey} />
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
<div className="w-max">
|
|
|
|
<input
|
|
|
|
type="password"
|
|
|
|
value={perf.imgProxyConfig?.key}
|
|
|
|
placeholder="Hex key.."
|
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({
|
|
|
|
...perf,
|
|
|
|
imgProxyConfig: {
|
|
|
|
...perf.imgProxyConfig!,
|
|
|
|
key: e.target.value,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
2023-01-23 17:36:49 +00:00
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
<div className="form-group">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.ServiceSalt} />
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
<div className="w-max">
|
|
|
|
<input
|
|
|
|
type="password"
|
|
|
|
value={perf.imgProxyConfig?.salt}
|
|
|
|
placeholder="Hex salt.."
|
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({
|
|
|
|
...perf,
|
|
|
|
imgProxyConfig: {
|
|
|
|
...perf.imgProxyConfig!,
|
|
|
|
salt: e.target.value,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
2023-01-21 17:00:09 +00:00
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.EnableReactions} />
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
<small>
|
2023-02-08 21:10:26 +00:00
|
|
|
<FormattedMessage {...messages.EnableReactionsHelp} />
|
2023-02-07 20:04:50 +00:00
|
|
|
</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
checked={perf.enableReactions}
|
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({ ...perf, enableReactions: e.target.checked })
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.ConfirmReposts} />
|
|
|
|
</div>
|
|
|
|
<small>
|
|
|
|
<FormattedMessage {...messages.ConfirmRepostsHelp} />
|
|
|
|
</small>
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
checked={perf.confirmReposts}
|
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({ ...perf, confirmReposts: e.target.checked })
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.ShowLatest} />
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
<small>
|
2023-02-08 21:10:26 +00:00
|
|
|
<FormattedMessage {...messages.ShowLatestHelp} />
|
2023-02-07 20:04:50 +00:00
|
|
|
</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
checked={perf.autoShowLatest}
|
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({ ...perf, autoShowLatest: e.target.checked })
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.FileUpload} />
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
<small>
|
2023-02-08 21:10:26 +00:00
|
|
|
<FormattedMessage {...messages.FileUploadHelp} />
|
2023-02-07 20:04:50 +00:00
|
|
|
</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<select
|
|
|
|
value={perf.fileUploader}
|
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({
|
|
|
|
...perf,
|
|
|
|
fileUploader: e.target.value,
|
|
|
|
} as UserPreferences)
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
2023-02-08 21:10:26 +00:00
|
|
|
<option value="void.cat">
|
|
|
|
void.cat <FormattedMessage {...messages.Default} />
|
|
|
|
</option>
|
2023-02-07 20:04:50 +00:00
|
|
|
<option value="nostr.build">nostr.build</option>
|
|
|
|
<option value="nostrimg.com">nostrimg.com</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="card flex">
|
|
|
|
<div className="flex f-col f-grow">
|
2023-02-08 21:10:26 +00:00
|
|
|
<div>
|
|
|
|
<FormattedMessage {...messages.DebugMenus} />
|
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
<small>
|
2023-02-08 21:10:26 +00:00
|
|
|
<FormattedMessage {...messages.DebugMenusHelp} />
|
2023-02-07 20:04:50 +00:00
|
|
|
</small>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
checked={perf.showDebugMenus}
|
|
|
|
onChange={(e) =>
|
|
|
|
dispatch(
|
|
|
|
setPreferences({ ...perf, showDebugMenus: e.target.checked })
|
|
|
|
)
|
|
|
|
}
|
|
|
|
/>
|
2023-01-20 17:07:14 +00:00
|
|
|
</div>
|
2023-02-07 20:04:50 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
export default PreferencesPage;
|