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

docs/docs/features/oauth.md

@@ -59,16 +59,17 @@ Before enabling OAuth in Immich, a new client application needs to be configured
 
 Once you have a new OAuth client application configured, Immich can be configured using the Administration Settings page, available on the web (Administration -> Settings).
 
-| Setting                      | Type    | Default              | Description                                                               |
-| ---------------------------- | ------- | -------------------- | ------------------------------------------------------------------------- |
-| Enabled                      | boolean | false                | Enable/disable OAuth                                                      |
-| Issuer URL                   | URL     | (required)           | Required. Self-discovery URL for client (from previous step)              |
-| Client ID                    | string  | (required)           | Required. Client ID (from previous step)                                  |
-| Client secret                | string  | (required)           | Required. Client Secret (previous step)                                   |
-| Scope                        | string  | openid email profile | Full list of scopes to send with the request (space delimited)            |
-| Button text                  | string  | Login with OAuth     | Text for the OAuth button on the web                                      |
-| Auto register                | boolean | true                 | When true, will automatically register a user the first time they sign in |
-| Mobile Redirect URI Override | URL     | (empty)              | Http(s) alternative mobile redirect URI                                   |
+| Setting                                              | Type    | Default              | Description                                                                         |
+| ---------------------------------------------------- | ------- | -------------------- | ----------------------------------------------------------------------------------- |
+| Enabled                                              | boolean | false                | Enable/disable OAuth                                                                |
+| Issuer URL                                           | URL     | (required)           | Required. Self-discovery URL for client (from previous step)                        |
+| Client ID                                            | string  | (required)           | Required. Client ID (from previous step)                                            |
+| Client Secret                                        | string  | (required)           | Required. Client Secret (previous step)                                             |
+| Scope                                                | string  | openid email profile | Full list of scopes to send with the request (space delimited)                      |
+| Button Text                                          | string  | Login with OAuth     | Text for the OAuth button on the web                                                |
+| Auto Register                                        | boolean | true                 | When true, will automatically register a user the first time they sign in           |
+| [Auto Launch](#auto-launch)                          | boolean | false                | When true, will skip the login page and automatically start the OAuth login process |
+| [Mobile Redirect URI Override](#mobile-redirect-uri) | URL     | (empty)              | Http(s) alternative mobile redirect URI                                             |
 
 :::info
 The Issuer URL should look something like the following, and return a valid json document.
@@ -79,6 +80,10 @@ The Issuer URL should look something like the following, and return a valid json
 The `.well-known/openid-configuration` part of the url is optional and will be automatically added during discovery.
 :::
 
+## Auto Launch
+
+When Auto Launch is enabled, the login page will automatically redirect the user to the OAuth authorization url, to login with OAuth. To access the login screen again, use the browser's back button, or navigate directly to `/auth/login?autoLaunch=0`.
+
 ## Mobile Redirect URI
 
 The redirect URI for the mobile app is `app.immich:/`, which is a [Custom Scheme](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app). If this custom scheme is an invalid redirect URI for your OAuth Provider, you can work around this by doing the following:

docs/docs/features/password-login.md

@@ -0,0 +1,32 @@
+# Password Login
+
+An overview of password login and related settings for Immich.
+
+## Enable/Disable
+
+Immich supports password login, which is enabled by default. The preferred way to disable it is via the [Administration Page](#administration-page), although it can also be changed via a [Server Command](#server-command) as well.
+
+### Administration Page
+
+To toggle the password login setting via the web, navigate to the "Administration", expand "Password Authentication", toggle the "Enabled" switch, and press "Save".
+
+![Password Login Settings](./img/password-login-settings.png)
+
+### Server Command
+
+There are two [Server Commands](/docs/features/server-commands.md) for password login:
+
+1. `enable-password-login`
+2. `disable-password-login`
+
+See [Server Commands](/docs/features/server-commands.md) for more details about how to run them.
+
+## Password Reset
+
+### Admin
+
+To reset the administrator password, use the `reset-admin-password` [Server Command](/docs/features/server-commands.md).
+
+### User
+
+Immich does not currently support self-service password reset. However, the administration can reset passwords for other users. See [User Management: Password Reset](/docs/features/user-management.mdx#password-reset) for more information about how to do this.

docs/docs/features/server-commands.md

@@ -1,21 +1,39 @@
 # Server Commands
 
-The `immich-server` docker image comes preinstalled with an administrative CLI that supports the following commands:
+The `immich-server` docker image comes preinstalled with an administrative CLI (`immich`) that supports the following commands:
 
-| Command                       | Description                           |
-| ----------------------------- | ------------------------------------- |
-| `immich help`                 | Display help                          |
-| `immich reset-admin-password` | Reset the password for the admin user |
+| Command                  | Description                           |
+| ------------------------ | ------------------------------------- |
+| `help`                   | Display help                          |
+| `reset-admin-password`   | Reset the password for the admin user |
+| `disable-password-login` | Disable password login                |
+| `enable-password-login`  | Enable password login                 |
 
 ## How to run a command
 
-To run a command, connect to the container and then execute it. For example:
+To run a command, connect to the container and then execute it by running `immich <command>`.
 
-```bash
-docker exec -it immich-server_1 sh
+## Examples
+
+```bash title="Reset Admin Password"
+docker exec -it immich_server sh
 
 /usr/src/app$ immich reset-admin-password
 ? Please choose a new password (optional) immich-is-awesome-unlike-this-password
 New password:
 immich-is-awesome-unlike-this-password
 ```
+
+```bash title="Disable Password Login"
+docker exec -it immich_server sh
+
+/usr/src/app$ immich disable-password-login
+Password login has been disabled.
+```
+
+```bash title="Enable Password Login"
+docker exec -it immich_server sh
+
+/usr/src/app$ immich enable-password-login
+Password login has been enabled.
+```

docs/docs/features/user-management.mdx

@@ -16,3 +16,9 @@ Immich supports multiple users, each with their own library.
 ## Delete a User
 
 If you need to remove a user from Immich, head to "Administration", where users can be scheduled for deletion. The user account will immediately become disabled and their library and all associated data will be removed after 7 days.
+
+## Password Reset
+
+To reset a user's password, click the pencil icon to edit a user, then click "Reset Password". The user's password will be reset to "password" and they have to change it next time the sign in.
+
+![Reset Password](./img/user-management-update.png)

mobile/openapi/.openapi-generator/FILES

@@ -76,6 +76,7 @@ doc/SystemConfigApi.md
 doc/SystemConfigDto.md
 doc/SystemConfigFFmpegDto.md
 doc/SystemConfigOAuthDto.md
+doc/SystemConfigPasswordLoginDto.md
 doc/SystemConfigStorageTemplateDto.md
 doc/SystemConfigTemplateStorageOptionDto.md
 doc/TagApi.md
@@ -178,6 +179,7 @@ lib/model/smart_info_response_dto.dart
 lib/model/system_config_dto.dart
 lib/model/system_config_f_fmpeg_dto.dart
 lib/model/system_config_o_auth_dto.dart
+lib/model/system_config_password_login_dto.dart
 lib/model/system_config_storage_template_dto.dart
 lib/model/system_config_template_storage_option_dto.dart
 lib/model/tag_response_dto.dart
@@ -267,6 +269,7 @@ test/system_config_api_test.dart
 test/system_config_dto_test.dart
 test/system_config_f_fmpeg_dto_test.dart
 test/system_config_o_auth_dto_test.dart
+test/system_config_password_login_dto_test.dart
 test/system_config_storage_template_dto_test.dart
 test/system_config_template_storage_option_dto_test.dart
 test/tag_api_test.dart

server/apps/cli/src/app.module.ts

@@ -1,10 +1,16 @@
-import { DatabaseModule, UserEntity } from '@app/database';
+import { DatabaseModule, SystemConfigEntity, UserEntity } from '@app/database';
 import { Module } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
+import { DisablePasswordLoginCommand, EnablePasswordLoginCommand } from './commands/password-login';
 import { PromptPasswordQuestions, ResetAdminPasswordCommand } from './commands/reset-admin-password.command';
 
 @Module({
-  imports: [DatabaseModule, TypeOrmModule.forFeature([UserEntity])],
-  providers: [ResetAdminPasswordCommand, PromptPasswordQuestions],
+  imports: [DatabaseModule, TypeOrmModule.forFeature([UserEntity, SystemConfigEntity])],
+  providers: [
+    ResetAdminPasswordCommand,
+    PromptPasswordQuestions,
+    EnablePasswordLoginCommand,
+    DisablePasswordLoginCommand,
+  ],
 })
 export class AppModule {}

server/apps/cli/src/commands/password-login.ts

@@ -0,0 +1,39 @@
+import { SystemConfigEntity, SystemConfigKey } from '@app/database';
+import { InjectRepository } from '@nestjs/typeorm';
+import axios from 'axios';
+import { Command, CommandRunner } from 'nest-commander';
+import { Repository } from 'typeorm';
+
+@Command({
+  name: 'enable-password-login',
+  description: 'Enable password login',
+})
+export class EnablePasswordLoginCommand extends CommandRunner {
+  constructor(
+    @InjectRepository(SystemConfigEntity) private repository: Repository<SystemConfigEntity>, //
+  ) {
+    super();
+  }
+
+  async run(): Promise<void> {
+    await this.repository.delete({ key: SystemConfigKey.PASSWORD_LOGIN_ENABLED });
+    await axios.post('http://localhost:3001/refresh-config');
+    console.log('Password login has been enabled.');
+  }
+}
+
+@Command({
+  name: 'disable-password-login',
+  description: 'Disable password login',
+})
+export class DisablePasswordLoginCommand extends CommandRunner {
+  constructor(@InjectRepository(SystemConfigEntity) private repository: Repository<SystemConfigEntity>) {
+    super();
+  }
+
+  async run(): Promise<void> {
+    await this.repository.save({ key: SystemConfigKey.PASSWORD_LOGIN_ENABLED, value: false });
+    await axios.post('http://localhost:3001/refresh-config');
+    console.log('Password login has been disabled.');
+  }
+}

server/apps/immich/src/api-v1/album/album.service.spec.ts

@@ -136,6 +136,8 @@ describe('Album service', () => {
       getById: jest.fn(),
       getByKey: jest.fn(),
       save: jest.fn(),
+      hasAssetAccess: jest.fn(),
+      getByIdAndUserId: jest.fn(),
     };
 
     downloadServiceMock = {

server/apps/immich/src/api-v1/asset/asset.service.spec.ts

@@ -130,7 +130,6 @@ describe('AssetService', () => {
       getAssetWithNoSmartInfo: jest.fn(),
       getExistingAssets: jest.fn(),
       countByIdAndUser: jest.fn(),
-      getSharePermission: jest.fn(),
     };
 
     downloadServiceMock = {
@@ -144,6 +143,8 @@ describe('AssetService', () => {
       getByKey: jest.fn(),
       remove: jest.fn(),
       save: jest.fn(),
+      hasAssetAccess: jest.fn(),
+      getByIdAndUserId: jest.fn(),
     };
 
     sui = new AssetService(

server/apps/immich/src/api-v1/auth/auth.module.ts

@@ -1,4 +1,5 @@
 import { Module } from '@nestjs/common';
+import { ImmichConfigModule } from '@app/immich-config';
 import { ImmichJwtModule } from '../../modules/immich-jwt/immich-jwt.module';
 import { OAuthModule } from '../oauth/oauth.module';
 import { UserModule } from '../user/user.module';
@@ -6,7 +7,7 @@ import { AuthController } from './auth.controller';
 import { AuthService } from './auth.service';
 
 @Module({
-  imports: [UserModule, ImmichJwtModule, OAuthModule],
+  imports: [UserModule, ImmichJwtModule, OAuthModule, ImmichConfigModule],
   controllers: [AuthController],
   providers: [AuthService],
 })

server/apps/immich/src/api-v1/auth/auth.service.spec.ts

@@ -1,6 +1,8 @@
 import { UserEntity } from '@app/database';
 import { BadRequestException, UnauthorizedException } from '@nestjs/common';
 import * as bcrypt from 'bcrypt';
+import { SystemConfig } from '@app/database/entities/system-config.entity';
+import { ImmichConfigService } from '@app/immich-config';
 import { AuthType } from '../../constants/jwt.constant';
 import { ImmichJwtService } from '../../modules/immich-jwt/immich-jwt.service';
 import { OAuthService } from '../oauth/oauth.service';
@@ -16,6 +18,19 @@ const fixtures = {
   },
 };
 
+const config = {
+  enabled: {
+    passwordLogin: {
+      enabled: true,
+    },
+  } as SystemConfig,
+  disabled: {
+    passwordLogin: {
+      enabled: false,
+    },
+  } as SystemConfig,
+};
+
 const CLIENT_IP = '127.0.0.1';
 
 jest.mock('bcrypt');
@@ -35,6 +50,7 @@ describe('AuthService', () => {
   let sut: AuthService;
   let userRepositoryMock: jest.Mocked<IUserRepository>;
   let immichJwtServiceMock: jest.Mocked<ImmichJwtService>;
+  let immichConfigServiceMock: jest.Mocked<ImmichConfigService>;
   let oauthServiceMock: jest.Mocked<OAuthService>;
   let compare: jest.Mock;
 
@@ -71,14 +87,40 @@ describe('AuthService', () => {
       getLogoutEndpoint: jest.fn(),
     } as unknown as jest.Mocked<OAuthService>;
 
-    sut = new AuthService(oauthServiceMock, immichJwtServiceMock, userRepositoryMock);
+    immichConfigServiceMock = {
+      config$: { subscribe: jest.fn() },
+    } as unknown as jest.Mocked<ImmichConfigService>;
+
+    sut = new AuthService(
+      oauthServiceMock,
+      immichJwtServiceMock,
+      userRepositoryMock,
+      immichConfigServiceMock,
+      config.enabled,
+    );
   });
 
   it('should be defined', () => {
     expect(sut).toBeDefined();
   });
 
+  it('should subscribe to config changes', async () => {
+    expect(immichConfigServiceMock.config$.subscribe).toHaveBeenCalled();
+  });
+
   describe('login', () => {
+    it('should throw an error if password login is disabled', async () => {
+      sut = new AuthService(
+        oauthServiceMock,
+        immichJwtServiceMock,
+        userRepositoryMock,
+        immichConfigServiceMock,
+        config.disabled,
+      );
+
+      await expect(sut.login(fixtures.login, CLIENT_IP)).rejects.toBeInstanceOf(UnauthorizedException);
+    });
+
     it('should check the user exists', async () => {
       userRepositoryMock.getByEmail.mockResolvedValue(null);
       await expect(sut.login(fixtures.login, CLIENT_IP)).rejects.toBeInstanceOf(BadRequestException);
@@ -170,7 +212,7 @@ describe('AuthService', () => {
     it('should return the default redirect', async () => {
       await expect(sut.logout(AuthType.PASSWORD)).resolves.toEqual({
         successful: true,
-        redirectUri: '/auth/login',
+        redirectUri: '/auth/login?autoLaunch=0',
       });
       expect(oauthServiceMock.getLogoutEndpoint).not.toHaveBeenCalled();
     });

server/apps/immich/src/api-v1/auth/auth.service.ts

@@ -20,6 +20,8 @@ import { LoginResponseDto } from './response-dto/login-response.dto';
 import { LogoutResponseDto } from './response-dto/logout-response.dto';
 import { OAuthService } from '../oauth/oauth.service';
 import { UserCore } from '../user/user.core';
+import { ImmichConfigService, INITIAL_SYSTEM_CONFIG } from '@app/immich-config';
+import { SystemConfig } from '@app/database/entities/system-config.entity';
 
 @Injectable()
 export class AuthService {
@@ -30,11 +32,18 @@ export class AuthService {
     private oauthService: OAuthService,
     private immichJwtService: ImmichJwtService,
     @Inject(IUserRepository) userRepository: IUserRepository,
+    private configService: ImmichConfigService,
+    @Inject(INITIAL_SYSTEM_CONFIG) private config: SystemConfig,
   ) {
     this.userCore = new UserCore(userRepository);
+    this.configService.config$.subscribe((config) => (this.config = config));
   }
 
   public async login(loginCredential: LoginCredentialDto, clientIp: string): Promise<LoginResponseDto> {
+    if (!this.config.passwordLogin.enabled) {
+      throw new UnauthorizedException('Password login has been disabled');
+    }
+
     let user = await this.userCore.getByEmail(loginCredential.email, true);
 
     if (user) {
@@ -60,7 +69,7 @@ export class AuthService {
       }
     }
 
-    return { successful: true, redirectUri: '/auth/login' };
+    return { successful: true, redirectUri: '/auth/login?autoLaunch=0' };
   }
 
   public async changePassword(authUser: AuthUserDto, dto: ChangePasswordDto) {

server/apps/immich/src/api-v1/oauth/oauth.service.spec.ts

@@ -17,29 +17,37 @@ const config = {
       enabled: false,
       buttonText: 'OAuth',
       issuerUrl: 'http://issuer,',
+      autoLaunch: false,
     },
+    passwordLogin: { enabled: true },
   } as SystemConfig,
   enabled: {
     oauth: {
       enabled: true,
       autoRegister: true,
       buttonText: 'OAuth',
+      autoLaunch: false,
     },
+    passwordLogin: { enabled: true },
   } as SystemConfig,
   noAutoRegister: {
     oauth: {
       enabled: true,
       autoRegister: false,
+      autoLaunch: false,
     },
+    passwordLogin: { enabled: true },
   } as SystemConfig,
   override: {
     oauth: {
       enabled: true,
       autoRegister: true,
+      autoLaunch: false,
       buttonText: 'OAuth',
       mobileOverrideEnabled: true,
       mobileRedirectUri: 'http://mobile-redirect',
     },
+    passwordLogin: { enabled: true },
   } as SystemConfig,
 };
 
@@ -124,7 +132,6 @@ describe('OAuthService', () => {
 
     immichConfigServiceMock = {
       config$: { subscribe: jest.fn() },
-      getConfig: jest.fn().mockResolvedValue({ oauth: { enabled: false } }),
     } as unknown as jest.Mocked<ImmichConfigService>;
 
     sut = new OAuthService(immichJwtServiceMock, immichConfigServiceMock, userRepositoryMock, config.disabled);
@@ -136,7 +143,10 @@ describe('OAuthService', () => {
 
   describe('generateConfig', () => {
     it('should work when oauth is not configured', async () => {
-      await expect(sut.generateConfig({ redirectUri: 'http://callback' })).resolves.toEqual({ enabled: false });
+      await expect(sut.generateConfig({ redirectUri: 'http://callback' })).resolves.toEqual({
+        enabled: false,
+        passwordLoginEnabled: true,
+      });
     });
 
     it('should generate the config', async () => {
@@ -145,6 +155,8 @@ describe('OAuthService', () => {
         enabled: true,
         buttonText: 'OAuth',
         url: 'http://authorization-url',
+        autoLaunch: false,
+        passwordLoginEnabled: true,
       });
     });
   });

server/apps/immich/src/api-v1/oauth/oauth.service.ts

@@ -39,19 +39,24 @@ export class OAuthService {
   }
 
   public async generateConfig(dto: OAuthConfigDto): Promise<OAuthConfigResponseDto> {
-    const { enabled, scope, buttonText } = this.config.oauth;
-    const redirectUri = this.normalize(dto.redirectUri);
+    const response = {
+      enabled: this.config.oauth.enabled,
+      passwordLoginEnabled: this.config.passwordLogin.enabled,
+    };
 
-    if (!enabled) {
-      return { enabled: false };
+    if (!response.enabled) {
+      return response;
     }
 
+    const { scope, buttonText, autoLaunch } = this.config.oauth;
+    const redirectUri = this.normalize(dto.redirectUri);
     const url = (await this.getClient()).authorizationUrl({
       redirect_uri: redirectUri,
       scope,
       state: generators.state(),
     });
-    return { enabled: true, buttonText, url };
+
+    return { ...response, buttonText, url, autoLaunch };
   }
 
   public async login(dto: OAuthCallbackDto): Promise<LoginResponseDto> {

server/apps/immich/src/api-v1/oauth/response-dto/oauth-config-response.dto.ts

@@ -1,12 +1,7 @@
-import { ApiResponseProperty } from '@nestjs/swagger';
-
 export class OAuthConfigResponseDto {
-  @ApiResponseProperty()
   enabled!: boolean;
-
-  @ApiResponseProperty()
+  passwordLoginEnabled!: boolean;
   url?: string;
-
-  @ApiResponseProperty()
   buttonText?: string;
+  autoLaunch?: boolean;
 }

server/apps/immich/src/api-v1/system-config/dto/system-config-oauth.dto.ts

@@ -31,6 +31,9 @@ export class SystemConfigOAuthDto {
   @IsBoolean()
   autoRegister!: boolean;
 
+  @IsBoolean()
+  autoLaunch!: boolean;
+
   @IsBoolean()
   mobileOverrideEnabled!: boolean;
 

server/apps/immich/src/api-v1/system-config/dto/system-config-password-login.dto.ts

@@ -0,0 +1,6 @@
+import { IsBoolean } from 'class-validator';
+
+export class SystemConfigPasswordLoginDto {
+  @IsBoolean()
+  enabled!: boolean;
+}

server/apps/immich/src/api-v1/system-config/dto/system-config.dto.ts

@@ -2,6 +2,7 @@ import { SystemConfig } from '@app/database';
 import { ValidateNested } from 'class-validator';
 import { SystemConfigFFmpegDto } from './system-config-ffmpeg.dto';
 import { SystemConfigOAuthDto } from './system-config-oauth.dto';
+import { SystemConfigPasswordLoginDto } from './system-config-password-login.dto';
 import { SystemConfigStorageTemplateDto } from './system-config-storage-template.dto';
 
 export class SystemConfigDto {
@@ -11,6 +12,9 @@ export class SystemConfigDto {
   @ValidateNested()
   oauth!: SystemConfigOAuthDto;
 
+  @ValidateNested()
+  passwordLogin!: SystemConfigPasswordLoginDto;
+
   @ValidateNested()
   storageTemplate!: SystemConfigStorageTemplateDto;
 }

server/apps/immich/src/app.controller.ts

@@ -1,3 +1,15 @@
-import { Controller } from '@nestjs/common';
+import { Controller, HttpCode, HttpStatus, Post } from '@nestjs/common';
+import { ApiExcludeEndpoint } from '@nestjs/swagger';
+import { ImmichConfigService } from '@app/immich-config';
+
 @Controller()
-export class AppController {}
+export class AppController {
+  constructor(private configService: ImmichConfigService) {}
+
+  @ApiExcludeEndpoint()
+  @Post('refresh-config')
+  @HttpCode(HttpStatus.OK)
+  public reloadConfig() {
+    return this.configService.refreshConfig();
+  }
+}

server/apps/immich/src/app.module.ts

@@ -3,6 +3,7 @@ import { MiddlewareConsumer, Module, NestModule } from '@nestjs/common';
 import { UserModule } from './api-v1/user/user.module';
 import { AssetModule } from './api-v1/asset/asset.module';
 import { AuthModule } from './api-v1/auth/auth.module';
+import { APIKeyModule } from './api-v1/api-key/api-key.module';
 import { ImmichJwtModule } from './modules/immich-jwt/immich-jwt.module';
 import { DeviceInfoModule } from './api-v1/device-info/device-info.module';
 import { ConfigModule } from '@nestjs/config';
@@ -19,8 +20,8 @@ import { JobModule } from './api-v1/job/job.module';
 import { SystemConfigModule } from './api-v1/system-config/system-config.module';
 import { OAuthModule } from './api-v1/oauth/oauth.module';
 import { TagModule } from './api-v1/tag/tag.module';
+import { ImmichConfigModule } from '@app/immich-config';
 import { ShareModule } from './api-v1/share/share.module';
-import { APIKeyModule } from './api-v1/api-key/api-key.module';
 
 @Module({
   imports: [
@@ -37,6 +38,7 @@ import { APIKeyModule } from './api-v1/api-key/api-key.module';
     OAuthModule,
 
     ImmichJwtModule,
+    ImmichConfigModule,
 
     DeviceInfoModule,
 

server/apps/immich/src/modules/immich-jwt/strategies/api-key.strategy.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@nestjs/common';
 import { PassportStrategy } from '@nestjs/passport';
-import { AuthUserDto } from 'apps/immich/src/decorators/auth-user.decorator';
 import { IStrategyOptions, Strategy } from 'passport-http-header-strategy';
 import { APIKeyService } from '../../../api-v1/api-key/api-key.service';
+import { AuthUserDto } from '../../../decorators/auth-user.decorator';
 
 export const API_KEY_STRATEGY = 'api-key';
 

server/apps/immich/src/modules/immich-jwt/strategies/jwt.strategy.ts

@@ -1,13 +1,13 @@
+import { UserEntity } from '@app/database';
 import { Injectable, UnauthorizedException } from '@nestjs/common';
 import { PassportStrategy } from '@nestjs/passport';
 import { InjectRepository } from '@nestjs/typeorm';
 import { ExtractJwt, Strategy, StrategyOptions } from 'passport-jwt';
 import { Repository } from 'typeorm';
 import { JwtPayloadDto } from '../../../api-v1/auth/dto/jwt-payload.dto';
-import { UserEntity } from '@app/database';
 import { jwtSecret } from '../../../constants/jwt.constant';
+import { AuthUserDto } from '../../../decorators/auth-user.decorator';
 import { ImmichJwtService } from '../immich-jwt.service';
-import { AuthUserDto } from 'apps/immich/src/decorators/auth-user.decorator';
 
 export const JWT_STRATEGY = 'jwt';
 

server/apps/immich/src/modules/immich-jwt/strategies/public-share.strategy.ts

@@ -2,10 +2,10 @@ import { UserEntity } from '@app/database';
 import { Injectable, UnauthorizedException } from '@nestjs/common';
 import { PassportStrategy } from '@nestjs/passport';
 import { InjectRepository } from '@nestjs/typeorm';
-import { ShareService } from '../../../api-v1/share/share.service';
 import { IStrategyOptions, Strategy } from 'passport-http-header-strategy';
 import { Repository } from 'typeorm';
-import { AuthUserDto } from 'apps/immich/src/decorators/auth-user.decorator';
+import { ShareService } from '../../../api-v1/share/share.service';
+import { AuthUserDto } from '../../../decorators/auth-user.decorator';
 
 export const PUBLIC_SHARE_STRATEGY = 'public-share';
 

server/immich-openapi-specs.json

@@ -3936,20 +3936,24 @@
         "type": "object",
         "properties": {
           "enabled": {
-            "type": "boolean",
-            "readOnly": true
+            "type": "boolean"
+          },
+          "passwordLoginEnabled": {
+            "type": "boolean"
           },
           "url": {
-            "type": "string",
-            "readOnly": true
+            "type": "string"
           },
           "buttonText": {
-            "type": "string",
-            "readOnly": true
+            "type": "string"
+          },
+          "autoLaunch": {
+            "type": "boolean"
           }
         },
         "required": [
-          "enabled"
+          "enabled",
+          "passwordLoginEnabled"
         ]
       },
       "OAuthCallbackDto": {
@@ -4334,6 +4338,9 @@
           "autoRegister": {
             "type": "boolean"
           },
+          "autoLaunch": {
+            "type": "boolean"
+          },
           "mobileOverrideEnabled": {
             "type": "boolean"
           },
@@ -4349,10 +4356,22 @@
           "scope",
           "buttonText",
           "autoRegister",
+          "autoLaunch",
           "mobileOverrideEnabled",
           "mobileRedirectUri"
         ]
       },
+      "SystemConfigPasswordLoginDto": {
+        "type": "object",
+        "properties": {
+          "enabled": {
+            "type": "boolean"
+          }
+        },
+        "required": [
+          "enabled"
+        ]
+      },
       "SystemConfigStorageTemplateDto": {
         "type": "object",
         "properties": {
@@ -4373,6 +4392,9 @@
           "oauth": {
             "$ref": "#/components/schemas/SystemConfigOAuthDto"
           },
+          "passwordLogin": {
+            "$ref": "#/components/schemas/SystemConfigPasswordLoginDto"
+          },
           "storageTemplate": {
             "$ref": "#/components/schemas/SystemConfigStorageTemplateDto"
           }
@@ -4380,6 +4402,7 @@
         "required": [
           "ffmpeg",
           "oauth",
+          "passwordLogin",
           "storageTemplate"
         ]
       },

server/libs/database/src/entities/system-config.entity.ts

@@ -1,7 +1,7 @@
 import { Column, Entity, PrimaryColumn } from 'typeorm';
 
 @Entity('system_config')
-export class SystemConfigEntity<T = string> {
+export class SystemConfigEntity<T = string | boolean> {
   @PrimaryColumn()
   key!: SystemConfigKey;
 
@@ -23,10 +23,12 @@ export enum SystemConfigKey {
   OAUTH_CLIENT_ID = 'oauth.clientId',
   OAUTH_CLIENT_SECRET = 'oauth.clientSecret',
   OAUTH_SCOPE = 'oauth.scope',
+  OAUTH_AUTO_LAUNCH = 'oauth.autoLaunch',
   OAUTH_BUTTON_TEXT = 'oauth.buttonText',
   OAUTH_AUTO_REGISTER = 'oauth.autoRegister',
   OAUTH_MOBILE_OVERRIDE_ENABLED = 'oauth.mobileOverrideEnabled',
   OAUTH_MOBILE_REDIRECT_URI = 'oauth.mobileRedirectUri',
+  PASSWORD_LOGIN_ENABLED = 'passwordLogin.enabled',
   STORAGE_TEMPLATE = 'storageTemplate.template',
 }
 
@@ -46,9 +48,13 @@ export interface SystemConfig {
     scope: string;
     buttonText: string;
     autoRegister: boolean;
+    autoLaunch: boolean;
     mobileOverrideEnabled: boolean;
     mobileRedirectUri: string;
   };
+  passwordLogin: {
+    enabled: boolean;
+  };
   storageTemplate: {
     template: string;
   };

server/libs/immich-config/src/immich-config.service.ts

@@ -25,6 +25,10 @@ const defaults: SystemConfig = Object.freeze({
     scope: 'openid email profile',
     buttonText: 'Login with OAuth',
     autoRegister: true,
+    autoLaunch: false,
+  },
+  passwordLogin: {
+    enabled: true,
   },
 
   storageTemplate: {

web/package.json

@@ -6,7 +6,7 @@
 		"build": "vite build",
 		"package": "svelte-kit package",
 		"preview": "vite preview",
-		"check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings",
+		"check": "svelte-check --no-tsconfig --fail-on-warnings --ignore \"src/api/open-api\"",
 		"check:watch": "npm run check -- --watch",
 		"check:code": "npm run format && npm run lint && npm run check",
 		"check:all": "npm run check:code && npm test",

web/src/api/open-api/api.ts

@@ -1377,6 +1377,12 @@ export interface OAuthConfigResponseDto {
      * @memberof OAuthConfigResponseDto
      */
     'enabled': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof OAuthConfigResponseDto
+     */
+    'passwordLoginEnabled': boolean;
     /**
      * 
      * @type {string}
@@ -1389,6 +1395,12 @@ export interface OAuthConfigResponseDto {
      * @memberof OAuthConfigResponseDto
      */
     'buttonText'?: string;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof OAuthConfigResponseDto
+     */
+    'autoLaunch'?: boolean;
 }
 /**
  * 
@@ -1602,10 +1614,10 @@ export interface SharedLinkResponseDto {
     'expiresAt': string | null;
     /**
      * 
-     * @type {Array<string>}
+     * @type {Array<AssetResponseDto>}
      * @memberof SharedLinkResponseDto
      */
-    'assets': Array<string>;
+    'assets': Array<AssetResponseDto>;
     /**
      * 
      * @type {AlbumResponseDto}
@@ -1707,6 +1719,12 @@ export interface SystemConfigDto {
      * @memberof SystemConfigDto
      */
     'oauth': SystemConfigOAuthDto;
+    /**
+     * 
+     * @type {SystemConfigPasswordLoginDto}
+     * @memberof SystemConfigDto
+     */
+    'passwordLogin': SystemConfigPasswordLoginDto;
     /**
      * 
      * @type {SystemConfigStorageTemplateDto}
@@ -1799,6 +1817,12 @@ export interface SystemConfigOAuthDto {
      * @memberof SystemConfigOAuthDto
      */
     'autoRegister': boolean;
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SystemConfigOAuthDto
+     */
+    'autoLaunch': boolean;
     /**
      * 
      * @type {boolean}
@@ -1812,6 +1836,19 @@ export interface SystemConfigOAuthDto {
      */
     'mobileRedirectUri': string;
 }
+/**
+ * 
+ * @export
+ * @interface SystemConfigPasswordLoginDto
+ */
+export interface SystemConfigPasswordLoginDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof SystemConfigPasswordLoginDto
+     */
+    'enabled': boolean;
+}
 /**
  * 
  * @export

web/src/api/utils.ts

@@ -22,6 +22,15 @@ export const oauth = {
 		const search = location.search;
 		return search.includes('code=') || search.includes('error=');
 	},
+	isAutoLaunchDisabled: (location: Location) => {
+		const values = ['autoLaunch=0', 'password=1', 'password=true'];
+		for (const value of values) {
+			if (location.search.includes(value)) {
+				return true;
+			}
+		}
+		return false;
+	},
 	getConfig: (location: Location) => {
 		const redirectUri = location.href.split('?')[0];
 		console.log(`OAuth Redirect URI: ${redirectUri}`);

web/src/lib/components/admin-page/settings/confirm-disable-login.svelte

@@ -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>

web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte

@@ -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."

web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte

@@ -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>

web/src/lib/components/album-page/__tests__/album-card.spec.ts

@@ -93,7 +93,6 @@ describe('AlbumCard component', () => {
 		expect(apiMock.assetApi.getAssetThumbnail).toHaveBeenCalledWith(
 			'thumbnailIdOne',
 			ThumbnailFormat.Jpeg,
-			'',
 			{ responseType: 'blob' }
 		);
 		expect(createObjectURLMock).toHaveBeenCalledWith(thumbnailBlob);

web/src/lib/components/album-page/album-viewer.svelte

@@ -439,7 +439,7 @@
 
 	const handleDownloadSelectedAssets = async () => {
 		await bulkDownload(
-      album.albumName,
+			album.albumName,
 			Array.from(multiSelectAsset),
 			() => {
 				isMultiSelectionMode = false;

web/src/lib/components/asset-viewer/album-list-item.svelte

@@ -6,7 +6,7 @@
 
 	export let album: AlbumResponseDto;
 	export let variant: 'simple' | 'full' = 'full';
-	export let searchQuery: string = '';
+	export let searchQuery = '';
 	let albumNameArray: string[] = ['', '', ''];
 
 	// This part of the code is responsible for splitting album name into 3 parts where part 2 is the search query

web/src/lib/components/asset-viewer/video-viewer.svelte

@@ -9,7 +9,6 @@
 	export let publicSharedKey = '';
 	let asset: AssetResponseDto;
 
-	let videoPlayerNode: HTMLVideoElement;
 	let isVideoLoading = true;
 	let videoUrl: string;
 	const dispatch = createEventDispatcher();
@@ -55,7 +54,6 @@
 			class="h-full object-contain"
 			on:canplay={handleCanPlay}
 			on:ended={() => dispatch('onVideoEnded')}
-			bind:this={videoPlayerNode}
 		>
 			<source src={videoUrl} type="video/mp4" />
 			<track kind="captions" />

web/src/lib/components/forms/login-form.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
 	import { loginPageMessage } from '$lib/constants';
 	import { api, oauth, OAuthConfigResponseDto } from '@api';
@@ -8,7 +9,7 @@
 	let email = '';
 	let password = '';
 	let oauthError: string;
-	let oauthConfig: OAuthConfigResponseDto = { enabled: false };
+	let oauthConfig: OAuthConfigResponseDto = { enabled: false, passwordLoginEnabled: false };
 	let loading = true;
 
 	const dispatch = createEventDispatcher();
@@ -30,6 +31,14 @@
 		try {
 			const { data } = await oauth.getConfig(window.location);
 			oauthConfig = data;
+
+			const { enabled, url, autoLaunch } = oauthConfig;
+
+			if (enabled && url && autoLaunch && !oauth.isAutoLaunchDisabled(window.location)) {
+				await goto('/auth/login?autoLaunch=0', { replaceState: true });
+				await goto(url);
+				return;
+			}
 		} catch (e) {
 			console.error('Error [login-form] [oauth.generateConfig]', e);
 		}
@@ -83,60 +92,68 @@
 			<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>
-
-			{#if error}
-				<p class="text-red-400 pl-4">{error}</p>
-			{/if}
-
-			<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>
+		{#if oauthConfig.passwordLoginEnabled}
+			<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>
-			{/if}
-		</form>
+
+				<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}
+
+				<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>
+			</form>
+		{/if}
+
+		{#if oauthConfig.enabled}
+			<div class="flex flex-col gap-4 px-4">
+				{#if oauthConfig.passwordLoginEnabled}
+					<hr />
+				{/if}
+				{#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}
+
+		{#if !oauthConfig.enabled && !oauthConfig.passwordLoginEnabled}
+			<p class="text-center dark:text-immich-dark-fg p-4">Login has been disabled.</p>
+		{/if}
 	{/if}
 </div>

web/src/lib/components/shared-components/confirm-dialogue.svelte

@@ -2,8 +2,8 @@
 	import { createEventDispatcher } from 'svelte';
 	import FullScreenModal from './full-screen-modal.svelte';
 
-	export let title = 'Confirm Delete';
-	export let prompt = 'Are you sure you want to delete this item?';
+	export let title = 'Confirm';
+	export let prompt = 'Are you sure you want to do this?';
 	export let confirmText = 'Confirm';
 	export let cancelText = 'Cancel';
 
@@ -19,12 +19,14 @@
 		<div
 			class="flex flex-col place-items-center place-content-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
 		>
-			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium">
+			<h1 class="text-2xl text-immich-primary dark:text-immich-dark-primary font-medium pb-2">
 				{title}
 			</h1>
 		</div>
 		<div>
-			<p class="ml-4 text-md py-5 text-center">{prompt}</p>
+			<slot name="prompt">
+				<p class="ml-4 text-md py-5 text-center">{prompt}</p>
+			</slot>
 
 			<div class="flex w-full px-4 gap-4 mt-4">
 				<button

web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte

@@ -15,7 +15,6 @@
 	export let album: AlbumResponseDto | undefined;
 	export let editingLink: SharedLinkResponseDto | undefined = undefined;
 
-	let isLoading = false;
 	let isShowSharedLink = false;
 	let expirationTime = '';
 	let isAllowUpload = false;
@@ -40,7 +39,6 @@
 
 	const createAlbumSharedLink = async () => {
 		if (album) {
-			isLoading = true;
 			try {
 				const expirationTime = getExpirationTimeInMillisecond();
 				const currentTime = new Date().getTime();
@@ -56,7 +54,6 @@
 				});
 
 				buildSharedLink(data);
-				isLoading = false;
 				isShowSharedLink = true;
 			} catch (e) {
 				console.error('[createAlbumSharedLink] Error: ', e);
@@ -64,7 +61,6 @@
 					type: NotificationType.Error,
 					message: 'Failed to create shared link'
 				});
-				isLoading = false;
 			}
 		}
 	};

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -34,9 +34,9 @@
 	const logOut = async () => {
 		const { data } = await api.authenticationApi.logout();
 
-		await fetch('auth/logout', { method: 'POST' });
+		await fetch('/auth/logout', { method: 'POST' });
 
-		goto(data.redirectUri || '/auth/login');
+		goto(data.redirectUri || '/auth/login?autoLaunch=0');
 	};
 </script>
 

web/src/lib/components/shared-components/portal/portal.svelte

@@ -47,9 +47,8 @@
 <script lang="ts">
 	/**
 	 * DOM Element or CSS Selector
-	 * @type { HTMLElement|string}
 	 */
-	export let target = 'body';
+	export let target: HTMLElement | string = 'body';
 </script>
 
 <div use:portal={target} hidden>

web/src/lib/components/sharedlinks-page/shared-link-card.svelte

@@ -21,7 +21,7 @@
 		if (link.album?.albumThumbnailAssetId) {
 			assetId = link.album.albumThumbnailAssetId;
 		} else if (link.assets.length > 0) {
-			assetId = link.assets[0];
+			assetId = link.assets[0].id;
 		}
 
 		const { data } = await api.assetApi.getAssetById(assetId);

web/src/lib/components/user-settings-page/oauth-settings.svelte

@@ -12,7 +12,7 @@
 
 	export let user: UserResponseDto;
 
-	let config: OAuthConfigResponseDto = { enabled: false };
+	let config: OAuthConfigResponseDto = { enabled: false, passwordLoginEnabled: true };
 	let loading = true;
 
 	onMount(async () => {

web/src/lib/components/user-settings-page/user-api-key-list.svelte

@@ -7,7 +7,7 @@
 	import { handleError } from '../../utils/handle-error';
 	import APIKeyForm from '../forms/api-key-form.svelte';
 	import APIKeySecret from '../forms/api-key-secret.svelte';
-	import DeleteConfirmDialogue from '../shared-components/delete-confirm-dialogue.svelte';
+	import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
 	import {
 		notificationController,
 		NotificationType
@@ -114,7 +114,7 @@
 {/if}
 
 {#if deleteKey}
-	<DeleteConfirmDialogue
+	<ConfirmDialogue
 		prompt="Are you sure you want to delete this API Key?"
 		on:confirm={() => handleDelete()}
 		on:cancel={() => (deleteKey = null)}

web/src/lib/utils/asset-utils.ts

@@ -4,7 +4,6 @@ import {
 	NotificationType
 } from '$lib/components/shared-components/notification/notification';
 import { downloadAssets } from '$lib/stores/download';
-import { get } from 'svelte/store';
 
 export const addAssetsToAlbum = async (
 	albumId: string,
@@ -34,7 +33,7 @@ export async function bulkDownload(
 	const assetIds = assets.map((asset) => asset.id);
 
 	try {
-		let skip = 0;
+		// let skip = 0;
 		let count = 0;
 		let done = false;
 
@@ -68,7 +67,7 @@ export async function bulkDownload(
 			const isNotComplete = headers['x-immich-archive-complete'] === 'false';
 			const fileCount = Number(headers['x-immich-archive-file-count']) || 0;
 			if (isNotComplete && fileCount > 0) {
-				skip += fileCount;
+				// skip += fileCount;
 			} else {
 				onDone();
 				done = true;

web/src/routes/admin/system-settings/+page.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import FFmpegSettings from '$lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte';
 	import OAuthSettings from '$lib/components/admin-page/settings/oauth/oauth-settings.svelte';
+	import PasswordLoginSettings from '$lib/components/admin-page/settings/password-login/password-login-settings.svelte';
 	import SettingAccordion from '$lib/components/admin-page/settings/setting-accordion.svelte';
 	import StorageTemplateSettings from '$lib/components/admin-page/settings/storate-template/storage-template-settings.svelte';
 	import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
-	import { api, SystemConfigDto } from '@api';
+	import { api } from '@api';
 	import type { PageData } from './$types';
-	import { page } from '$app/stores';
 
-	let systemConfig: SystemConfigDto;
 	export let data: PageData;
+
 	const getConfig = async () => {
 		const { data } = await api.systemConfigApi.getConfig();
-		systemConfig = data;
-
 		return data;
 	};
 </script>
@@ -33,7 +32,14 @@
 			<FFmpegSettings ffmpegConfig={configs.ffmpeg} />
 		</SettingAccordion>
 
-		<SettingAccordion title="OAuth Settings" subtitle="Manage the OAuth integration to Immich app">
+		<SettingAccordion
+			title="Password Authentication"
+			subtitle="Manage login with password settings"
+		>
+			<PasswordLoginSettings passwordLoginConfig={configs.passwordLogin} />
+		</SettingAccordion>
+
+		<SettingAccordion title="OAuth Authentication" subtitle="Manage the login with OAuth settings">
 			<OAuthSettings oauthConfig={configs.oauth} />
 		</SettingAccordion>