feat(web,server): disable password login (#1223)

* feat(web,server): disable password login

* chore: unit tests

* chore: fix import

* chore: linting

* feat(cli): server command for enable/disable password login

* chore: update docs

* feat(web): confirm dialogue

* chore: linting

* chore: linting

* chore: linting

* chore: linting

* chore: linting

* chore: fix web test

* chore: server unit tests
This commit is contained in:
Jason Rasmussen 2023-01-09 16:32:58 -05:00 committed by GitHub
parent 5999af6c78
commit bd838a71d1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
66 changed files with 861 additions and 167 deletions

View file

@ -0,0 +1,25 @@
<script lang="ts">
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
</script>
<ConfirmDialogue title="Disable Login" on:cancel on:confirm>
<svelte:fragment slot="prompt">
<div class="flex flex-col gap-4 p-3">
<p class="text-md text-center">
Are you sure you want to disable all login methods? Login will be completely disabled.
</p>
<p class="text-md text-center">
To re-enable, use a
<a
href="https://immich.app/docs/features/server-commands"
rel="noreferrer"
target="_blank"
class="underline"
>
Server Command</a
>.
</p>
</div>
</svelte:fragment>
</ConfirmDialogue>

View file

@ -7,6 +7,7 @@
import { api, SystemConfigOAuthDto } from '@api';
import _ from 'lodash';
import { fade } from 'svelte/transition';
import ConfirmDisableLogin from '../confirm-disable-login.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
import SettingSwitch from '../setting-switch.svelte';
@ -43,26 +44,43 @@
});
}
let isConfirmOpen = false;
let handleConfirm: (value: boolean) => void;
const openConfirmModal = () => {
return new Promise((resolve) => {
handleConfirm = (value: boolean) => {
isConfirmOpen = false;
resolve(value);
};
isConfirmOpen = true;
});
};
async function saveSetting() {
try {
const { data: currentConfig } = await api.systemConfigApi.getConfig();
const { data: current } = await api.systemConfigApi.getConfig();
if (!current.passwordLogin.enabled && current.oauth.enabled && !oauthConfig.enabled) {
const confirmed = await openConfirmModal();
if (!confirmed) {
return;
}
}
if (!oauthConfig.mobileOverrideEnabled) {
oauthConfig.mobileRedirectUri = '';
}
const result = await api.systemConfigApi.updateConfig({
...currentConfig,
const { data: updated } = await api.systemConfigApi.updateConfig({
...current,
oauth: oauthConfig
});
oauthConfig = { ...result.data.oauth };
savedConfig = { ...result.data.oauth };
oauthConfig = { ...updated.oauth };
savedConfig = { ...updated.oauth };
notificationController.show({
message: 'OAuth settings saved',
type: NotificationType.Info
});
notificationController.show({ message: 'OAuth settings saved', type: NotificationType.Info });
} catch (error) {
handleError(error, 'Unable to save OAuth settings');
}
@ -80,6 +98,13 @@
}
</script>
{#if isConfirmOpen}
<ConfirmDisableLogin
on:cancel={() => handleConfirm(false)}
on:confirm={() => handleConfirm(true)}
/>
{/if}
<div class="mt-2">
{#await getConfigs() then}
<div in:fade={{ duration: 500 }}>
@ -147,6 +172,13 @@
disabled={!oauthConfig.enabled}
/>
<SettingSwitch
title="AUTO LAUNCH"
subtitle="Start the OAuth login flow automatically upon navigating to the login page"
disabled={!oauthConfig.enabled}
bind:checked={oauthConfig.autoLaunch}
/>
<SettingSwitch
title="MOBILE REDIRECT URI OVERRIDE"
subtitle="Enable when `app.immich:/` is an invalid redirect URI."

View file

@ -0,0 +1,119 @@
<script lang="ts">
import {
notificationController,
NotificationType
} from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import { api, SystemConfigPasswordLoginDto } from '@api';
import _ from 'lodash';
import { fade } from 'svelte/transition';
import ConfirmDisableLogin from '../confirm-disable-login.svelte';
import SettingButtonsRow from '../setting-buttons-row.svelte';
import SettingSwitch from '../setting-switch.svelte';
export let passwordLoginConfig: SystemConfigPasswordLoginDto; // this is the config that is being edited
let savedConfig: SystemConfigPasswordLoginDto;
let defaultConfig: SystemConfigPasswordLoginDto;
async function getConfigs() {
[savedConfig, defaultConfig] = await Promise.all([
api.systemConfigApi.getConfig().then((res) => res.data.passwordLogin),
api.systemConfigApi.getDefaults().then((res) => res.data.passwordLogin)
]);
}
let isConfirmOpen = false;
let handleConfirm: (value: boolean) => void;
const openConfirmModal = () => {
return new Promise((resolve) => {
handleConfirm = (value: boolean) => {
isConfirmOpen = false;
resolve(value);
};
isConfirmOpen = true;
});
};
async function saveSetting() {
try {
const { data: current } = await api.systemConfigApi.getConfig();
if (!current.oauth.enabled && current.passwordLogin.enabled && !passwordLoginConfig.enabled) {
const confirmed = await openConfirmModal();
if (!confirmed) {
return;
}
}
const { data: updated } = await api.systemConfigApi.updateConfig({
...current,
passwordLogin: passwordLoginConfig
});
passwordLoginConfig = { ...updated.passwordLogin };
savedConfig = { ...updated.passwordLogin };
notificationController.show({ message: 'Settings saved', type: NotificationType.Info });
} catch (error) {
handleError(error, 'Unable to save settings');
}
}
async function reset() {
const { data: resetConfig } = await api.systemConfigApi.getConfig();
passwordLoginConfig = { ...resetConfig.passwordLogin };
savedConfig = { ...resetConfig.passwordLogin };
notificationController.show({
message: 'Reset settings to the recent saved settings',
type: NotificationType.Info
});
}
async function resetToDefault() {
const { data: configs } = await api.systemConfigApi.getDefaults();
passwordLoginConfig = { ...configs.passwordLogin };
defaultConfig = { ...configs.passwordLogin };
notificationController.show({
message: 'Reset password settings to default',
type: NotificationType.Info
});
}
</script>
{#if isConfirmOpen}
<ConfirmDisableLogin
on:cancel={() => handleConfirm(false)}
on:confirm={() => handleConfirm(true)}
/>
{/if}
<div>
{#await getConfigs() then}
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault>
<div class="flex flex-col gap-4 ml-4 mt-4">
<div class="ml-4">
<SettingSwitch
title="ENABLED"
subtitle="Login with email and password"
bind:checked={passwordLoginConfig.enabled}
/>
<SettingButtonsRow
on:reset={reset}
on:save={saveSetting}
on:reset-to-default={resetToDefault}
showResetToDefault={!_.isEqual(savedConfig, defaultConfig)}
/>
</div>
</div>
</form>
</div>
{/await}
</div>