You've already forked immich
mirror of
https://github.com/immich-app/immich.git
synced 2025-07-17 15:47:54 +02:00
web
.eslintrc.cjs.prettierrcconstants.ts+error.svelte+layout.server.ts+layout.svelte+page.server.ts+page.sveltesvelte.config.jstailwind.config.cjsvite.config.js
__mocks__
babel.config.cjsjest.config.mjspostcss.config.cjssrc
api
app.cssapp.d.tsapp.htmlhooks.server.tslib
__mocks__
components
admin-page
delete-confirm-dialoge.svelte
jobs
job-tile-button.sveltejob-tile-status.sveltejob-tile.sveltejobs-panel.sveltestorage-migration-description.svelte
restore-dialoge.svelteserver-stats
settings
confirm-disable-login.svelte
ffmpeg
job-settings
oauth
password-login
setting-accordion.sveltesetting-buttons-row.sveltesetting-input-field.sveltesetting-select.sveltesetting-switch.sveltestorage-template
album-page
__tests__
album-card.sveltealbum-card.tsalbum-viewer.svelteasset-selection.svelteshare-info-modal.sveltethumbnail-selection.svelteuser-selection-modal.svelteasset-viewer
album-list-item.svelteasset-viewer-nav-bar.svelteasset-viewer.sveltedetail-panel.sveltedownload-panel.svelteintersection-observer.sveltephoto-viewer.sveltevideo-viewer.svelte
assets
elements
faces-page
forms
admin-registration-form.svelteapi-key-form.svelteapi-key-secret.sveltechange-password-form.sveltecreate-user-form.svelteedit-user-form.sveltelogin-form.svelte
layouts
map-page
memory-page
photos-page
actions
add-to-album.sveltearchive-action.sveltecreate-shared-link.sveltedelete-assets.sveltedownload-action.sveltefavorite-action.svelteremove-from-album.svelteremove-from-shared-link.svelteselect-all-assets.svelte
asset-date-group.svelteasset-grid.svelteasset-select-context-menu.svelteasset-select-control-bar.sveltememory-lane.svelteshare-page
shared-components
album-selection-modal.svelteapple-header.sveltebase-modal.svelteconfirm-dialogue.svelte
context-menu
control-app-bar.sveltecreate-share-link-modal
drag-and-drop-upload-overlay.sveltedropdown-button.svelteempty-placeholder.sveltefavicon-header.sveltefull-screen-modal.sveltefullscreen-container.sveltegallery-viewer
immich-logo.svelteleaflet
loading-spinner.sveltenavigation-bar
navigation-loading-bar.sveltenotification
portal
scrollbar
search-bar
side-bar
status-box.sveltetheme-button.svelteupload-asset-preview.svelteupload-panel.svelteuser-avatar.svelteversion-announcement-box.sveltesharedlinks-page
user-settings-page
models
stores
album-asset-selection.store.tsasset-interaction.store.tsassets.store.tsdownload.tsdrag-and-drop-files.store.tspreferences.store.tsupload.tswebsocket.tszoom-image.store.ts
utils
routes
(user)
albums
archive
explore
favorites
map
memory
partners
[userId]
people
photos
search
share
[key]
sharing
user-settings
.well-known
immich
admin
auth
change-password
login
logout
register
test-data
factories
@ -1,166 +1,166 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { api, oauth, OAuthConfigResponseDto } from '@api';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { api, oauth, OAuthConfigResponseDto } from '@api';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
let error: string;
|
||||
let email = '';
|
||||
let password = '';
|
||||
let oauthError: string;
|
||||
export let authConfig: OAuthConfigResponseDto;
|
||||
let loading = false;
|
||||
let oauthLoading = true;
|
||||
let error: string;
|
||||
let email = '';
|
||||
let password = '';
|
||||
let oauthError: string;
|
||||
export let authConfig: OAuthConfigResponseDto;
|
||||
let loading = false;
|
||||
let oauthLoading = true;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
onMount(async () => {
|
||||
if (oauth.isCallback(window.location)) {
|
||||
try {
|
||||
await oauth.login(window.location);
|
||||
dispatch('success');
|
||||
return;
|
||||
} catch (e) {
|
||||
console.error('Error [login-form] [oauth.callback]', e);
|
||||
oauthError = 'Unable to complete OAuth login';
|
||||
} finally {
|
||||
oauthLoading = false;
|
||||
}
|
||||
}
|
||||
onMount(async () => {
|
||||
if (oauth.isCallback(window.location)) {
|
||||
try {
|
||||
await oauth.login(window.location);
|
||||
dispatch('success');
|
||||
return;
|
||||
} catch (e) {
|
||||
console.error('Error [login-form] [oauth.callback]', e);
|
||||
oauthError = 'Unable to complete OAuth login';
|
||||
} finally {
|
||||
oauthLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const { data } = await oauth.getConfig(window.location);
|
||||
authConfig = data;
|
||||
try {
|
||||
const { data } = await oauth.getConfig(window.location);
|
||||
authConfig = data;
|
||||
|
||||
const { enabled, url, autoLaunch } = authConfig;
|
||||
const { enabled, url, autoLaunch } = authConfig;
|
||||
|
||||
if (enabled && url && autoLaunch && !oauth.isAutoLaunchDisabled(window.location)) {
|
||||
await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
|
||||
await goto(url);
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
authConfig.passwordLoginEnabled = true;
|
||||
handleError(error, 'Unable to connect!');
|
||||
}
|
||||
if (enabled && url && autoLaunch && !oauth.isAutoLaunchDisabled(window.location)) {
|
||||
await goto(`${AppRoute.AUTH_LOGIN}?autoLaunch=0`, { replaceState: true });
|
||||
await goto(url);
|
||||
return;
|
||||
}
|
||||
} catch (error) {
|
||||
authConfig.passwordLoginEnabled = true;
|
||||
handleError(error, 'Unable to connect!');
|
||||
}
|
||||
|
||||
oauthLoading = false;
|
||||
});
|
||||
oauthLoading = false;
|
||||
});
|
||||
|
||||
const login = async () => {
|
||||
try {
|
||||
error = '';
|
||||
loading = true;
|
||||
const login = async () => {
|
||||
try {
|
||||
error = '';
|
||||
loading = true;
|
||||
|
||||
const { data } = await api.authenticationApi.login({
|
||||
loginCredentialDto: {
|
||||
email,
|
||||
password
|
||||
}
|
||||
});
|
||||
const { data } = await api.authenticationApi.login({
|
||||
loginCredentialDto: {
|
||||
email,
|
||||
password,
|
||||
},
|
||||
});
|
||||
|
||||
if (!data.isAdmin && data.shouldChangePassword) {
|
||||
dispatch('first-login');
|
||||
return;
|
||||
}
|
||||
if (!data.isAdmin && data.shouldChangePassword) {
|
||||
dispatch('first-login');
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch('success');
|
||||
return;
|
||||
} catch (e) {
|
||||
error = 'Incorrect email or password';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
};
|
||||
dispatch('success');
|
||||
return;
|
||||
} catch (e) {
|
||||
error = 'Incorrect email or password';
|
||||
loading = false;
|
||||
return;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
{#if authConfig.passwordLoginEnabled}
|
||||
<form on:submit|preventDefault={login} class="flex flex-col gap-5 mt-5">
|
||||
{#if error}
|
||||
<p class="text-red-400" transition:fade>
|
||||
{error}
|
||||
</p>
|
||||
{/if}
|
||||
<form on:submit|preventDefault={login} class="flex flex-col gap-5 mt-5">
|
||||
{#if error}
|
||||
<p class="text-red-400" transition:fade>
|
||||
{error}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="email">Email</label>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
bind:value={email}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="email">Email</label>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
bind:value={email}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="password">Password</label>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
bind:value={password}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="password">Password</label>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autocomplete="current-password"
|
||||
bind:value={password}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="my-5 flex w-full">
|
||||
<Button type="submit" size="lg" fullwidth disabled={loading || oauthLoading}>
|
||||
{#if loading}
|
||||
<span class="h-6">
|
||||
<LoadingSpinner />
|
||||
</span>
|
||||
{:else}
|
||||
Login
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="my-5 flex w-full">
|
||||
<Button type="submit" size="lg" fullwidth disabled={loading || oauthLoading}>
|
||||
{#if loading}
|
||||
<span class="h-6">
|
||||
<LoadingSpinner />
|
||||
</span>
|
||||
{:else}
|
||||
Login
|
||||
{/if}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if authConfig.enabled}
|
||||
{#if authConfig.passwordLoginEnabled}
|
||||
<div class="inline-flex items-center justify-center w-full">
|
||||
<hr class="w-3/4 h-px my-4 bg-gray-200 border-0 dark:bg-gray-600" />
|
||||
<span
|
||||
class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 left-1/2 dark:text-white bg-white dark:bg-immich-dark-gray"
|
||||
>
|
||||
or
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="my-5 flex flex-col gap-5">
|
||||
{#if oauthError}
|
||||
<p class="text-red-400" transition:fade>{oauthError}</p>
|
||||
{/if}
|
||||
<a href={authConfig.url} class="flex w-full">
|
||||
<Button
|
||||
type="button"
|
||||
disabled={loading || oauthLoading}
|
||||
size="lg"
|
||||
fullwidth
|
||||
color={authConfig.passwordLoginEnabled ? 'secondary' : 'primary'}
|
||||
>
|
||||
{#if oauthLoading}
|
||||
<span class="h-6">
|
||||
<LoadingSpinner />
|
||||
</span>
|
||||
{:else}
|
||||
{authConfig.buttonText || 'Login with OAuth'}
|
||||
{/if}
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
{#if authConfig.passwordLoginEnabled}
|
||||
<div class="inline-flex items-center justify-center w-full">
|
||||
<hr class="w-3/4 h-px my-4 bg-gray-200 border-0 dark:bg-gray-600" />
|
||||
<span
|
||||
class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 left-1/2 dark:text-white bg-white dark:bg-immich-dark-gray"
|
||||
>
|
||||
or
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="my-5 flex flex-col gap-5">
|
||||
{#if oauthError}
|
||||
<p class="text-red-400" transition:fade>{oauthError}</p>
|
||||
{/if}
|
||||
<a href={authConfig.url} class="flex w-full">
|
||||
<Button
|
||||
type="button"
|
||||
disabled={loading || oauthLoading}
|
||||
size="lg"
|
||||
fullwidth
|
||||
color={authConfig.passwordLoginEnabled ? 'secondary' : 'primary'}
|
||||
>
|
||||
{#if oauthLoading}
|
||||
<span class="h-6">
|
||||
<LoadingSpinner />
|
||||
</span>
|
||||
{:else}
|
||||
{authConfig.buttonText || 'Login with OAuth'}
|
||||
{/if}
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !authConfig.enabled && !authConfig.passwordLoginEnabled}
|
||||
<p class="text-center dark:text-immich-dark-fg p-4">Login has been disabled.</p>
|
||||
<p class="text-center dark:text-immich-dark-fg p-4">Login has been disabled.</p>
|
||||
{/if}
|
||||
|
Reference in New Issue
Block a user