From 6ed6802119f8345e7feefc435e9e091bb7f957dc Mon Sep 17 00:00:00 2001
From: Pierre Romera <hello@pirhoo.com>
Date: Wed, 14 Aug 2024 09:41:27 +0000
Subject: [PATCH] feat: add LoginImage component

---
 components.d.ts                               |   1 +
 .../images/illustrations/login-image-dark.svg |  31 +++++
 .../illustrations/login-image-light.svg       |  31 +++++
 src/components/Login/LoginImage.vue           | 113 ++++++++++++++++++
 .../components/Login/LoginImage.stories.js    |  28 +++++
 5 files changed, 204 insertions(+)
 create mode 100644 src/assets/images/illustrations/login-image-dark.svg
 create mode 100644 src/assets/images/illustrations/login-image-light.svg
 create mode 100644 src/components/Login/LoginImage.vue
 create mode 100644 src/stories/components/Login/LoginImage.stories.js

diff --git a/components.d.ts b/components.d.ts
index 11041f37a2..25a7036b05 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -299,6 +299,7 @@ declare module 'vue' {
     LinkedDocumentListEntry: typeof import('./src/components/LinkedDocument/LinkedDocumentListEntry.vue')['default']
     LinkedDocumentSection: typeof import('./src/components/LinkedDocument/LinkedDocumentSection.vue')['default']
     LocalesMenu: typeof import('./src/components/LocalesMenu.vue')['default']
+    LoginImage: typeof import('./src/components/Login/LoginImage.vue')['default']
     MountedDataLocation: typeof import('./src/components/MountedDataLocation.vue')['default']
     NamedEntityButton: typeof import('./src/components/NamedEntity/NamedEntityButton.vue')['default']
     NamedEntityInContext: typeof import('./src/components/NamedEntityInContext.vue')['default']
diff --git a/src/assets/images/illustrations/login-image-dark.svg b/src/assets/images/illustrations/login-image-dark.svg
new file mode 100644
index 0000000000..f0a4bf2915
--- /dev/null
+++ b/src/assets/images/illustrations/login-image-dark.svg
@@ -0,0 +1,31 @@
+<svg width="248" height="241" viewBox="0 0 248 241" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="undraw_my_password_re_ydq7 (1) 1" clip-path="url(#clip0_7702_91253)">
+<path id="Vector" d="M158.003 53.8943H144.875V165.817C144.875 167.573 144.529 169.312 143.857 170.934C143.185 172.557 142.2 174.031 140.959 175.273C139.717 176.514 138.243 177.499 136.62 178.171C134.998 178.843 133.259 179.189 131.503 179.189H31.1348V179.317C31.1348 181.073 31.4806 182.812 32.1526 184.434C32.8246 186.057 33.8096 187.531 35.0513 188.773C36.293 190.014 37.7672 190.999 39.3895 191.671C41.0119 192.343 42.7507 192.689 44.5068 192.689H158.003C159.759 192.689 161.498 192.343 163.12 191.671C164.743 190.999 166.217 190.014 167.458 188.773C168.7 187.531 169.685 186.057 170.357 184.434C171.029 182.812 171.375 181.073 171.375 179.317V67.2663C171.375 63.7198 169.966 60.3186 167.458 57.8109C164.951 55.3031 161.55 53.8943 158.003 53.8943Z" fill="#F2F2F2"/>
+<path id="Vector_2" d="M220.235 231.757C220.467 231.768 220.697 231.707 220.894 231.582C221.091 231.458 221.244 231.276 221.334 231.061C221.424 230.847 221.445 230.61 221.396 230.382C221.346 230.155 221.228 229.948 221.057 229.79L220.98 229.481C220.99 229.457 221 229.432 221.01 229.407C221.245 228.854 221.637 228.383 222.138 228.052C222.639 227.721 223.227 227.546 223.828 227.548C224.428 227.55 225.015 227.73 225.513 228.064C226.012 228.399 226.401 228.873 226.631 229.428C227.55 231.642 228.721 233.86 229.009 236.201C229.136 237.236 229.082 238.285 228.851 239.301C231.01 234.591 232.131 229.472 232.138 224.291C232.139 222.991 232.067 221.692 231.922 220.399C231.802 219.34 231.637 218.288 231.425 217.244C230.267 211.579 227.783 206.268 224.175 201.749C222.428 200.797 221.016 199.331 220.128 197.551C219.806 196.911 219.579 196.228 219.453 195.523C219.65 195.549 220.196 192.549 220.047 192.365C220.322 191.948 220.813 191.741 221.113 191.335C222.604 189.313 224.659 189.666 225.731 192.413C228.022 193.57 228.044 195.487 226.639 197.332C225.744 198.505 225.621 200.093 224.837 201.349C224.917 201.452 225.001 201.552 225.082 201.656C226.558 203.554 227.844 205.591 228.922 207.74C228.66 205.333 228.973 202.898 229.836 200.635C230.71 198.527 232.348 196.751 233.791 194.928C234.173 194.438 234.691 194.073 235.28 193.877C235.869 193.682 236.503 193.666 237.102 193.831C237.7 193.996 238.236 194.335 238.642 194.804C239.048 195.274 239.306 195.853 239.383 196.47C239.386 196.496 239.389 196.523 239.392 196.55C239.177 196.671 238.968 196.799 238.762 196.935C238.504 197.107 238.305 197.353 238.189 197.641C238.073 197.929 238.048 198.245 238.115 198.548C238.182 198.85 238.339 199.126 238.565 199.338C238.791 199.55 239.076 199.689 239.383 199.736L239.414 199.741C239.338 200.513 239.203 201.279 239.01 202.03C240.861 209.188 236.865 211.795 231.16 211.912C231.034 211.977 230.911 212.042 230.785 212.103C231.869 215.173 232.548 218.371 232.807 221.617C232.953 223.532 232.945 225.455 232.781 227.369L232.791 227.301C233.204 225.173 234.339 223.253 236.004 221.866C238.477 219.834 241.97 219.086 244.638 217.453C244.922 217.271 245.251 217.174 245.588 217.173C245.925 217.173 246.255 217.268 246.54 217.449C246.824 217.629 247.051 217.888 247.193 218.193C247.336 218.498 247.388 218.838 247.344 219.172L247.333 219.243C246.935 219.405 246.548 219.592 246.173 219.802C245.959 219.923 245.749 220.051 245.544 220.187C245.286 220.359 245.086 220.605 244.971 220.893C244.855 221.181 244.829 221.497 244.896 221.8C244.963 222.102 245.12 222.378 245.347 222.59C245.573 222.802 245.858 222.941 246.165 222.988L246.196 222.993C246.219 222.996 246.238 222.999 246.261 223.002C245.581 224.625 244.627 226.118 243.441 227.417C242.284 233.666 237.313 234.258 231.996 232.439H231.993C231.41 234.974 230.564 237.441 229.471 239.802H220.461C220.428 239.702 220.399 239.598 220.37 239.498C221.204 239.551 222.042 239.501 222.863 239.35C222.195 238.529 221.526 237.703 220.858 236.882C220.843 236.867 220.829 236.851 220.816 236.834C220.477 236.414 220.134 235.998 219.795 235.578L219.795 235.577C219.777 234.29 219.925 233.006 220.235 231.757Z" fill="#F2F2F2"/>
+<path id="Vector_3" d="M120.996 38.6697C121.325 39.1681 121.758 39.589 122.266 39.9035C122.773 40.218 123.343 40.4184 123.936 40.491C124.529 40.5635 125.13 40.5064 125.699 40.3237C126.267 40.141 126.789 39.8369 127.229 39.4326L145.961 47.8839L149.573 43.2773L127.25 33.4021C126.515 32.7131 125.552 32.3178 124.544 32.2912C123.537 32.2646 122.554 32.6085 121.783 33.2578C121.012 33.9071 120.506 34.8166 120.361 35.8141C120.216 36.8115 120.442 37.8275 120.996 38.6697Z" fill="#A0616A"/>
+<path id="Vector_4" d="M201.388 43.9395L203.246 54.4677C203.333 54.9588 203.316 55.4627 203.196 55.9469C203.077 56.4311 202.857 56.885 202.552 57.2794C202.247 57.6737 201.862 57.9999 201.423 58.2369C200.984 58.474 200.501 58.6166 200.004 58.6557L168.434 61.1382L131.326 44.5305L135.758 36.1169L167.972 46.318L201.388 43.9395Z" fill="#FA4070"/>
+<path id="Vector_5" d="M127.503 36.3943H14.0068C6.62162 36.3943 0.634766 42.3812 0.634766 49.7664V161.817C0.634766 169.202 6.62162 175.189 14.0068 175.189H127.503C134.888 175.189 140.875 169.202 140.875 161.817V49.7664C140.875 42.3812 134.888 36.3943 127.503 36.3943Z" fill="#F2F2F2"/>
+<path id="Vector_6" d="M14.0068 39.1442C12.6119 39.1442 11.2307 39.419 9.94193 39.9528C8.6532 40.4866 7.48224 41.269 6.49589 42.2553C5.50954 43.2417 4.72712 44.4127 4.19331 45.7014C3.6595 46.9901 3.38476 48.3714 3.38477 49.7663V161.817C3.38477 164.634 4.50387 167.336 6.49589 169.328C8.48791 171.32 11.1897 172.439 14.0068 172.439H86.4429C93.2299 172.439 99.9504 171.103 106.221 168.505C112.491 165.908 118.188 162.101 122.988 157.302C127.787 152.503 131.594 146.805 134.191 140.535C136.788 134.265 138.125 127.544 138.125 120.757V49.7663C138.125 48.3714 137.85 46.9901 137.316 45.7014C136.783 44.4127 136 43.2417 135.014 42.2553C134.027 41.269 132.857 40.4866 131.568 39.9528C130.279 39.419 128.898 39.1442 127.503 39.1442H14.0068Z" fill="white"/>
+<path id="Vector_7" d="M197.4 90.3433L185.9 114.843L230.139 110.363L220.904 86.8433L197.4 90.3433Z" fill="#A0616A"/>
+<path id="Vector_8" d="M207.686 231.159L203.491 231.124L201.635 214.569L207.825 214.621L207.686 231.159Z" fill="#A0616A"/>
+<path id="Vector_9" d="M194.25 237.829C194.246 238.326 194.44 238.805 194.789 239.159C195.137 239.514 195.612 239.716 196.109 239.721L204.449 239.79L205.908 236.831L206.445 239.805L209.591 239.834L208.797 229.226L207.702 229.153L203.237 228.845L201.796 228.748L201.771 231.75L195.072 236.294C194.821 236.464 194.615 236.693 194.472 236.96C194.329 237.228 194.253 237.526 194.25 237.829Z" fill="#2F2E41"/>
+<path id="Vector_10" d="M161.267 231.178L157.268 229.912L160.357 213.542L166.259 215.41L161.267 231.178Z" fill="#A0616A"/>
+<path id="Vector_11" d="M146.466 233.606C146.316 234.08 146.361 234.595 146.59 235.036C146.819 235.477 147.213 235.81 147.687 235.961L155.638 238.477L157.903 236.078L157.542 239.078L160.541 240.03L162.898 229.657L161.873 229.265L157.696 227.659L156.347 227.144L155.441 230.005L147.702 232.38C147.413 232.469 147.149 232.627 146.933 232.841C146.718 233.054 146.557 233.317 146.466 233.606Z" fill="#2F2E41"/>
+<path id="Vector_12" d="M228.124 103.473L187.9 110.843C187.9 110.843 181.449 115.669 183.174 117.398C184.9 119.126 185.168 118.858 184.034 119.992C182.9 121.126 180.449 122.642 180.425 123.634C180.4 124.626 162.4 169.126 162.4 169.126C162.4 169.126 164.4 168.126 162.9 169.626C161.4 171.126 161.4 172.365 161.4 172.365L154.4 219.626L165.769 220.295L176.9 177.209L201.73 136.957C201.73 136.957 204.194 172.851 204.297 175.238C204.4 177.626 205.9 174.626 204.4 177.626C202.9 180.626 201.9 178.626 202.9 180.626C203.9 182.626 199.298 223.343 199.298 223.343H209.674L231.929 138.948C231.929 138.948 239.847 114.82 228.124 103.473Z" fill="#2F2E41"/>
+<path id="Vector_13" d="M216.275 35.9672L200.163 34.293L195.988 39.7126L191.125 42.3028C189.067 43.3989 187.368 45.0645 186.232 47.1006C185.096 49.1367 184.57 51.4569 184.718 53.7839L190.401 86.8434C190.401 86.8434 185.6 97.6529 188.901 100.343C192.201 103.034 186.349 109.697 193.401 106.343C200.453 102.99 230.901 106.843 230.901 106.843L224.401 88.3433L229.257 70.1646L229.791 54.922C229.891 52.0737 229.046 49.2723 227.387 46.9546C225.728 44.6369 223.349 42.9331 220.621 42.1086L219.942 41.9034L216.275 35.9672Z" fill="#FA4070"/>
+<path id="Vector_14" d="M238.456 23.615C238.561 28.1565 236.864 32.554 234.426 36.4165C233.701 34.1616 232.399 32.1094 231.041 30.1531C231.725 34.3852 230.996 38.725 228.966 42.5008C228.894 42.552 228.82 42.5996 228.744 42.6433C226.756 43.8388 224.236 44.323 222.087 43.4595C226.529 38.6712 227.094 30.7376 223.37 25.3667C222.315 23.8427 220.952 22.4949 220.299 20.7605C219.267 17.9933 220.259 14.9465 220.884 12.0613C221.469 9.37611 221.571 6.1807 219.77 4.21279C219.962 3.93778 220.224 3.71886 220.529 3.57849C220.834 3.43811 221.171 3.38132 221.505 3.41392C222.615 3.57082 223.424 4.53625 223.939 5.53058C224.454 6.52488 224.793 7.62691 225.511 8.48574C226.84 10.0932 229.103 10.4733 231.01 11.3205C235.629 13.3778 238.345 18.5616 238.456 23.615Z" fill="#2F2E41"/>
+<path id="Vector_15" d="M119.459 239.829C119.459 239.907 119.474 239.984 119.504 240.057C119.534 240.129 119.577 240.195 119.633 240.25C119.688 240.305 119.754 240.349 119.826 240.379C119.898 240.409 119.976 240.424 120.054 240.424H246.699C246.857 240.424 247.008 240.361 247.119 240.249C247.231 240.138 247.294 239.986 247.294 239.829C247.294 239.671 247.231 239.519 247.119 239.408C247.008 239.296 246.857 239.234 246.699 239.234H120.054C119.976 239.233 119.898 239.249 119.826 239.278C119.754 239.308 119.688 239.352 119.633 239.407C119.577 239.463 119.534 239.528 119.504 239.601C119.474 239.673 119.459 239.75 119.459 239.829Z" fill="#CCCCCC"/>
+<path id="Vector_16" d="M239.453 128.874C241.938 128.874 243.953 126.859 243.953 124.374C243.953 121.888 241.938 119.874 239.453 119.874C236.968 119.874 234.953 121.888 234.953 124.374C234.953 126.859 236.968 128.874 239.453 128.874Z" fill="#FA4070"/>
+<path id="Vector_17" d="M199.578 21.0184C199.842 20.0946 198.023 25.7416 198.9 25.8435C202.899 26.3022 208.387 28.6901 211.172 29.8041C211.298 29.7895 211.423 29.775 211.545 29.7568C211.843 29.724 212.135 29.6767 212.423 29.6221C218.907 28.3952 221.4 18.4345 221.4 18.3435C221.4 17.8957 220.326 5.59706 218.633 5.41506C218.188 5.36681 217.741 5.3425 217.294 5.34224H213.093C212.223 5.15491 211.342 5.02719 210.455 4.95999H210.448C201.99 4.3156 195.322 9.4706 195.945 15.7433C195.949 15.7505 195.956 15.7578 195.96 15.7651C196.14 16.0345 196.299 16.2894 196.439 16.5333C196.576 16.7626 196.69 16.981 196.79 17.1886C197.561 18.7904 195.579 20.806 196.893 21.1822C198.64 21.6826 192.297 38.129 199.214 38.129C195.849 39.0856 198.85 23.5668 199.578 21.0184Z" fill="#2F2E41"/>
+<path id="Vector_18" d="M207.128 30.6684C212.622 30.6684 217.075 26.2151 217.075 20.7217C217.075 15.2282 212.622 10.7749 207.128 10.7749C201.635 10.7749 197.182 15.2282 197.182 20.7217C197.182 26.2151 201.635 30.6684 207.128 30.6684Z" fill="#A0616A"/>
+<path id="Vector_19" d="M195.945 16.2857C196.111 16.373 196.274 16.4531 196.44 16.5332C196.613 16.6169 196.786 16.7007 196.96 16.7771C200.29 18.288 203.001 18.4554 204.646 16.2857C204.69 15.144 204.947 14.0205 205.403 12.9728C205.322 14.1436 205.631 15.3083 206.28 16.2857H209.593C213.004 18.5501 214.756 18.7867 212.388 26.2207C211.728 28.2922 209.103 40.346 210.136 42.1335C210.435 42.1008 213.613 28.8981 213.901 28.8435C220.385 27.6166 224.505 16.9337 223.978 16.3294C223.98 14.6108 223.585 12.915 222.823 11.3746C221.859 9.42298 220.357 7.78825 218.493 6.66371C217.382 6.12507 216.224 5.69 215.033 5.36404C215.004 5.35675 214.978 5.34946 214.948 5.34219C214.583 5.24389 214.211 5.15288 213.838 5.07642C213.068 4.91392 212.29 4.79601 211.507 4.7233C211.452 4.71965 211.396 4.716 211.345 4.716C211.032 4.71674 210.725 4.80095 210.456 4.95994C210.452 4.95994 210.452 4.96356 210.448 4.96356C210.256 5.07602 210.088 5.22578 209.954 5.40406C209.718 5.70403 209.591 6.07477 209.593 6.45618H205.904C205.768 6.45618 205.631 6.45982 205.495 6.46709C203.033 6.55122 200.691 7.55095 198.928 9.27065C197.164 10.9903 196.106 13.3062 195.96 15.7651C195.949 15.9398 195.945 16.1109 195.945 16.2857Z" fill="#2F2E41"/>
+<path id="Vector_20" d="M217.692 13.106C221.311 13.106 224.245 10.1721 224.245 6.55298C224.245 2.93387 221.311 0 217.692 0C214.073 0 211.139 2.93387 211.139 6.55298C211.139 10.1721 214.073 13.106 217.692 13.106Z" fill="#2F2E41"/>
+<path id="Vector_21" d="M239.503 126.229C239.823 125.725 240.029 125.157 240.108 124.565C240.187 123.973 240.136 123.371 239.959 122.801C239.783 122.23 239.484 121.705 239.085 121.261C238.685 120.818 238.194 120.466 237.645 120.231L237.677 99.6804L231.995 98.2739L232.135 122.683C231.808 123.636 231.842 124.676 232.23 125.606C232.619 126.536 233.335 127.291 234.244 127.729C235.152 128.166 236.189 128.255 237.158 127.978C238.128 127.702 238.962 127.08 239.503 126.229Z" fill="#A0616A"/>
+<path id="Vector_22" d="M211.365 50.7384L220.207 44.7293C220.62 44.4489 221.086 44.2579 221.577 44.1686C222.068 44.0792 222.572 44.0934 223.057 44.2103C223.541 44.3272 223.997 44.5442 224.393 44.8474C224.789 45.1505 225.117 45.5331 225.356 45.9707L240.558 73.7499L240.616 114.405L231.125 113.81L227.229 80.2455L211.365 50.7384Z" fill="#FA4070"/>
+</g>
+<defs>
+<clipPath id="clip0_7702_91253">
+<rect width="246.73" height="240.424" fill="white" transform="translate(0.634766)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/images/illustrations/login-image-light.svg b/src/assets/images/illustrations/login-image-light.svg
new file mode 100644
index 0000000000..6ab1f9243d
--- /dev/null
+++ b/src/assets/images/illustrations/login-image-light.svg
@@ -0,0 +1,31 @@
+<svg width="248" height="241" viewBox="0 0 248 241" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="undraw_my_password_re_ydq7 (1) 1" clip-path="url(#clip0_7951_46256)">
+<path id="Vector" d="M158.003 53.8943H144.875V165.817C144.875 167.573 144.529 169.312 143.857 170.934C143.185 172.557 142.2 174.031 140.959 175.273C139.717 176.514 138.243 177.499 136.62 178.171C134.998 178.843 133.259 179.189 131.503 179.189H31.1348V179.317C31.1348 181.073 31.4806 182.812 32.1526 184.434C32.8246 186.057 33.8096 187.531 35.0513 188.773C36.293 190.014 37.7672 190.999 39.3895 191.671C41.0119 192.343 42.7507 192.689 44.5068 192.689H158.003C159.759 192.689 161.498 192.343 163.12 191.671C164.743 190.999 166.217 190.014 167.458 188.773C168.7 187.531 169.685 186.057 170.357 184.434C171.029 182.812 171.375 181.073 171.375 179.317V67.2663C171.375 63.7198 169.966 60.3186 167.458 57.8109C164.951 55.3031 161.55 53.8943 158.003 53.8943Z" fill="#F2F2F2"/>
+<path id="Vector_2" d="M220.235 231.757C220.467 231.768 220.697 231.707 220.894 231.582C221.091 231.458 221.244 231.276 221.334 231.061C221.424 230.847 221.445 230.61 221.396 230.382C221.346 230.155 221.228 229.948 221.057 229.79L220.98 229.481C220.99 229.457 221 229.432 221.01 229.407C221.245 228.854 221.637 228.383 222.138 228.052C222.639 227.721 223.227 227.546 223.828 227.548C224.428 227.55 225.015 227.73 225.513 228.064C226.012 228.399 226.401 228.873 226.631 229.428C227.55 231.642 228.721 233.86 229.009 236.201C229.136 237.236 229.082 238.285 228.851 239.301C231.01 234.591 232.131 229.472 232.138 224.291C232.139 222.991 232.067 221.691 231.922 220.399C231.802 219.34 231.637 218.288 231.425 217.244C230.267 211.579 227.783 206.268 224.175 201.749C222.428 200.797 221.016 199.331 220.128 197.551C219.806 196.911 219.579 196.228 219.453 195.523C219.65 195.549 220.196 192.549 220.047 192.365C220.322 191.948 220.813 191.741 221.113 191.335C222.604 189.313 224.659 189.666 225.731 192.413C228.022 193.569 228.044 195.487 226.639 197.332C225.744 198.505 225.621 200.093 224.837 201.349C224.917 201.452 225.001 201.552 225.082 201.656C226.558 203.554 227.844 205.591 228.922 207.74C228.66 205.333 228.973 202.898 229.836 200.635C230.71 198.527 232.348 196.751 233.791 194.928C234.173 194.438 234.691 194.073 235.28 193.877C235.869 193.682 236.503 193.666 237.102 193.831C237.7 193.996 238.236 194.335 238.642 194.804C239.048 195.274 239.306 195.853 239.383 196.469C239.386 196.496 239.389 196.523 239.392 196.55C239.177 196.671 238.968 196.799 238.762 196.935C238.504 197.107 238.305 197.353 238.189 197.641C238.073 197.929 238.048 198.245 238.115 198.548C238.182 198.85 238.339 199.126 238.565 199.338C238.791 199.55 239.076 199.689 239.383 199.736L239.414 199.741C239.338 200.513 239.203 201.279 239.01 202.03C240.861 209.188 236.865 211.795 231.16 211.912C231.034 211.977 230.911 212.042 230.785 212.103C231.869 215.173 232.548 218.371 232.807 221.617C232.953 223.532 232.945 225.455 232.781 227.368L232.791 227.301C233.204 225.173 234.339 223.253 236.004 221.866C238.477 219.834 241.97 219.086 244.638 217.453C244.922 217.271 245.251 217.174 245.588 217.173C245.925 217.173 246.255 217.268 246.54 217.449C246.824 217.629 247.051 217.888 247.193 218.193C247.336 218.498 247.388 218.838 247.344 219.172L247.333 219.243C246.935 219.405 246.548 219.592 246.173 219.802C245.959 219.923 245.749 220.051 245.544 220.187C245.286 220.359 245.086 220.605 244.971 220.893C244.855 221.181 244.829 221.497 244.896 221.8C244.963 222.102 245.12 222.378 245.347 222.59C245.573 222.802 245.858 222.94 246.165 222.988L246.196 222.993C246.219 222.996 246.238 222.999 246.261 223.002C245.581 224.625 244.627 226.118 243.441 227.417C242.284 233.665 237.313 234.258 231.996 232.439H231.993C231.41 234.974 230.564 237.441 229.471 239.802H220.461C220.428 239.702 220.399 239.598 220.37 239.498C221.204 239.551 222.042 239.501 222.863 239.35C222.195 238.529 221.526 237.703 220.858 236.882C220.843 236.867 220.829 236.851 220.816 236.834C220.477 236.414 220.134 235.997 219.795 235.578L219.795 235.577C219.777 234.29 219.925 233.006 220.235 231.757Z" fill="#F2F2F2"/>
+<path id="Vector_3" d="M120.996 38.6696C121.325 39.168 121.758 39.589 122.266 39.9034C122.773 40.2179 123.343 40.4184 123.936 40.4909C124.529 40.5635 125.13 40.5064 125.699 40.3236C126.267 40.1409 126.789 39.8368 127.229 39.4325L145.961 47.8838L149.573 43.2772L127.25 33.4021C126.515 32.713 125.552 32.3177 124.544 32.2911C123.537 32.2645 122.554 32.6084 121.783 33.2577C121.012 33.907 120.506 34.8166 120.361 35.814C120.216 36.8114 120.442 37.8275 120.996 38.6696Z" fill="#A0616A"/>
+<path id="Vector_4" d="M201.388 43.9395L203.246 54.4677C203.333 54.9588 203.316 55.4627 203.196 55.9469C203.077 56.4311 202.857 56.885 202.552 57.2794C202.247 57.6737 201.862 57.9999 201.423 58.2369C200.984 58.474 200.501 58.6166 200.004 58.6557L168.434 61.1382L131.326 44.5305L135.758 36.1169L167.972 46.318L201.388 43.9395Z" fill="#FA4070"/>
+<path id="Vector_5" d="M127.503 36.3943H14.0068C6.62162 36.3943 0.634766 42.3811 0.634766 49.7663V161.817C0.634766 169.202 6.62162 175.189 14.0068 175.189H127.503C134.888 175.189 140.875 169.202 140.875 161.817V49.7663C140.875 42.3811 134.888 36.3943 127.503 36.3943Z" fill="#F2F2F2"/>
+<path id="Vector_6" d="M14.0068 39.1443C12.6119 39.1443 11.2307 39.419 9.94193 39.9528C8.6532 40.4866 7.48224 41.2691 6.49589 42.2554C5.50954 43.2418 4.72712 44.4127 4.19331 45.7014C3.6595 46.9902 3.38476 48.3714 3.38477 49.7663V161.817C3.38477 164.634 4.50387 167.336 6.49589 169.328C8.48791 171.32 11.1897 172.439 14.0068 172.439H86.4429C93.2299 172.439 99.9504 171.103 106.221 168.505C112.491 165.908 118.188 162.101 122.988 157.302C127.787 152.503 131.594 146.806 134.191 140.535C136.788 134.265 138.125 127.544 138.125 120.757V49.7663C138.125 48.3714 137.85 46.9902 137.316 45.7014C136.783 44.4127 136 43.2418 135.014 42.2554C134.027 41.2691 132.857 40.4866 131.568 39.9528C130.279 39.419 128.898 39.1443 127.503 39.1443H14.0068Z" fill="white"/>
+<path id="Vector_7" d="M197.4 90.3433L185.9 114.843L230.139 110.363L220.904 86.8433L197.4 90.3433Z" fill="#A0616A"/>
+<path id="Vector_8" d="M207.686 231.159L203.491 231.124L201.635 214.568L207.825 214.621L207.686 231.159Z" fill="#A0616A"/>
+<path id="Vector_9" d="M194.25 237.829C194.246 238.326 194.44 238.805 194.789 239.159C195.137 239.514 195.612 239.716 196.109 239.721L204.449 239.79L205.908 236.831L206.445 239.805L209.591 239.834L208.797 229.226L207.702 229.153L203.237 228.845L201.796 228.748L201.771 231.75L195.072 236.294C194.821 236.464 194.615 236.693 194.472 236.96C194.329 237.228 194.253 237.526 194.25 237.829Z" fill="#2F2E41"/>
+<path id="Vector_10" d="M161.267 231.178L157.268 229.912L160.357 213.542L166.259 215.41L161.267 231.178Z" fill="#A0616A"/>
+<path id="Vector_11" d="M146.466 233.606C146.316 234.08 146.361 234.595 146.59 235.036C146.819 235.477 147.213 235.81 147.687 235.961L155.638 238.477L157.903 236.078L157.542 239.078L160.541 240.03L162.898 229.657L161.873 229.265L157.696 227.659L156.347 227.144L155.441 230.005L147.702 232.38C147.413 232.469 147.149 232.627 146.933 232.841C146.718 233.054 146.557 233.317 146.466 233.606Z" fill="#2F2E41"/>
+<path id="Vector_12" d="M228.124 103.473L187.9 110.843C187.9 110.843 181.449 115.669 183.174 117.398C184.9 119.126 185.168 118.858 184.034 119.992C182.9 121.126 180.449 122.642 180.425 123.634C180.4 124.626 162.4 169.126 162.4 169.126C162.4 169.126 164.4 168.126 162.9 169.626C161.4 171.126 161.4 172.365 161.4 172.365L154.4 219.626L165.769 220.295L176.9 177.209L201.73 136.957C201.73 136.957 204.194 172.851 204.297 175.239C204.4 177.626 205.9 174.626 204.4 177.626C202.9 180.626 201.9 178.626 202.9 180.626C203.9 182.626 199.298 223.343 199.298 223.343H209.674L231.929 138.948C231.929 138.948 239.847 114.82 228.124 103.473Z" fill="#2F2E41"/>
+<path id="Vector_13" d="M216.275 35.9671L200.163 34.293L195.988 39.7126L191.125 42.3027C189.067 43.3988 187.368 45.0645 186.232 47.1005C185.096 49.1366 184.57 51.4569 184.718 53.7839L190.401 86.8433C190.401 86.8433 185.6 97.6528 188.901 100.343C192.201 103.034 186.349 109.697 193.401 106.343C200.453 102.99 230.901 106.843 230.901 106.843L224.401 88.3433L229.257 70.1646L229.791 54.9219C229.891 52.0736 229.046 49.2723 227.387 46.9546C225.728 44.6368 223.349 42.933 220.621 42.1085L219.942 41.9034L216.275 35.9671Z" fill="#FA4070"/>
+<path id="Vector_14" d="M238.456 23.6151C238.561 28.1566 236.864 32.5541 234.426 36.4166C233.701 34.1617 232.399 32.1095 231.041 30.1531C231.725 34.3852 230.996 38.725 228.966 42.5009C228.894 42.5521 228.82 42.5996 228.744 42.6433C226.756 43.8388 224.236 44.3231 222.087 43.4596C226.529 38.6713 227.094 30.7377 223.37 25.3668C222.315 23.8428 220.952 22.4949 220.299 20.7606C219.267 17.9933 220.259 14.9465 220.884 12.0614C221.469 9.37617 221.571 6.18076 219.77 4.21285C219.962 3.93784 220.224 3.71892 220.529 3.57855C220.834 3.43817 221.171 3.38138 221.505 3.41398C222.615 3.57088 223.424 4.53631 223.939 5.53064C224.454 6.52494 224.793 7.62697 225.511 8.4858C226.84 10.0933 229.103 10.4733 231.01 11.3205C235.629 13.3778 238.345 18.5616 238.456 23.6151Z" fill="#2F2E41"/>
+<path id="Vector_15" d="M119.459 239.829C119.459 239.907 119.474 239.984 119.504 240.056C119.534 240.129 119.577 240.194 119.633 240.25C119.688 240.305 119.754 240.349 119.826 240.379C119.898 240.409 119.976 240.424 120.054 240.424H246.699C246.857 240.424 247.008 240.361 247.119 240.249C247.231 240.138 247.294 239.986 247.294 239.829C247.294 239.671 247.231 239.519 247.119 239.408C247.008 239.296 246.857 239.234 246.699 239.234H120.054C119.976 239.233 119.898 239.249 119.826 239.278C119.754 239.308 119.688 239.352 119.633 239.407C119.577 239.463 119.534 239.528 119.504 239.601C119.474 239.673 119.459 239.75 119.459 239.829Z" fill="#CCCCCC"/>
+<path id="Vector_16" d="M239.453 128.874C241.938 128.874 243.953 126.859 243.953 124.374C243.953 121.888 241.938 119.874 239.453 119.874C236.968 119.874 234.953 121.888 234.953 124.374C234.953 126.859 236.968 128.874 239.453 128.874Z" fill="#FA4070"/>
+<path id="Vector_17" d="M199.578 21.0183C199.842 20.0945 198.023 25.7415 198.9 25.8434C202.899 26.3021 208.387 28.69 211.172 29.804C211.298 29.7894 211.423 29.7749 211.545 29.7567C211.843 29.7239 212.135 29.6766 212.423 29.622C218.907 28.3951 221.4 18.4345 221.4 18.3435C221.4 17.8957 220.326 5.59699 218.633 5.415C218.188 5.36675 217.741 5.34244 217.294 5.34218H213.093C212.223 5.15485 211.342 5.02713 210.455 4.95993H210.448C201.99 4.31554 195.322 9.47054 195.945 15.7432C195.949 15.7505 195.956 15.7578 195.96 15.7651C196.14 16.0345 196.299 16.2893 196.439 16.5332C196.576 16.7626 196.69 16.981 196.79 17.1885C197.561 18.7903 195.579 20.806 196.893 21.1822C198.64 21.6826 192.297 38.1289 199.214 38.1289C195.849 39.0855 198.85 23.5667 199.578 21.0183Z" fill="#2F2E41"/>
+<path id="Vector_18" d="M207.128 30.6684C212.622 30.6684 217.075 26.2151 217.075 20.7217C217.075 15.2282 212.622 10.7749 207.128 10.7749C201.635 10.7749 197.182 15.2282 197.182 20.7217C197.182 26.2151 201.635 30.6684 207.128 30.6684Z" fill="#A0616A"/>
+<path id="Vector_19" d="M195.945 16.2857C196.111 16.3731 196.274 16.4532 196.44 16.5333C196.613 16.617 196.786 16.7008 196.96 16.7772C200.29 18.288 203.001 18.4555 204.646 16.2857C204.69 15.144 204.947 14.0206 205.403 12.9728C205.322 14.1437 205.631 15.3083 206.28 16.2857H209.593C213.004 18.5501 214.756 18.7868 212.388 26.2208C211.728 28.2922 209.103 40.3461 210.136 42.1336C210.435 42.1008 213.613 28.8981 213.901 28.8435C220.385 27.6167 224.505 16.9337 223.978 16.3294C223.98 14.6109 223.585 12.915 222.823 11.3746C221.859 9.42304 220.357 7.78831 218.493 6.66378C217.382 6.12513 216.224 5.69006 215.033 5.3641C215.004 5.35681 214.978 5.34952 214.948 5.34225C214.583 5.24395 214.211 5.15294 213.838 5.07648C213.068 4.91398 212.29 4.79607 211.507 4.72336C211.452 4.71971 211.396 4.71606 211.345 4.71606C211.032 4.7168 210.725 4.80101 210.456 4.96C210.452 4.96 210.452 4.96362 210.448 4.96362C210.256 5.07608 210.088 5.22584 209.954 5.40412C209.718 5.70409 209.591 6.07483 209.593 6.45624H205.904C205.768 6.45624 205.631 6.45988 205.495 6.46715C203.033 6.55128 200.691 7.55101 198.928 9.27071C197.164 10.9904 196.106 13.3063 195.96 15.7651C195.949 15.9399 195.945 16.111 195.945 16.2857Z" fill="#2F2E41"/>
+<path id="Vector_20" d="M217.692 13.106C221.311 13.106 224.245 10.1721 224.245 6.55298C224.245 2.93387 221.311 0 217.692 0C214.073 0 211.139 2.93387 211.139 6.55298C211.139 10.1721 214.073 13.106 217.692 13.106Z" fill="#2F2E41"/>
+<path id="Vector_21" d="M239.503 126.229C239.823 125.725 240.029 125.157 240.108 124.565C240.187 123.973 240.136 123.371 239.959 122.801C239.783 122.23 239.484 121.705 239.085 121.261C238.685 120.818 238.194 120.466 237.645 120.231L237.677 99.6804L231.995 98.2739L232.135 122.683C231.808 123.636 231.842 124.676 232.23 125.606C232.619 126.536 233.335 127.291 234.244 127.729C235.152 128.166 236.189 128.255 237.158 127.978C238.128 127.702 238.962 127.08 239.503 126.229Z" fill="#A0616A"/>
+<path id="Vector_22" d="M211.365 50.7385L220.207 44.7293C220.62 44.449 221.086 44.258 221.577 44.1686C222.068 44.0792 222.572 44.0935 223.057 44.2104C223.541 44.3273 223.997 44.5443 224.393 44.8474C224.789 45.1506 225.117 45.5332 225.356 45.9707L240.558 73.75L240.616 114.405L231.125 113.81L227.229 80.2456L211.365 50.7385Z" fill="#FA4070"/>
+</g>
+<defs>
+<clipPath id="clip0_7951_46256">
+<rect width="246.73" height="240.424" fill="white" transform="translate(0.634766)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Login/LoginImage.vue b/src/components/Login/LoginImage.vue
new file mode 100644
index 0000000000..59cc0d7f96
--- /dev/null
+++ b/src/components/Login/LoginImage.vue
@@ -0,0 +1,113 @@
+<script setup>
+import { computed, ref } from 'vue'
+
+import ImageMode from '@/components/ImageMode/ImageMode'
+import ImageModeSource from '@/components/ImageMode/ImageModeSource'
+import image from '@/assets/images/illustrations/login-image-dark.svg'
+import imageDark from '@/assets/images/illustrations/login-image-light.svg'
+import logo from '@/assets/images/logo-color-symbol.svg'
+
+const props = defineProps({
+  shakingDuration: {
+    type: Number,
+    default: 750
+  }
+})
+
+const shaking = ref(false)
+
+const classList = computed(() => {
+  return {
+    'login-image--shaking': shaking.value
+  }
+})
+
+const style = computed(() => {
+  return {
+    '--login-image-shaking-duration': `${props.shakingDuration}ms`
+  }
+})
+
+async function shake() {
+  shaking.value = true
+  await new Promise((resolve) => setTimeout(resolve, props.shakingDuration))
+  shaking.value = false
+}
+
+defineExpose({
+  /**
+   * Triggers a shaking animation on the Datashare logo.
+   */
+  shake
+})
+</script>
+
+<template>
+  <div class="login-image" :class="classList" :style="style">
+    <image-mode class="login-image__bg">
+      <image-mode-source :src="image" />
+      <image-mode-source :src="imageDark" color-mode="dark" />
+    </image-mode>
+    <img :src="logo" alt="Datashare" class="login-image__logo" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@keyframes shake {
+  20% {
+    transform: rotate3d(0, 0, 1, -15deg);
+  }
+
+  40% {
+    transform: rotate3d(0, 0, 1, 10deg);
+  }
+
+  60% {
+    transform: rotate3d(0, 0, 1, -5deg);
+  }
+
+  80% {
+    transform: rotate3d(0, 0, 1, 5deg);
+  }
+
+  to {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+}
+
+.login-image {
+  --login-image-shaking-duration: 750;
+
+  display: flex;
+  margin: auto;
+  max-width: 250px;
+  position: relative;
+  flex-shrink: 0;
+
+  &--shaking &__logo {
+    animation: shake var(--login-image-shaking-duration);
+    transform: rotate3d(0, 0, 0);
+  }
+
+  &:before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+  }
+
+  &__logo {
+    position: absolute;
+    top: 24%;
+    left: 19%;
+    width: 20%;
+    transform-origin: center center;
+  }
+
+  &__bg:deep(img) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/stories/components/Login/LoginImage.stories.js b/src/stories/components/Login/LoginImage.stories.js
new file mode 100644
index 0000000000..3c7c7eb2d0
--- /dev/null
+++ b/src/stories/components/Login/LoginImage.stories.js
@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+
+import ButtonIcon from '@/components/Button/ButtonIcon'
+import LoginImage from '@/components/Login/LoginImage'
+
+export default {
+  title: 'Components/Login/LoginImage',
+  tags: ['autodocs'],
+  component: LoginImage,
+  render: () => ({
+    components: {
+      ButtonIcon,
+      LoginImage
+    },
+    setup() {
+      const image = ref(null)
+      return { image }
+    },
+    template: `
+      <div class="text-center">
+        <login-image ref="image" class="my-5" />
+        <button-icon label="Shake it!" icon-left="disco-ball" icon-left-weight="fill" @click="image.shake()" />
+      </div>
+    `
+  })
+}
+
+export const Default = {}