mirror of
https://github.com/zitadel/zitadel.git
synced 2024-12-12 11:04:25 +00:00
fix(login): mfa prompt styles (#6366)
* feat: login with otp * fix(i18n): japanese translation * add missing files * fix provider change * add event types translations to en * add tests * resourceOwner * remove unused handler * fix: secret generators and add comments * add setup step * rename * linting * fix setup * improve otp handling * fix autocomplete * translations for login and notifications * translations for event types * fix: mfa prompt styles * fix merge * fix merge * fix html * rm unused files --------- Co-authored-by: Livio Spring <livio.a@gmail.com>
This commit is contained in:
Max Peintner
GitHub
parent
7c494fd219
commit
d83681a928
@ -1,58 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 118 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<rect id="mfa01" x="0" y="0" width="117.576" height="117.576" style="fill:none;"/>
|
||||
<g id="mfa011" serif:id="mfa01">
|
||||
<g transform="matrix(1,0,0,1,0,2.49899)">
|
||||
<g transform="matrix(0.0210574,0,0,0.0210574,61.0927,55.0915)">
|
||||
<path d="M2500,1249.98C2500,1940.39 1940.37,2500 1249.97,2500C559.609,2500 0,1940.39 0,1249.98C0,559.619 559.609,0 1249.97,0C1940.37,0 2500,559.619 2500,1249.98Z" style="fill:rgb(236,28,36);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.0210574,0,0,0.0210574,61.0927,55.0915)">
|
||||
<path d="M1142.81,985.254L1442.53,1284.86C1485.79,1328.18 1556.04,1328.18 1599.4,1284.86C1642.68,1241.55 1642.77,1171.37 1599.4,1128.05L1299.67,828.32C1085.2,613.809 738.584,610.352 519.57,817.422C517.525,819.121 515.554,820.906 513.662,822.773C512.705,823.73 511.924,824.746 510.977,825.605C510,826.543 509.004,827.383 508.076,828.32C506.182,830.205 504.453,832.188 502.803,834.15C295.625,1053.26 299.189,1399.89 513.672,1614.39L813.398,1914.06C856.758,1957.35 926.904,1957.35 970.254,1914.06C1013.63,1870.73 1013.63,1800.46 970.361,1757.23L670.625,1457.51C539.785,1326.72 538.906,1114.45 667.91,982.539C799.805,853.535 1011.95,854.473 1142.81,985.264L1142.81,985.254ZM1529.65,586.104C1486.34,629.434 1486.34,699.609 1529.77,742.93L1829.38,1042.67C1960.15,1173.45 1961,1385.68 1832,1517.63C1700.07,1646.53 1487.99,1645.67 1357.17,1514.87L1057.44,1215.18C1014.1,1171.85 943.838,1171.85 900.547,1215.18C857.158,1258.47 857.158,1328.87 900.547,1372.06L1200.18,1671.81C1414.71,1886.31 1761.29,1889.8 1980.34,1682.7C1982.37,1680.91 1984.29,1679.24 1986.3,1677.34C1987.22,1676.42 1988.08,1675.47 1988.97,1674.51C1989.94,1673.58 1990.89,1672.73 1991.8,1671.69C1993.72,1669.9 1995.36,1667.94 1997.07,1665.89C2204.25,1446.87 2200.78,1100.35 1986.31,885.723L1686.58,586.094C1643.26,542.705 1572.93,542.705 1529.65,586.104Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,-1,2.49899)">
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M105.787,10.628C122.837,8.633 140.367,10.679 156.457,16.701C170.98,22.133 184.367,30.683 195.275,41.718C185.945,50.969 176.702,60.305 167.384,69.568C161.378,63.678 154.379,58.771 146.676,55.364C136.442,50.777 125.061,48.759 113.876,49.532C101.239,50.346 88.854,54.737 78.55,62.099C65.765,71.114 56.19,84.6 51.98,99.674C48.823,110.733 48.562,122.58 51.11,133.789C53.158,142.957 57.148,151.678 62.694,159.255C67.841,166.303 74.336,172.364 81.723,177.009C90.238,182.388 99.952,185.855 109.95,187.073C118.519,188.149 127.286,187.589 135.652,185.452C136.571,185.01 137.097,186.057 137.673,186.577C147.102,196.055 156.577,205.486 166.009,214.959C149.042,223.199 129.906,226.962 111.087,225.634C95.337,224.59 79.825,220.061 66.022,212.4C60.266,209.252 54.859,205.498 49.745,201.397C45.704,197.969 41.711,194.451 38.237,190.438C32.356,184.099 27.311,176.989 23.154,169.406C22.228,167.62 21.154,165.907 20.4,164.037C19.365,161.942 18.462,159.788 17.564,157.633C16.416,154.561 15.19,151.513 14.352,148.34C14.252,147.921 13.998,147.57 13.769,147.218C11.848,140.585 10.771,133.718 10.195,126.841C9.589,118.194 9.887,109.471 11.301,100.912C14.12,83.443 21.349,66.719 32.099,52.67C39.07,43.528 47.497,35.494 56.97,28.982C71.422,19.004 88.338,12.621 105.787,10.628M117.169,22.311C115.85,22.54 114.633,23.182 113.61,24.031C111.203,26.098 110.337,29.773 111.719,32.659C113.184,36.136 117.542,38.006 121.06,36.594C124.631,35.381 126.795,31.153 125.629,27.554C124.68,23.982 120.787,21.585 117.169,22.311M55.151,48.231C53.917,48.296 52.7,48.675 51.642,49.314C48.988,50.941 47.504,54.346 48.319,57.382C49.034,60.641 52.202,63.182 55.554,63.078C59.032,63.173 62.284,60.442 62.854,57.021C63.372,54.63 62.481,52.034 60.738,50.344C59.294,48.879 57.197,48.117 55.151,48.231M28.313,111.184C26.781,111.469 25.341,112.244 24.253,113.36C22.066,115.609 21.541,119.278 23.091,122.02C24.748,125.251 28.989,126.848 32.344,125.404C35.821,124.129 37.897,119.984 36.756,116.445C35.821,112.878 31.928,110.436 28.313,111.184M54.23,174.149C51.571,174.6 49.259,176.63 48.481,179.213C47.585,181.904 48.451,185.036 50.541,186.934C51.964,188.202 53.874,188.947 55.788,188.859C58.371,188.802 60.875,187.269 62.064,184.971C63.205,182.927 63.256,180.338 62.229,178.236C60.882,175.278 57.412,173.531 54.23,174.149M117.197,200.078C114.475,200.545 112.124,202.64 111.39,205.308C110.494,208.217 111.652,211.615 114.147,213.36C115.966,214.7 118.41,215.135 120.574,214.485C122.798,213.844 124.67,212.115 125.45,209.93C126.601,206.982 125.534,203.376 123.002,201.492C121.377,200.23 119.217,199.716 117.197,200.078Z" style="fill:rgb(160,160,160);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M117.169,22.311C120.787,21.585 124.68,23.982 125.629,27.554C126.795,31.153 124.631,35.381 121.06,36.594C117.542,38.006 113.184,36.136 111.719,32.659C110.337,29.773 111.203,26.098 113.61,24.031C114.633,23.182 115.85,22.54 117.169,22.311Z" style="fill:rgb(193,193,193);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M28.313,111.184C31.928,110.436 35.821,112.878 36.756,116.445C37.897,119.984 35.821,124.129 32.344,125.404C28.989,126.848 24.748,125.251 23.091,122.02C21.541,119.278 22.066,115.609 24.253,113.36C25.341,112.244 26.781,111.469 28.313,111.184Z" style="fill:rgb(193,193,193);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M195.275,41.718L195.3,41.693C201.003,47.506 206.169,53.867 210.486,60.78C218.82,74.009 224.229,89.067 226.194,104.581C227.506,114.968 227.414,125.55 225.719,135.888C222.78,154.406 214.855,172.089 203.061,186.658C193.271,198.805 180.872,208.886 166.86,215.765L166.715,215.705C166.481,215.45 166.245,215.205 166.009,214.959C156.577,205.486 147.102,196.055 137.673,186.577C137.097,186.057 136.571,185.01 135.652,185.452C127.286,187.589 118.519,188.149 109.95,187.073C99.952,185.855 90.238,182.388 81.723,177.009C74.336,172.364 67.841,166.303 62.694,159.255C57.148,151.678 53.158,142.957 51.11,133.789C48.562,122.58 48.823,110.733 51.98,99.674C56.19,84.6 65.765,71.114 78.55,62.099C88.854,54.737 101.239,50.346 113.876,49.532C125.061,48.759 136.442,50.777 146.676,55.364C154.379,58.771 161.378,63.678 167.384,69.568C176.702,60.305 185.945,50.969 195.275,41.718M113.864,84.297C108.951,84.957 104.169,86.676 100.005,89.375C94.663,92.719 90.34,97.61 87.53,103.241C84.156,109.999 83.216,117.87 84.637,125.267C85.547,129.862 87.422,134.266 90.09,138.115C91.925,140.781 94.175,143.128 96.49,145.378C109.758,158.665 123.015,171.962 136.296,185.235C147.657,182.21 158.207,176.222 166.627,168.015C177.067,157.985 184.138,144.538 186.603,130.276C186.658,130.035 186.654,129.602 187.031,129.674C193.889,129.683 200.746,129.672 207.606,129.686C212.013,129.616 216.14,126.267 217.04,121.942C217.091,121.662 217.04,121.405 216.885,121.166C217.167,119.845 217.366,118.486 217.204,117.132L217.149,117.225C216.674,112.517 212.326,108.633 207.602,108.622C188.938,108.606 170.274,108.62 151.608,108.606C150.118,103.495 147.327,98.809 143.732,94.897C137.761,88.532 129.322,84.48 120.583,84.061C118.343,84.066 116.084,83.936 113.864,84.297M180.143,174.17C177.218,174.646 174.734,177.083 174.195,179.997C173.852,181.881 174.163,183.937 175.29,185.517C176.623,187.647 179.178,188.933 181.68,188.815C183.606,188.822 185.448,187.901 186.809,186.58C187.936,185.284 188.764,183.647 188.815,181.904C189.014,179.273 187.644,176.558 185.374,175.202C183.865,174.17 181.928,173.871 180.143,174.17Z" style="fill:rgb(104,104,104);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M55.151,48.231C57.197,48.117 59.294,48.879 60.738,50.344C62.481,52.034 63.372,54.63 62.854,57.021C62.284,60.442 59.032,63.173 55.554,63.078C52.202,63.182 49.034,60.641 48.319,57.382C47.504,54.346 48.988,50.941 51.642,49.314C52.7,48.675 53.917,48.296 55.151,48.231Z" style="fill:rgb(195,195,195);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M113.864,84.297C116.084,83.936 118.343,84.066 120.583,84.061C129.322,84.48 137.761,88.532 143.732,94.897C147.327,98.809 150.118,103.495 151.608,108.606C140.575,108.603 129.54,108.603 118.505,108.603C115.683,108.578 112.897,109.858 111.05,111.985C109.659,113.57 108.795,115.607 108.633,117.711C108.358,120.99 109.874,124.353 112.496,126.339C114.26,127.707 116.496,128.422 118.727,128.376C148.049,128.367 177.373,128.362 206.695,128.383C207.796,128.392 208.914,128.348 209.981,128.04C213.27,127.156 216.003,124.46 216.885,121.166C217.04,121.405 217.091,121.662 217.04,121.942C216.14,126.267 212.013,129.616 207.606,129.686C200.746,129.672 193.889,129.683 187.031,129.674C186.654,129.602 186.658,130.035 186.603,130.276C184.138,144.538 177.067,157.985 166.627,168.015C158.207,176.222 147.657,182.21 136.296,185.235C123.015,171.962 109.758,158.665 96.49,145.378C94.175,143.128 91.925,140.781 90.09,138.115C87.422,134.266 85.547,129.862 84.637,125.267C83.216,117.87 84.156,109.999 87.53,103.241C90.34,97.61 94.663,92.719 100.005,89.375C104.169,86.676 108.951,84.957 113.864,84.297Z" style="fill:rgb(71,71,71);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M111.05,111.985C112.897,109.858 115.683,108.578 118.505,108.603C129.54,108.603 140.575,108.603 151.608,108.606C170.274,108.62 188.938,108.606 207.602,108.622C212.326,108.633 216.674,112.517 217.149,117.225C217.105,117.301 217.015,117.449 216.968,117.523C216.117,113.239 211.976,109.849 207.602,109.874C178.678,109.897 149.754,109.902 120.831,109.913C119.042,109.943 117.188,109.728 115.473,110.367C113.376,111.024 111.601,112.473 110.318,114.232C109.545,115.285 109.302,116.602 108.633,117.711C108.795,115.607 109.659,113.57 111.05,111.985Z" style="fill:rgb(191,191,191);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M54.23,174.149C57.412,173.531 60.882,175.278 62.229,178.236C63.256,180.338 63.205,182.927 62.064,184.971C60.875,187.269 58.371,188.802 55.788,188.859C53.874,188.947 51.964,188.202 50.541,186.934C48.451,185.036 47.585,181.904 48.481,179.213C49.259,176.63 51.571,174.6 54.23,174.149Z" style="fill:rgb(191,191,191);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M115.473,110.367C117.188,109.728 119.042,109.943 120.831,109.913C149.754,109.902 178.678,109.897 207.602,109.874C211.976,109.849 216.117,113.239 216.968,117.523C217.015,117.449 217.105,117.301 217.149,117.225L217.204,117.132C217.366,118.486 217.167,119.845 216.885,121.166C216.003,124.46 213.27,127.156 209.981,128.04C208.914,128.348 207.796,128.392 206.695,128.383C177.373,128.362 148.049,128.367 118.727,128.376C116.496,128.422 114.26,127.707 112.496,126.339C109.874,124.353 108.358,120.99 108.633,117.711C109.302,116.602 109.545,115.285 110.318,114.232C111.601,112.473 113.376,111.024 115.473,110.367Z" style="fill:rgb(176,176,176);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M13.769,147.218C13.998,147.57 14.252,147.921 14.352,148.34C15.19,151.513 16.416,154.561 17.564,157.633C18.462,159.788 19.365,161.942 20.4,164.037C21.154,165.907 22.228,167.62 23.154,169.406C27.311,176.989 32.356,184.099 38.237,190.438C41.711,194.451 45.704,197.969 49.745,201.397C54.859,205.498 60.266,209.252 66.022,212.4C79.825,220.061 95.337,224.59 111.087,225.634C129.906,226.962 149.042,223.199 166.009,214.959C166.245,215.205 166.481,215.45 166.715,215.705L166.722,215.846C156.927,220.713 146.382,224.069 135.578,225.777C122.407,227.837 108.856,227.511 95.811,224.736C80.099,221.414 65.163,214.504 52.434,204.713C37.733,193.458 25.975,178.391 18.675,161.371C16.727,156.772 14.988,152.062 13.769,147.218Z" style="fill:rgb(147,147,147);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M180.143,174.17C181.928,173.871 183.865,174.17 185.374,175.202C187.644,176.558 189.014,179.273 188.815,181.904C188.764,183.647 187.936,185.284 186.809,186.58C185.448,187.901 183.606,188.822 181.68,188.815C179.178,188.933 176.623,187.647 175.29,185.517C174.163,183.937 173.852,181.881 174.195,179.997C174.734,177.083 177.218,174.646 180.143,174.17Z" style="fill:rgb(118,118,118);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.246717,0,0,0.246717,1.81554,51.8412)">
|
||||
<path d="M117.197,200.078C119.217,199.716 121.377,200.23 123.002,201.492C125.534,203.376 126.601,206.982 125.45,209.93C124.67,212.115 122.798,213.844 120.574,214.485C118.41,215.135 115.966,214.7 114.147,213.36C111.652,211.615 110.494,208.217 111.39,205.308C112.124,202.64 114.475,200.545 117.197,200.078Z" style="fill:rgb(190,190,190);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g transform="matrix(0.0188103,0,0,0.0188103,35.2752,7.20512)">
|
||||
<path d="M2345.33,2497L154.666,2497C69.791,2497 1.5,2428.22 1.5,2343.83L1.5,153.166C1.5,68.291 70.278,0 154.666,0L2345.33,0C2430.21,0 2498.5,68.778 2498.5,153.166L2498.5,2343.83C2498.5,2428.71 2430.21,2497 2345.33,2497Z" style="fill:rgb(0,120,215);fill-rule:nonzero;"/>
|
||||
<path d="M1719.01,779.977C1719.01,787.294 1719.01,794.123 1718.52,801.44C1661.94,789.245 1602.92,779.489 1541.94,771.685C1537.55,614.128 1408.78,487.791 1250.24,487.791C1091.71,487.791 962.447,614.128 958.545,771.685C897.571,779.489 838.549,789.245 781.965,801.44C781.477,794.123 781.477,786.806 781.477,779.489C781.477,520.473 991.227,310.235 1250.73,310.235C1508.77,311.21 1719.01,520.96 1719.01,779.977ZM1252.19,2186.76C2080.46,1838.48 1954.13,951.679 1954.13,951.679C1760.96,879.486 1517.07,836.561 1251.22,836.561C985.374,836.561 741.478,879.486 548.313,951.679C548.313,951.679 421.975,1838.48 1250.24,2186.76L1252.19,2186.76Z" style="fill:white;fill-rule:nonzero;"/>
|
||||
<path d="M1480.48,1628.25C1480.48,1638.49 1479.99,1648.24 1478.53,1658L1023.42,1658C1021.96,1648.24 1021.47,1638.49 1021.47,1628.25C1021.47,1524.83 1089.76,1437.52 1183.9,1408.74C1120.49,1382.4 1075.62,1319.96 1075.62,1246.79C1075.62,1149.72 1154.15,1071.68 1250.73,1071.68C1347.31,1071.68 1425.85,1150.21 1425.85,1246.79C1425.85,1319.96 1380.97,1382.4 1317.56,1408.74C1412.19,1437.03 1480.48,1524.83 1480.48,1628.25Z" style="fill:rgb(0,120,215);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 15 KiB |
@ -1,51 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg width="100%" height="100%" viewBox="0 0 118 118" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
|
||||
<g transform="matrix(1,0,0,1,-125,0)">
|
||||
<g id="mfa02" transform="matrix(1,0,0,1,-58.8999,0)">
|
||||
<rect x="184.243" y="0" width="117.576" height="117.576" style="fill:none;"/>
|
||||
<g id="ic_fingerprint_24px" transform="matrix(2.30074,0,0,2.30074,214.226,0.504338)">
|
||||
<path d="M17.81,4.47C17.73,4.47 17.65,4.45 17.58,4.41C15.66,3.42 14,3 12.01,3C10.03,3 8.15,3.47 6.44,4.41C6.198,4.537 5.895,4.448 5.76,4.21C5.631,3.968 5.721,3.663 5.96,3.53C7.82,2.52 9.86,2 12.01,2C14.14,2 16,2.47 18.04,3.52C18.29,3.65 18.38,3.95 18.25,4.19C18.169,4.36 17.998,4.469 17.81,4.47ZM3.5,9.72C3.499,9.72 3.498,9.72 3.497,9.72C3.223,9.72 2.997,9.494 2.997,9.22C2.997,9.116 3.03,9.015 3.09,8.93C4.08,7.53 5.34,6.43 6.84,5.66C9.98,4.04 14,4.03 17.15,5.65C18.65,6.42 19.91,7.51 20.9,8.9C20.961,8.985 20.993,9.086 20.993,9.191C20.993,9.353 20.913,9.507 20.78,9.6C20.695,9.661 20.594,9.693 20.489,9.693C20.327,9.693 20.173,9.613 20.08,9.48C19.204,8.24 18.041,7.232 16.69,6.54C13.82,5.07 10.15,5.07 7.29,6.55C5.93,7.25 4.79,8.25 3.89,9.51C3.81,9.65 3.66,9.72 3.5,9.72ZM9.75,21.79C9.617,21.792 9.49,21.737 9.4,21.64C8.53,20.77 8.06,20.21 7.39,19C6.7,17.77 6.34,16.27 6.34,14.66C6.34,11.69 8.88,9.27 12,9.27C15.12,9.27 17.66,11.69 17.66,14.66C17.66,14.94 17.44,15.16 17.16,15.16C16.88,15.16 16.66,14.94 16.66,14.66C16.66,12.24 14.57,10.27 12,10.27C9.43,10.27 7.34,12.24 7.34,14.66C7.34,16.1 7.66,17.43 8.27,18.51C8.91,19.66 9.35,20.15 10.12,20.93C10.31,21.13 10.31,21.44 10.12,21.64C10.01,21.74 9.88,21.79 9.75,21.79ZM16.92,19.94C15.73,19.94 14.68,19.64 13.82,19.05C12.33,18.04 11.44,16.4 11.44,14.66C11.44,14.38 11.66,14.16 11.94,14.16C12.22,14.16 12.44,14.38 12.44,14.66C12.44,16.07 13.16,17.4 14.38,18.22C15.09,18.7 15.92,18.93 16.92,18.93C17.16,18.93 17.56,18.9 17.96,18.83C18.23,18.78 18.49,18.96 18.54,19.24C18.59,19.51 18.41,19.77 18.13,19.82C17.56,19.93 17.06,19.94 16.92,19.94ZM14.91,22C14.87,22 14.82,21.99 14.78,21.98C13.19,21.54 12.15,20.95 11.06,19.88C9.665,18.503 8.883,16.62 8.89,14.66C8.89,13.04 10.27,11.72 11.97,11.72C13.67,11.72 15.05,13.04 15.05,14.66C15.05,15.73 15.98,16.6 17.13,16.6C18.28,16.6 19.21,15.73 19.21,14.66C19.21,10.89 15.96,7.83 11.96,7.83C9.12,7.83 6.52,9.41 5.35,11.86C4.96,12.67 4.76,13.62 4.76,14.66C4.76,15.44 4.83,16.67 5.43,18.27C5.53,18.53 5.4,18.82 5.14,18.91C4.88,19.01 4.59,18.87 4.5,18.62C4.018,17.355 3.771,16.013 3.77,14.66C3.77,13.46 4,12.37 4.45,11.42C5.78,8.63 8.73,6.82 11.96,6.82C16.51,6.82 20.21,10.33 20.21,14.65C20.21,16.27 18.83,17.59 17.13,17.59C15.43,17.59 14.05,16.27 14.05,14.65C14.05,13.58 13.12,12.71 11.97,12.71C10.82,12.71 9.89,13.58 9.89,14.65C9.89,16.36 10.55,17.96 11.76,19.16C12.71,20.1 13.62,20.62 15.03,21.01C15.3,21.08 15.45,21.36 15.38,21.62C15.33,21.85 15.12,22 14.91,22Z" style="fill:rgb(175,175,175);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(0.145369,0.145369,-0.145369,0.145369,124.248,-755.444)">
|
||||
<g transform="matrix(0.455964,0,0,0.542435,3234,1523.19)">
|
||||
<path d="M408.347,1287.73L297.347,1287.73L297.347,1370.87L408.347,1370.87L408.347,1287.73ZM388.248,1304.63L388.248,1353.97C388.248,1353.97 317.446,1353.97 317.446,1353.97C317.446,1353.97 317.446,1304.63 317.446,1304.63L388.248,1304.63Z" style="fill:rgb(175,175,175);"/>
|
||||
</g>
|
||||
<g transform="matrix(1,0,0,1,0.742563,-124.975)">
|
||||
<path d="M3469.55,2402.21C3469.55,2393.88 3462.79,2387.13 3454.47,2387.13L3333.82,2387.13C3325.5,2387.13 3318.74,2393.88 3318.74,2402.21L3318.74,2602.61C3318.74,2623.42 3335.64,2640.31 3356.44,2640.31L3431.85,2640.31C3452.65,2640.31 3469.55,2623.42 3469.55,2602.61L3469.55,2402.21ZM3460.38,2402.21L3460.38,2602.61C3460.38,2618.36 3447.59,2631.14 3431.85,2631.14L3356.44,2631.14C3340.69,2631.14 3327.91,2618.36 3327.91,2602.61L3327.91,2402.21C3327.91,2398.94 3330.56,2396.29 3333.82,2396.29C3333.82,2396.29 3454.47,2396.29 3454.47,2396.29C3457.73,2396.29 3460.38,2398.94 3460.38,2402.21ZM3394.14,2578.68C3380.41,2578.68 3369.26,2589.83 3369.26,2603.56C3369.26,2617.3 3380.41,2628.45 3394.14,2628.45C3407.88,2628.45 3419.03,2617.3 3419.03,2603.56C3419.03,2589.83 3407.88,2578.68 3394.14,2578.68ZM3394.14,2587.84C3402.82,2587.84 3409.86,2594.89 3409.86,2603.56C3409.86,2612.24 3402.82,2619.28 3394.14,2619.28C3385.47,2619.28 3378.43,2612.24 3378.43,2603.56C3378.43,2594.89 3385.47,2587.84 3394.14,2587.84Z" style="fill:rgb(175,175,175);"/>
|
||||
</g>
|
||||
<g transform="matrix(1.18897,0,0,1.18897,2954.16,178.595)">
|
||||
<path d="M370.675,1826.57C388.504,1826.57 402.979,1841.05 402.979,1858.88C402.979,1876.71 388.504,1891.18 370.675,1891.18C352.846,1891.18 338.371,1876.71 338.371,1858.88C338.371,1841.05 352.846,1826.57 370.675,1826.57ZM370.675,1834.28C384.25,1834.28 395.271,1845.3 395.271,1858.88C395.271,1872.45 384.25,1883.47 370.675,1883.47C357.1,1883.47 346.079,1872.45 346.079,1858.88C346.079,1845.3 357.1,1834.28 370.675,1834.28Z" style="fill:rgb(175,175,175);"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Face-ID" transform="matrix(0.63043,0,0,0.63043,187.473,59.1379)">
|
||||
<g>
|
||||
<g>
|
||||
<g id="Corners">
|
||||
<g id="Corner">
|
||||
<path d="M4.114,21.943L4.114,13.029C4.114,7.993 7.993,4.114 13.029,4.114L21.943,4.114C23.079,4.114 24,3.193 24,2.057C24,0.921 23.079,0 21.943,0L13.029,0C5.721,0 0,5.721 0,13.029L0,21.943C0,23.079 0.921,24 2.057,24C3.193,24 4.114,23.079 4.114,21.943Z" style="fill:rgb(175,175,175);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g id="Corner1" serif:id="Corner" transform="matrix(-1,0,0,1,80,0)">
|
||||
<path d="M4.114,21.943L4.114,13.029C4.114,7.993 7.993,4.114 13.029,4.114L21.943,4.114C23.079,4.114 24,3.193 24,2.057C24,0.921 23.079,0 21.943,0L13.029,0C5.721,0 0,5.721 0,13.029L0,21.943C0,23.079 0.921,24 2.057,24C3.193,24 4.114,23.079 4.114,21.943Z" style="fill:rgb(175,175,175);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g id="Corner2" serif:id="Corner" transform="matrix(1,0,0,-1,0,80)">
|
||||
<path d="M4.114,21.943L4.114,13.029C4.114,7.993 7.993,4.114 13.029,4.114L21.943,4.114C23.079,4.114 24,3.193 24,2.057C24,0.921 23.079,0 21.943,0L13.029,0C5.721,0 0,5.721 0,13.029L0,21.943C0,23.079 0.921,24 2.057,24C3.193,24 4.114,23.079 4.114,21.943Z" style="fill:rgb(175,175,175);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g id="Corner3" serif:id="Corner" transform="matrix(-1,0,0,-1,80,80)">
|
||||
<path d="M4.114,21.943L4.114,13.029C4.114,7.993 7.993,4.114 13.029,4.114L21.943,4.114C23.079,4.114 24,3.193 24,2.057C24,0.921 23.079,0 21.943,0L13.029,0C5.721,0 0,5.721 0,13.029L0,21.943C0,23.079 0.921,24 2.057,24C3.193,24 4.114,23.079 4.114,21.943Z" style="fill:rgb(175,175,175);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Eye" transform="matrix(1,0,0,1,21.7544,28.0702)">
|
||||
<path id="Path" d="M0,2.143L0,7.86C0,9.044 0.895,10.003 2,10.003C3.105,10.003 4,9.044 4,7.86L4,2.143C4,0.959 3.105,0 2,0C0.895,0 0,0.959 0,2.143Z" style="fill:rgb(175,175,175);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g id="Eye1" serif:id="Eye" transform="matrix(1,0,0,1,54.7368,28.0702)">
|
||||
<path id="Path1" serif:id="Path" d="M0,2.143L0,7.86C0,9.044 0.895,10.003 2,10.003C3.105,10.003 4,9.044 4,7.86L4,2.143C4,0.959 3.105,0 2,0C0.895,0 0,0.959 0,2.143Z" style="fill:rgb(175,175,175);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<path id="Mouth" d="M25.932,59.083C29.833,62.724 34.558,64.561 40,64.561C45.442,64.561 50.167,62.724 54.068,59.083C54.918,58.29 54.964,56.957 54.171,56.107C53.377,55.257 52.045,55.211 51.195,56.005C48.079,58.913 44.382,60.351 40,60.351C35.618,60.351 31.921,58.913 28.805,56.005C27.955,55.211 26.623,55.257 25.829,56.107C25.036,56.957 25.082,58.29 25.932,59.083Z" style="fill:rgb(175,175,175);fill-rule:nonzero;"/>
|
||||
<path id="Nose" d="M40,30.175L40,44.912C40,45.855 39.539,46.316 38.591,46.316L37.193,46.316C36.03,46.316 35.088,47.258 35.088,48.421C35.088,49.584 36.03,50.526 37.193,50.526L38.591,50.526C41.863,50.526 44.211,48.182 44.211,44.912L44.211,30.175C44.211,29.013 43.268,28.07 42.105,28.07C40.943,28.07 40,29.013 40,30.175Z" style="fill:rgb(175,175,175);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 8.9 KiB |
@ -1,43 +1,46 @@
|
||||
@mixin lgn-mfa-base {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
margin: 1rem 0;
|
||||
flex-direction: column;
|
||||
margin: 2rem 0;
|
||||
|
||||
.mfa {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
padding: 1rem 0.5rem;
|
||||
margin: 0.5rem 0;
|
||||
position: relative;
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
input[type="radio"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
width: 100%;
|
||||
|
||||
.mfa-img {
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
display: flex;
|
||||
margin-bottom: 0.5rem;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.fingerprint,
|
||||
&.email,
|
||||
&.sms {
|
||||
padding: 0.25rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,26 +4,26 @@
|
||||
@mixin lgn-mfa-theme() {
|
||||
.lgn-mfa-options {
|
||||
.mfa {
|
||||
label {
|
||||
input[type="radio"] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
+ .mfa-img {
|
||||
background-color: var(--zitadel-color-card-hover);
|
||||
border-color: var(--zitadel-color-input-border-hover);
|
||||
}
|
||||
}
|
||||
input[type="radio"] {
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--zitadel-color-card-hover);
|
||||
border-color: var(--zitadel-color-input-border-hover);
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
border: 1px solid var(--zitadel-color-input-border);
|
||||
|
||||
.mfa-img {
|
||||
border: 1px solid var(--zitadel-color-input-border);
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="radio"]:checked + .mfa-img {
|
||||
background-color: var(--zitadel-color-card-hover);
|
||||
border: 1px solid var(--zitadel-color-input-border-active);
|
||||
box-shadow: 0 0 0 2px var(--zitadel-color-input-border-active);
|
||||
}
|
||||
input[type="radio"]:checked + label {
|
||||
background-color: var(--zitadel-color-card-hover);
|
||||
border: 1px solid var(--zitadel-color-input-border-active);
|
||||
box-shadow: 0 0 0 2px var(--zitadel-color-input-border-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,8 +61,8 @@ $lgn-radio-label-padding: 0 0 0 ($lgn-radio-size + 10px);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: $lgn-radio-size / 2 - $lgn-radio-checked-size / 2;
|
||||
left: $lgn-radio-size / 2 - $lgn-radio-checked-size / 2;
|
||||
top: calc($lgn-radio-size / 2) - calc($lgn-radio-checked-size / 2);
|
||||
left: calc($lgn-radio-size / 2) - calc($lgn-radio-checked-size / 2);
|
||||
width: $lgn-radio-checked-size;
|
||||
height: $lgn-radio-checked-size;
|
||||
transform: scale(0);
|
||||
|
||||
@ -16,34 +16,74 @@
|
||||
{{ range $provider := .MFAProviders}} {{ $providerName := (t (printf
|
||||
"InitMFAPrompt.Provider%v" $provider)) }}
|
||||
<div class="mfa">
|
||||
<label>
|
||||
<input
|
||||
<input
|
||||
id="{{ $provider }}"
|
||||
type="radio"
|
||||
name="provider"
|
||||
value="{{ $provider }}"
|
||||
required
|
||||
/>
|
||||
<label>
|
||||
{{ if eq $provider 0 }}
|
||||
<div class="mfa-img">
|
||||
<img width="100px" height="100px" alt="OTP" src="{{ resourceUrl
|
||||
"images/mfa/mfa-otp.svg" }}" />
|
||||
<svg
|
||||
class="authenticator-logo"
|
||||
version="1.1"
|
||||
baseProfile="basic"
|
||||
id="Layer_1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 512 512"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<path
|
||||
fill="#1A73E8"
|
||||
d="M440,255.99997v0.00006C440,273.12085,426.12085,287,409.00003,287H302l-46-93.01001l49.6507-85.9951
|
||||
c8.56021-14.82629,27.51834-19.9065,42.34518-11.34724l0.00586,0.0034c14.82776,8.55979,19.90875,27.51928,11.34857,42.34682
|
||||
L309.70001,225h99.30002C426.12085,225,440,238.87917,440,255.99997z"
|
||||
/>
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M348.00174,415.34897l-0.00586,0.00339c-14.82684,8.55927-33.78497,3.47903-42.34518-11.34723L256,318.01001
|
||||
l-49.65065,85.99509c-8.5602,14.82629-27.51834,19.90652-42.34517,11.34729l-0.00591-0.00342
|
||||
c-14.82777-8.55978-19.90875-27.51929-11.34859-42.34683L202.29999,287L256,285l53.70001,2l49.6503,86.00214
|
||||
C367.91049,387.82968,362.8295,406.78918,348.00174,415.34897z"
|
||||
/>
|
||||
<path
|
||||
fill="#FBBC04"
|
||||
d="M256,193.98999L242,232l-39.70001-7l-49.6503-86.00212
|
||||
c-8.56017-14.82755-3.47919-33.78705,11.34859-42.34684l0.00591-0.00341c14.82683-8.55925,33.78497-3.47903,42.34517,11.34726
|
||||
L256,193.98999z"
|
||||
/>
|
||||
<path
|
||||
fill="#34A853"
|
||||
d="M248,225l-36,62H102.99997C85.87916,287,72,273.12085,72,256.00003v-0.00006
|
||||
C72,238.87917,85.87916,225,102.99997,225H248z"
|
||||
/>
|
||||
<polygon fill="#185DB7" points="309.70001,287 202.29999,287 256,193.98999 " />
|
||||
</svg>
|
||||
</div>
|
||||
{{ end }} {{ if eq $provider 1 }}
|
||||
<div class="mfa-img">
|
||||
<img width="100px" height="100px" alt="OTP" src="{{ resourceUrl
|
||||
"images/mfa/mfa-u2f.svg" }}" />
|
||||
</div>
|
||||
<div class="mfa-img fingerprint" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
|
||||
</svg>
|
||||
</div>
|
||||
{{ end }} {{ if eq $provider 3 }}
|
||||
<div class="mfa-img">
|
||||
<img width="100px" height="100px" alt="OTP SMS" src="{{ resourceUrl
|
||||
"images/mfa/mfa-u2f.svg" }}" /> // TODO: image
|
||||
<div class="mfa-img email">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
|
||||
</svg>
|
||||
</div>
|
||||
{{ end }}{{ if eq $provider 4 }}
|
||||
<div class="mfa-img">
|
||||
<img width="100px" height="100px" alt="OTP Email" src="{{ resourceUrl
|
||||
"images/mfa/mfa-u2f.svg" }}" /> // TODO: image
|
||||
{{ end }} {{ if eq $provider 4 }}
|
||||
<div class="mfa-img sms" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width={1.5} stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
{{ end }}
|
||||
<span>{{ $providerName }} </span>
|
||||
</label>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user