self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-27 05:11:11 +02:00
Code Issues Releases Activity

feat(server,web): OIDC Implementation (#884)

Browse Source 
* chore: merge

* feat: nullable password

* feat: server debugger

* chore: regenerate api

* feat: auto-register flag

* refactor: oauth endpoints

* chore: regenerate api

* fix: default scope configuration

* refactor: pass in redirect uri from client

* chore: docs

* fix: bugs

* refactor: auth services and user repository

* fix: select password

* fix: tests

* fix: get signing algorithm from discovery document

* refactor: cookie constants

* feat: oauth logout

* test: auth services

* fix: query param check

* fix: regenerate open-api
This commit is contained in:
Jason Rasmussen
2022-11-14 21:24:25 -05:00
committed by GitHub
parent d476656789
commit d3c35ec9c5
51 changed files with 1997 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
web/src/lib/components/forms/login-form.svelte
View File

@ -1,17 +1,49 @@
<script lang="ts">
import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
import { loginPageMessage } from '$lib/constants';
import { api } from '@api';
import { createEventDispatcher } from 'svelte';
import { api, OAuthConfigResponseDto } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
let error: string;
let email = '';
let password = '';
let oauthError: string;
let oauthConfig: OAuthConfigResponseDto = { enabled: false };
let loading = true;
const dispatch = createEventDispatcher();
onMount(async () => {
const search = window.location.search;
if (search.includes('code=') || search.includes('error=')) {
try {
loading = true;
await api.oauthApi.callback({ url: window.location.href });
dispatch('success');
return;
} catch (e) {
console.error('Error [login-form] [oauth.callback]', e);
oauthError = 'Unable to complete OAuth login';
loading = false;
}
}
try {
const redirectUri = window.location.href.split('?')[0];
console.log(`OAuth Redirect URI: ${redirectUri}`);
const { data } = await api.oauthApi.generateConfig({ redirectUri });
oauthConfig = data;
} catch (e) {
console.error('Error [login-form] [oauth.generateConfig]', e);
}
loading = false;
});
const login = async () => {
try {
error = '';
loading = true;
const { data } = await api.authenticationApi.login({
email,
@ -27,6 +59,7 @@
return;
} catch (e) {
error = 'Incorrect email or password';
loading = false;
return;
}
};
@ -48,41 +81,65 @@
</p>
{/if}
<form on:submit|preventDefault={login} autocomplete="off">
<div class="m-4 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"
bind:value={email}
required
/>
{#if loading}
<div class="flex place-items-center place-content-center">
<LoadingSpinner />
</div>
{:else}
<form on:submit|preventDefault={login} autocomplete="off">
<div class="m-4 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"
bind:value={email}
required
/>
</div>
<div class="m-4 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"
bind:value={password}
required
/>
</div>
<div class="m-4 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"
bind:value={password}
required
/>
</div>
{#if error}
<p class="text-red-400 pl-4">{error}</p>
{/if}
{#if error}
<p class="text-red-400 pl-4">{error}</p>
{/if}
<div class="flex w-full">
<button
type="submit"
class="m-4 p-2 bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
>Login</button
>
</div>
</form>
<div class="flex w-full">
<button
type="submit"
disabled={loading}
class="m-4 p-2 bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
>Login</button
>
</div>
{#if oauthConfig.enabled}
<div class="flex flex-col gap-4 px-4">
<hr />
{#if oauthError}
<p class="text-red-400">{oauthError}</p>
{/if}
<a href={oauthConfig.url} class="flex w-full">
<button
type="button"
disabled={loading}
class="bg-immich-primary dark:bg-immich-dark-primary dark:text-immich-dark-gray dark:hover:bg-immich-dark-primary/80 hover:bg-immich-primary/75 px-6 py-4 text-white rounded-md shadow-md w-full font-semibold"
>{oauthConfig.buttonText || 'Login with OAuth'}</button
>
</a>
</div>
{/if}
</form>
{/if}
</div>