Refine the auth design; clean up the layout and styles there (#1240)
* Refine the auth design; clean up the layout and styles there * It doesn't really sing, does it * Tweak auth form spacing and wording * Final tweaks to improved auth design * Merge * fix lockfile --------- Co-authored-by: Prospector <prospectordev@gmail.com>
This commit is contained in:
falseresync
GitHub
parent
ce995812d4
commit
0ffe8ef102
5
assets/icons/auth/key.svg
Normal file
5
assets/icons/auth/key.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-key" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1 -4.069 0l-.301 -.301l-6.558 6.558a2 2 0 0 1 -1.239 .578l-.175 .008h-1.172a1 1 0 0 1 -.993 -.883l-.007 -.117v-1.172a2 2 0 0 1 .467 -1.284l.119 -.13l.414 -.414h2v-2h2v-2l2.144 -2.144l-.301 -.301a2.877 2.877 0 0 1 0 -4.069l2.643 -2.643a2.877 2.877 0 0 1 4.069 0z"></path>
|
||||
<path d="M15 9h.01"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 683 B |
5
assets/icons/auth/mail.svg
Normal file
5
assets/icons/auth/mail.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-mail" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"></path>
|
||||
<path d="M3 7l9 6l9 -6"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 425 B |
1
assets/icons/auth/sso-discord.svg
Normal file
1
assets/icons/auth/sso-discord.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#5865f2;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 989 B |
1
assets/icons/auth/sso-github.svg
Normal file
1
assets/icons/auth/sso-github.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97.63 96.03" fill="currentColor"> <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"></path> </svg>
|
||||
|
After Width: | Height: | Size: 982 B |
6
assets/icons/auth/sso-gitlab.svg
Normal file
6
assets/icons/auth/sso-gitlab.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="93.97 97.52 192.07 185">
|
||||
<path fill="#e24329" d="m282.83 170.73-.27-.69-26.14-68.22a6.81 6.81 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04Z" />
|
||||
<path d="m282.83 170.73-.27-.69a88.3 88.3 0 0 0-35.15 15.8L190 229.25c19.55 14.79 36.57 27.64 36.57 27.64l40.06-30 .1-.08a48.56 48.56 0 0 0 16.1-56.08Z" fill="#fc6d26" />
|
||||
<path fill="#fca326" d="m153.43 256.89 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91S209.55 244 190 229.25c-19.55 14.75-36.57 27.64-36.57 27.64Z" />
|
||||
<path d="M132.58 185.84A88.19 88.19 0 0 0 97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82L190 229.21Z" fill="#fc6d26" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 967 B |
18
assets/icons/auth/sso-google.svg
Normal file
18
assets/icons/auth/sso-google.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 100 100" 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;">
|
||||
<circle cx="50" cy="50" r="50" style="fill:white;"/>
|
||||
<g id="Google__G__Logo.svg" transform="matrix(0.0991612,0,0,0.0991612,49.3739,50)">
|
||||
<g transform="matrix(1,0,0,1,-352.8,-360)">
|
||||
<clipPath id="_clip1">
|
||||
<rect x="0" y="0" width="705.6" height="720"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g transform="matrix(1,0,0,1,4477.16,2891.98)">
|
||||
<path d="M-4117.16,-2597.44L-4117.16,-2458.02L-3923.42,-2458.02C-3931.93,-2413.18 -3957.46,-2375.22 -3995.75,-2349.69L-3878.91,-2259.03C-3810.84,-2321.87 -3771.56,-2414.16 -3771.56,-2523.8C-3771.56,-2549.33 -3773.85,-2573.87 -3778.11,-2597.43L-4117.16,-2597.44Z" style="fill:rgb(66,133,244);fill-rule:nonzero;"/>
|
||||
<path d="M-4318.92,-2463.46L-4345.27,-2443.29L-4438.55,-2370.64C-4379.31,-2253.15 -4257.9,-2171.98 -4117.17,-2171.98C-4019.97,-2171.98 -3938.48,-2204.05 -3878.92,-2259.03L-3995.75,-2349.69C-4027.83,-2328.09 -4068.74,-2315 -4117.17,-2315C-4210.77,-2315 -4290.3,-2378.16 -4318.77,-2463.25L-4318.92,-2463.46Z" style="fill:rgb(52,168,83);fill-rule:nonzero;"/>
|
||||
<path d="M-4438.55,-2693.33C-4463.09,-2644.89 -4477.16,-2590.24 -4477.16,-2531.99C-4477.16,-2473.73 -4463.09,-2419.08 -4438.55,-2370.64C-4438.55,-2370.32 -4318.76,-2463.59 -4318.76,-2463.59C-4325.96,-2485.19 -4330.22,-2508.09 -4330.22,-2531.99C-4330.22,-2555.88 -4325.96,-2578.79 -4318.76,-2600.39L-4438.55,-2693.33Z" style="fill:rgb(251,188,5);fill-rule:nonzero;"/>
|
||||
<path d="M-4117.16,-2748.64C-4064.14,-2748.64 -4017.02,-2730.31 -3979.38,-2694.97L-3876.29,-2798.06C-3938.8,-2856.31 -4019.96,-2891.99 -4117.16,-2891.99C-4257.89,-2891.99 -4379.31,-2811.15 -4438.55,-2693.33L-4318.76,-2600.38C-4290.29,-2685.47 -4210.76,-2748.64 -4117.16,-2748.64Z" style="fill:rgb(234,67,53);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><title>MS-SymbolLockup</title><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21"><title>MS-SymbolLockup</title><rect x="1" y="1" width="9" height="9" fill="#f25022"/><rect x="1" y="11" width="9" height="9" fill="#00a4ef"/><rect x="11" y="1" width="9" height="9" fill="#7fba00"/><rect x="11" y="11" width="9" height="9" fill="#ffb900"/></svg>
|
||||
|
Before Width: | Height: | Size: 320 B After Width: | Height: | Size: 321 B |
@ -1,4 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-steam" viewBox="0 0 16 16">
|
||||
<path d="M.329 10.333A8.01 8.01 0 0 0 7.99 16C12.414 16 16 12.418 16 8s-3.586-8-8.009-8A8.006 8.006 0 0 0 0 7.468l.003.006 4.304 1.769A2.198 2.198 0 0 1 5.62 8.88l1.96-2.844-.001-.04a3.046 3.046 0 0 1 3.042-3.043 3.046 3.046 0 0 1 3.042 3.043 3.047 3.047 0 0 1-3.111 3.044l-2.804 2a2.223 2.223 0 0 1-3.075 2.11 2.217 2.217 0 0 1-1.312-1.568L.33 10.333Z"/>
|
||||
<path d="M4.868 12.683a1.715 1.715 0 0 0 1.318-3.165 1.705 1.705 0 0 0-1.263-.02l1.023.424a1.261 1.261 0 1 1-.97 2.33l-.99-.41a1.7 1.7 0 0 0 .882.84Zm3.726-6.687a2.03 2.03 0 0 0 2.027 2.029 2.03 2.03 0 0 0 2.027-2.029 2.03 2.03 0 0 0-2.027-2.027 2.03 2.03 0 0 0-2.027 2.027Zm2.03-1.527a1.524 1.524 0 1 1-.002 3.048 1.524 1.524 0 0 1 .002-3.048Z"/>
|
||||
</svg>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 838 B After Width: | Height: | Size: 839 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36"><defs><style>.cls-1{fill:#fff;}</style></defs><g id="图层_2" data-name="图层 2"><g id="Discord_Logos" data-name="Discord Logos"><g id="Discord_Logo_-_Large_-_White" data-name="Discord Logo - Large - White"><path class="cls-1" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 985 B |
@ -1,9 +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 380 380" 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;" fill="currentColor">
|
||||
<g transform="matrix(1.97904,0,0,1.97904,-186.013,-186.006)">
|
||||
<g id="LOGO">
|
||||
<path d="M282.83,170.73L282.56,170.04L256.42,101.82C255.888,100.483 254.946,99.349 253.73,98.58C251.243,97.036 248.038,97.208 245.73,99.01C244.613,99.917 243.803,101.146 243.41,102.53L225.76,156.53L154.29,156.53L136.64,102.53C136.257,101.139 135.445,99.903 134.32,99C132.012,97.198 128.807,97.026 126.32,98.57C125.106,99.342 124.165,100.475 123.63,101.81L97.44,170L97.18,170.69C89.472,190.829 96.065,213.803 113.28,226.79L113.37,226.86L113.61,227.03L153.43,256.85L173.13,271.76L185.13,280.82C188.006,283.004 192.014,283.004 194.89,280.82L206.89,271.76L226.59,256.85L266.65,226.85L266.75,226.77C283.925,213.782 290.505,190.849 282.83,170.73Z" style="fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1,20 +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 100 100" 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;">
|
||||
<circle cx="50" cy="50" r="50" style="fill:white;"/>
|
||||
<g id="Google__G__Logo.svg" transform="matrix(0.0991612,0,0,0.0991612,49.3739,50)">
|
||||
<g transform="matrix(1,0,0,1,-352.8,-360)">
|
||||
<clipPath id="_clip1">
|
||||
<rect x="0" y="0" width="705.6" height="720"/>
|
||||
</clipPath>
|
||||
<g clip-path="url(#_clip1)">
|
||||
<g transform="matrix(1,0,0,1,4477.16,2891.98)">
|
||||
<path d="M-4117.16,-2597.44L-4117.16,-2458.02L-3923.42,-2458.02C-3931.93,-2413.18 -3957.46,-2375.22 -3995.75,-2349.69L-3878.91,-2259.03C-3810.84,-2321.87 -3771.56,-2414.16 -3771.56,-2523.8C-3771.56,-2549.33 -3773.85,-2573.87 -3778.11,-2597.43L-4117.16,-2597.44Z" style="fill:rgb(66,133,244);fill-rule:nonzero;"/>
|
||||
<path d="M-4318.92,-2463.46L-4345.27,-2443.29L-4438.55,-2370.64C-4379.31,-2253.15 -4257.9,-2171.98 -4117.17,-2171.98C-4019.97,-2171.98 -3938.48,-2204.05 -3878.92,-2259.03L-3995.75,-2349.69C-4027.83,-2328.09 -4068.74,-2315 -4117.17,-2315C-4210.77,-2315 -4290.3,-2378.16 -4318.77,-2463.25L-4318.92,-2463.46Z" style="fill:rgb(52,168,83);fill-rule:nonzero;"/>
|
||||
<path d="M-4438.55,-2693.33C-4463.09,-2644.89 -4477.16,-2590.24 -4477.16,-2531.99C-4477.16,-2473.73 -4463.09,-2419.08 -4438.55,-2370.64C-4438.55,-2370.32 -4318.76,-2463.59 -4318.76,-2463.59C-4325.96,-2485.19 -4330.22,-2508.09 -4330.22,-2531.99C-4330.22,-2555.88 -4325.96,-2578.79 -4318.76,-2600.39L-4438.55,-2693.33Z" style="fill:rgb(251,188,5);fill-rule:nonzero;"/>
|
||||
<path d="M-4117.16,-2748.64C-4064.14,-2748.64 -4017.02,-2730.31 -3979.38,-2694.97L-3876.29,-2798.06C-3938.8,-2856.31 -4019.96,-2891.99 -4117.16,-2891.99C-4257.89,-2891.99 -4379.31,-2811.15 -4438.55,-2693.33L-4318.76,-2600.38C-4290.29,-2685.47 -4210.76,-2748.64 -4117.16,-2748.64Z" style="fill:rgb(234,67,53);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB |
@ -304,6 +304,9 @@ export default defineNuxtConfig({
|
||||
nitro: {
|
||||
moduleSideEffects: ['@vintl/compact-number/locale-data'],
|
||||
},
|
||||
devtools: {
|
||||
enabled: true,
|
||||
},
|
||||
})
|
||||
|
||||
function getApiUrl() {
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@formatjs/cli": "^6.1.2",
|
||||
"@nuxt/devtools": "^0.7.0",
|
||||
"@nuxtjs/eslint-config-typescript": "^12.0.0",
|
||||
"@nuxtjs/turnstile": "^0.5.0",
|
||||
"@types/node": "^20.1.0",
|
||||
|
||||
196
pages/auth.vue
196
pages/auth.vue
@ -1,159 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<NuxtPage class="auth-container universal-card" :route="route" />
|
||||
</div>
|
||||
<NuxtPage class="auth-container universal-card" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
<style>
|
||||
.auth-container {
|
||||
width: 25rem;
|
||||
padding: var(--gap-xl);
|
||||
background-color: var(--color-raised-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
width: 30rem;
|
||||
margin: 2rem auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
.auth-container h1 {
|
||||
font-size: var(--font-size-xl);
|
||||
margin: 0 0 -1rem 0;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
color: var(--color-contrast);
|
||||
}
|
||||
.auth-container p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
.auth-container .btn {
|
||||
font-weight: 700;
|
||||
min-height: 2.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-weight: 700;
|
||||
min-height: 2.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.centered-btn {
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
.btn.continue-btn svg {
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.btn.right-icon svg {
|
||||
margin-left: var(--gap-sm);
|
||||
}
|
||||
.third-party {
|
||||
display: grid;
|
||||
gap: var(--gap-md);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn.left-icon svg {
|
||||
margin-right: var(--gap-sm);
|
||||
}
|
||||
.third-party .btn {
|
||||
width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: var(--gap-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.third-party .btn svg {
|
||||
margin-right: var(--gap-sm);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
button.checkbox {
|
||||
appearance: none !important;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.continue-btn {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.continue-btn svg {
|
||||
margin: 0 0 0 0.5rem;
|
||||
}
|
||||
|
||||
// login styles
|
||||
.third-party {
|
||||
display: grid;
|
||||
gap: var(--gap-md);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (max-width: 25.5rem) {
|
||||
.third-party .btn {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.third-party .btn svg {
|
||||
margin-right: var(--gap-sm);
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.discord-btn {
|
||||
color: #ffffff;
|
||||
background-color: #5865f2;
|
||||
}
|
||||
|
||||
.apple-btn {
|
||||
color: var(--color-accent-contrast);
|
||||
background-color: var(--color-contrast);
|
||||
}
|
||||
|
||||
.google-btn {
|
||||
color: #ffffff;
|
||||
background-color: #4285f4;
|
||||
}
|
||||
|
||||
.gitlab-btn {
|
||||
color: #ffffff;
|
||||
background-color: #fc6d26;
|
||||
}
|
||||
|
||||
.github-btn {
|
||||
color: #ffffff;
|
||||
background-color: #8740f1;
|
||||
}
|
||||
|
||||
.microsoft-btn {
|
||||
color: var(--color-accent-contrast);
|
||||
background-color: var(--color-contrast);
|
||||
}
|
||||
|
||||
.text-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.text-divider div {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
max-width: 5rem;
|
||||
opacity: 40%;
|
||||
border-radius: var(--radius-max);
|
||||
background-color: var(--color-base);
|
||||
}
|
||||
|
||||
.text-divider span {
|
||||
margin-inline: var(--gap-sm);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 25.5rem) {
|
||||
width: auto;
|
||||
margin: 1rem;
|
||||
|
||||
.third-party .btn {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
}
|
||||
|
||||
.auth-page-container {
|
||||
.turnstile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.auth-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--gap-md);
|
||||
}
|
||||
|
||||
.auth-form .auth-form__input {
|
||||
width: 100%;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.auth-form__additional-options {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--gap-md);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,31 +1,69 @@
|
||||
<template>
|
||||
<div class="auth-page-container">
|
||||
<div>
|
||||
<h1>Reset your password</h1>
|
||||
<template v-if="step === 'choose_method'">
|
||||
<p>
|
||||
Enter your email below and we'll send a recovery link to allow you to recover your account.
|
||||
<NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
|
||||
</p>
|
||||
<label for="email" hidden>Email or username</label>
|
||||
<input id="email" v-model="email" type="text" placeholder="Email or username" />
|
||||
<button class="btn btn-primary continue-btn" @click="recovery">Send recovery email</button>
|
||||
</template>
|
||||
<template v-else-if="step === 'passed_challenge'">
|
||||
<p>Enter your new password below to gain access to your account.</p>
|
||||
<label for="password" hidden>Password</label>
|
||||
<input id="password" v-model="newPassword" type="password" placeholder="Password" />
|
||||
<label for="confirm-password" hi2dden>Password</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmNewPassword"
|
||||
type="password"
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
<button class="btn btn-primary continue-btn" @click="changePassword">Reset password</button>
|
||||
</template>
|
||||
<section class="auth-form">
|
||||
<template v-if="step === 'choose_method'">
|
||||
<p>
|
||||
Enter your email below and we'll send a recovery link to allow you to recover your
|
||||
account.
|
||||
<NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
|
||||
</p>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="email" hidden>Email or username</label>
|
||||
<MailIcon />
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="text"
|
||||
class="auth-form__input"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-primary centered-btn" @click="recovery">
|
||||
<SendIcon /> Send recovery email
|
||||
</button>
|
||||
</template>
|
||||
<template v-else-if="step === 'passed_challenge'">
|
||||
<p>Enter your new password below to gain access to your account.</p>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="password" hidden>Password</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="password"
|
||||
v-model="newPassword"
|
||||
type="password"
|
||||
class="auth-form__input"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="confirm-password" hidden>Password</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmNewPassword"
|
||||
type="password"
|
||||
class="auth-form__input"
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button class="auth-form__input btn btn-primary continue-btn" @click="changePassword">
|
||||
Reset password
|
||||
</button>
|
||||
</template>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { SendIcon } from 'omorphia'
|
||||
import MailIcon from 'assets/icons/auth/mail.svg'
|
||||
import KeyIcon from 'assets/icons/auth/key.svg'
|
||||
|
||||
useHead({
|
||||
title: 'Reset Password - Modrinth',
|
||||
})
|
||||
@ -35,7 +73,6 @@ if (auth.value.user) {
|
||||
await navigateTo('/dashboard')
|
||||
}
|
||||
|
||||
const data = useNuxtApp()
|
||||
const route = useRoute()
|
||||
|
||||
const step = ref('choose_method')
|
||||
@ -60,14 +97,14 @@ async function recovery() {
|
||||
},
|
||||
})
|
||||
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'Email sent',
|
||||
text: 'An email with instructions has been sent to you if the email was previously saved on your account.',
|
||||
type: 'success',
|
||||
})
|
||||
} catch (err) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data ? err.data.description : err,
|
||||
@ -92,7 +129,7 @@ async function changePassword() {
|
||||
},
|
||||
})
|
||||
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'Password successfully reset',
|
||||
text: 'You can now log-in into your account with your new password.',
|
||||
@ -100,7 +137,7 @@ async function changePassword() {
|
||||
})
|
||||
await navigateTo('/auth/sign-in')
|
||||
} catch (err) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data ? err.data.description : err,
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="auth-page-container">
|
||||
<div>
|
||||
<template v-if="flow">
|
||||
<label for="two-factor-code">
|
||||
<span class="label__title">Enter two-factor code</span>
|
||||
@ -13,74 +13,101 @@
|
||||
placeholder="Enter code..."
|
||||
/>
|
||||
|
||||
<button class="btn btn-primary continue-btn" @click="loginTwoFactor">
|
||||
<button class="btn btn-primary continue-btn" @click="begin2FASignIn">
|
||||
Sign in <RightArrowIcon />
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<h1>Continue with</h1>
|
||||
<div class="third-party">
|
||||
<a class="btn discord-btn" :href="getAuthUrl('discord')">
|
||||
<DiscordIcon /> <span>Discord</span>
|
||||
<h1>Sign in with</h1>
|
||||
|
||||
<section class="third-party">
|
||||
<a class="btn" :href="getAuthUrl('discord')">
|
||||
<DiscordIcon />
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<a class="btn github-btn" :href="getAuthUrl('github')"
|
||||
><GitHubIcon /> <span>GitHub</span></a
|
||||
>
|
||||
<a class="btn microsoft-btn" :href="getAuthUrl('microsoft')">
|
||||
<MicrosoftIcon /> <span>Microsoft</span>
|
||||
<a class="btn" :href="getAuthUrl('github')">
|
||||
<GitHubIcon />
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="btn google-btn" :href="getAuthUrl('google')">
|
||||
<GoogleIcon /> <span>Google</span>
|
||||
<a class="btn" :href="getAuthUrl('microsoft')">
|
||||
<MicrosoftIcon />
|
||||
<span>Microsoft</span>
|
||||
</a>
|
||||
<a class="btn apple-btn" :href="getAuthUrl('steam')"><SteamIcon /> <span>Steam</span></a>
|
||||
<a class="btn gitlab-btn" :href="getAuthUrl('gitlab')">
|
||||
<GitLabIcon /> <span>GitLab</span></a
|
||||
>
|
||||
</div>
|
||||
<div class="text-divider">
|
||||
<div></div>
|
||||
<span>or</span>
|
||||
<div></div>
|
||||
</div>
|
||||
<label for="email" hidden>Email or username</label>
|
||||
<input id="email" v-model="email" type="text" placeholder="Email or username" />
|
||||
<label for="password" hidden>Password</label>
|
||||
<input id="password" v-model="password" type="password" placeholder="Password" />
|
||||
<div class="account-options">
|
||||
<a class="btn" :href="getAuthUrl('google')">
|
||||
<GoogleIcon />
|
||||
<span>Google</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('steam')">
|
||||
<SteamIcon />
|
||||
<span>Steam</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('gitlab')">
|
||||
<GitLabIcon />
|
||||
<span>GitLab</span>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<h1>Or use a password</h1>
|
||||
|
||||
<section class="auth-form">
|
||||
<div class="iconified-input">
|
||||
<label for="email" hidden>Email or username</label>
|
||||
<MailIcon />
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="text"
|
||||
class="auth-form__input"
|
||||
placeholder="Email or username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="password" hidden>Password</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
class="auth-form__input"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
|
||||
<nuxt-link class="text-link" to="/auth/reset-password">Forgot password?</nuxt-link>
|
||||
</div>
|
||||
<button class="btn btn-primary continue-btn" @click="loginPassword()">
|
||||
Continue <RightArrowIcon />
|
||||
</button>
|
||||
<p>
|
||||
Don't have an account yet?
|
||||
<nuxt-link
|
||||
class="text-link"
|
||||
:to="`/auth/sign-up${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`"
|
||||
>
|
||||
Create one.
|
||||
</nuxt-link>
|
||||
</p>
|
||||
|
||||
<button class="btn btn-primary continue-btn centered-btn" @click="beginPasswordSignIn()">
|
||||
Sign in <RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<div class="auth-form__additional-options">
|
||||
<NuxtLink class="text-link" to="/auth/reset-password">Forgot password?</NuxtLink>
|
||||
<p>•</p>
|
||||
<NuxtLink class="text-link" :to="signUpLink"> Create an account</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { GitHubIcon, RightArrowIcon } from 'omorphia'
|
||||
import DiscordIcon from 'assets/images/utils/discord.svg'
|
||||
import GoogleIcon from 'assets/images/utils/google.svg'
|
||||
import SteamIcon from 'assets/images/utils/steam.svg'
|
||||
import MicrosoftIcon from 'assets/images/utils/microsoft.svg'
|
||||
import GitLabIcon from 'assets/images/utils/gitlab.svg'
|
||||
import { RightArrowIcon } from 'omorphia'
|
||||
import GitHubIcon from 'assets/icons/auth/sso-github.svg'
|
||||
import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg'
|
||||
import GoogleIcon from 'assets/icons/auth/sso-google.svg'
|
||||
import SteamIcon from 'assets/icons/auth/sso-steam.svg'
|
||||
import DiscordIcon from 'assets/icons/auth/sso-discord.svg'
|
||||
import KeyIcon from 'assets/icons/auth/key.svg'
|
||||
import MailIcon from 'assets/icons/auth/mail.svg'
|
||||
import GitLabIcon from 'assets/icons/auth/sso-gitlab.svg'
|
||||
|
||||
useHead({
|
||||
title: 'Sign In - Modrinth',
|
||||
})
|
||||
|
||||
const auth = await useAuth()
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
if (route.fullPath.includes('new_account=true')) {
|
||||
await navigateTo(
|
||||
`/auth/welcome?authToken=${route.query.code}${
|
||||
@ -88,15 +115,13 @@ if (route.fullPath.includes('new_account=true')) {
|
||||
}`
|
||||
)
|
||||
} else if (route.query.code) {
|
||||
await loginHandler()
|
||||
await finishSignIn()
|
||||
}
|
||||
|
||||
if (auth.value.user) {
|
||||
await navigateTo('/dashboard')
|
||||
}
|
||||
|
||||
const data = useNuxtApp()
|
||||
|
||||
const turnstile = ref()
|
||||
|
||||
const email = ref('')
|
||||
@ -105,7 +130,11 @@ const token = ref('')
|
||||
|
||||
const flow = ref(route.query.flow)
|
||||
|
||||
async function loginPassword() {
|
||||
const signUpLink = computed(
|
||||
() => `/auth/sign-up${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`
|
||||
)
|
||||
|
||||
async function beginPasswordSignIn() {
|
||||
startLoading()
|
||||
try {
|
||||
const res = await useBaseFetch('auth/login', {
|
||||
@ -120,10 +149,10 @@ async function loginPassword() {
|
||||
if (res.flow) {
|
||||
flow.value = res.flow
|
||||
} else {
|
||||
await loginHandler(res.session)
|
||||
await finishSignIn(res.session)
|
||||
}
|
||||
} catch (err) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data ? err.data.description : err,
|
||||
@ -135,7 +164,7 @@ async function loginPassword() {
|
||||
}
|
||||
|
||||
const twoFactorCode = ref(null)
|
||||
async function loginTwoFactor() {
|
||||
async function begin2FASignIn() {
|
||||
startLoading()
|
||||
try {
|
||||
const res = await useBaseFetch('auth/login/2fa', {
|
||||
@ -146,9 +175,9 @@ async function loginTwoFactor() {
|
||||
},
|
||||
})
|
||||
|
||||
await loginHandler(res.session)
|
||||
await finishSignIn(res.session)
|
||||
} catch (err) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data ? err.data.description : err,
|
||||
@ -158,7 +187,7 @@ async function loginTwoFactor() {
|
||||
}
|
||||
stopLoading()
|
||||
}
|
||||
async function loginHandler(token) {
|
||||
async function finishSignIn(token) {
|
||||
if (token) {
|
||||
await useAuth(token)
|
||||
await useUser()
|
||||
@ -171,25 +200,3 @@ async function loginHandler(token) {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.totp {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.totp-codes {
|
||||
justify-content: center;
|
||||
display: grid;
|
||||
gap: var(--gap-md);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.account-options {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-block-start: 0 !important;
|
||||
}
|
||||
.account-options a {
|
||||
margin-left: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,71 +1,121 @@
|
||||
<template>
|
||||
<div class="auth-page-container">
|
||||
<h1>Create your account</h1>
|
||||
<div class="third-party">
|
||||
<div>
|
||||
<h1>Sign up with</h1>
|
||||
|
||||
<section class="third-party">
|
||||
<a class="btn discord-btn" :href="getAuthUrl('discord')">
|
||||
<DiscordIcon /> <span>Discord</span>
|
||||
<DiscordIcon />
|
||||
<span>Discord</span>
|
||||
</a>
|
||||
<a class="btn github-btn" :href="getAuthUrl('github')"><GitHubIcon /> <span>GitHub</span></a>
|
||||
<a class="btn microsoft-btn" :href="getAuthUrl('microsoft')">
|
||||
<MicrosoftIcon /> <span>Microsoft</span>
|
||||
<a class="btn" :href="getAuthUrl('github')">
|
||||
<GitHubIcon />
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a class="btn google-btn" :href="getAuthUrl('google')">
|
||||
<GoogleIcon /> <span>Google</span>
|
||||
<a class="btn" :href="getAuthUrl('microsoft')">
|
||||
<MicrosoftIcon />
|
||||
<span>Microsoft</span>
|
||||
</a>
|
||||
<a class="btn apple-btn" :href="getAuthUrl('steam')"><SteamIcon /> <span>Steam</span></a>
|
||||
<a class="btn gitlab-btn" :href="getAuthUrl('gitlab')"> <GitLabIcon /> <span>GitLab</span></a>
|
||||
</div>
|
||||
<div class="text-divider">
|
||||
<div></div>
|
||||
<span>or</span>
|
||||
<div></div>
|
||||
</div>
|
||||
<label for="email" hidden>Email</label>
|
||||
<input id="email" v-model="email" type="text" placeholder="Email" />
|
||||
<label for="username" hidden>Username</label>
|
||||
<input id="username" v-model="username" type="text" placeholder="Username" />
|
||||
<label for="password" hidden>Password</label>
|
||||
<input id="password" v-model="password" type="password" placeholder="Password" />
|
||||
<label for="confirm-password" hidden>Password</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmPassword"
|
||||
type="password"
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
<Checkbox
|
||||
v-model="subscribe"
|
||||
class="subscribe-btn"
|
||||
label="Subscribe to updates about Modrinth"
|
||||
/>
|
||||
<p>
|
||||
By creating an account, you agree to Modrinth's
|
||||
<nuxt-link to="/legal/terms" class="text-link">terms</nuxt-link> and
|
||||
<nuxt-link to="/legal/privacy" class="text-link">privacy policy</nuxt-link>.
|
||||
</p>
|
||||
<button class="btn btn-primary continue-btn" @click="createAccount">
|
||||
Create account <RightArrowIcon />
|
||||
</button>
|
||||
<p>
|
||||
Already have an account?
|
||||
<nuxt-link
|
||||
class="text-link"
|
||||
:to="`/auth/sign-in${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`"
|
||||
>
|
||||
Sign in.
|
||||
</nuxt-link>
|
||||
<a class="btn" :href="getAuthUrl('google')">
|
||||
<GoogleIcon />
|
||||
<span>Google</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('steam')">
|
||||
<SteamIcon />
|
||||
<span>Steam</span>
|
||||
</a>
|
||||
<a class="btn" :href="getAuthUrl('gitlab')">
|
||||
<GitLabIcon />
|
||||
<span>GitLab</span>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<h1>Or create an account yourself</h1>
|
||||
|
||||
<section class="auth-form">
|
||||
<div class="iconified-input">
|
||||
<label for="email" hidden>Email</label>
|
||||
<MailIcon />
|
||||
<input
|
||||
id="email"
|
||||
v-model="email"
|
||||
type="text"
|
||||
class="auth-form__input"
|
||||
placeholder="Email"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="username" hidden>Username</label>
|
||||
<UserIcon />
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
type="text"
|
||||
class="auth-form__input"
|
||||
placeholder="Username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="password" hidden>Password</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
class="auth-form__input"
|
||||
type="password"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="iconified-input">
|
||||
<label for="confirm-password" hidden>Password</label>
|
||||
<KeyIcon />
|
||||
<input
|
||||
id="confirm-password"
|
||||
v-model="confirmPassword"
|
||||
type="password"
|
||||
class="auth-form__input"
|
||||
placeholder="Confirm password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<NuxtTurnstile ref="turnstile" v-model="token" class="turnstile" />
|
||||
</p>
|
||||
|
||||
<Checkbox
|
||||
v-model="subscribe"
|
||||
class="subscribe-btn"
|
||||
label="Subscribe to updates about Modrinth"
|
||||
/>
|
||||
|
||||
<p>
|
||||
By creating an account, you agree to Modrinth's
|
||||
<NuxtLink to="/legal/terms" class="text-link">Terms</NuxtLink> and
|
||||
<NuxtLink to="/legal/privacy" class="text-link">Privacy Policy</NuxtLink>.
|
||||
</p>
|
||||
|
||||
<button class="btn btn-primary continue-btn centered-btn" @click="createAccount">
|
||||
Create account <RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<div class="auth-form__additional-options">
|
||||
Already have an account?
|
||||
<NuxtLink class="text-link" :to="signInLink">Sign in</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { GitHubIcon, RightArrowIcon, Checkbox } from 'omorphia'
|
||||
import DiscordIcon from 'assets/images/utils/discord.svg'
|
||||
import GoogleIcon from 'assets/images/utils/google.svg'
|
||||
import SteamIcon from 'assets/images/utils/steam.svg'
|
||||
import MicrosoftIcon from 'assets/images/utils/microsoft.svg'
|
||||
import GitLabIcon from 'assets/images/utils/gitlab.svg'
|
||||
import { RightArrowIcon, UserIcon, Checkbox } from 'omorphia'
|
||||
import GitHubIcon from 'assets/icons/auth/sso-github.svg'
|
||||
import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg'
|
||||
import GoogleIcon from 'assets/icons/auth/sso-google.svg'
|
||||
import SteamIcon from 'assets/icons/auth/sso-steam.svg'
|
||||
import DiscordIcon from 'assets/icons/auth/sso-discord.svg'
|
||||
import KeyIcon from 'assets/icons/auth/key.svg'
|
||||
import MailIcon from 'assets/icons/auth/mail.svg'
|
||||
import GitLabIcon from 'assets/icons/auth/sso-gitlab.svg'
|
||||
|
||||
useHead({
|
||||
title: 'Sign Up - Modrinth',
|
||||
@ -86,8 +136,6 @@ if (auth.value.user) {
|
||||
await navigateTo('/dashboard')
|
||||
}
|
||||
|
||||
const data = useNuxtApp()
|
||||
|
||||
const turnstile = ref()
|
||||
|
||||
const email = ref('')
|
||||
@ -97,11 +145,15 @@ const confirmPassword = ref('')
|
||||
const token = ref('')
|
||||
const subscribe = ref(true)
|
||||
|
||||
const signInLink = computed(
|
||||
() => `/auth/sign-in${route.query.redirect ? `?redirect=${route.query.redirect}` : ''}`
|
||||
)
|
||||
|
||||
async function createAccount() {
|
||||
startLoading()
|
||||
try {
|
||||
if (confirmPassword.value !== password.value) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: 'Passwords do not match!',
|
||||
@ -130,7 +182,7 @@ async function createAccount() {
|
||||
await navigateTo('/dashboard')
|
||||
}
|
||||
} catch (err) {
|
||||
data.$notify({
|
||||
addNotification({
|
||||
group: 'main',
|
||||
title: 'An error occurred',
|
||||
text: err.data ? err.data.description : err,
|
||||
@ -141,8 +193,3 @@ async function createAccount() {
|
||||
stopLoading()
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.subscribe-btn {
|
||||
margin-block-start: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,39 +1,52 @@
|
||||
<template>
|
||||
<div class="auth-page-container">
|
||||
<div>
|
||||
<template v-if="auth.user && auth.user.email_verified && !success">
|
||||
<h1>Email already verified</h1>
|
||||
<p>Your email is already verified!</p>
|
||||
<nuxt-link class="btn" link="/settings/account">
|
||||
<SettingsIcon /> Account settings
|
||||
</nuxt-link>
|
||||
|
||||
<section class="auth-form">
|
||||
<p>Your email is already verified!</p>
|
||||
|
||||
<NuxtLink class="btn" to="/settings/account"> <SettingsIcon /> Account settings </NuxtLink>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template v-else-if="success">
|
||||
<h1>Email verification</h1>
|
||||
<p>Your email address has been successfully verified!</p>
|
||||
<nuxt-link v-if="auth.user" class="btn" to="/settings/account">
|
||||
<SettingsIcon /> Account settings
|
||||
</nuxt-link>
|
||||
<nuxt-link v-else to="/auth/sign-in" class="btn btn-primary continue-btn">
|
||||
Sign in <RightArrowIcon />
|
||||
</nuxt-link>
|
||||
|
||||
<section class="auth-form">
|
||||
<p>Your email address has been successfully verified!</p>
|
||||
|
||||
<NuxtLink v-if="auth.user" class="btn" link="/settings/account">
|
||||
<SettingsIcon /> Account settings
|
||||
</NuxtLink>
|
||||
<NuxtLink v-else to="/auth/sign-in" class="btn btn-primary continue-btn centered-btn">
|
||||
Sign in <RightArrowIcon />
|
||||
</NuxtLink>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<h1>Email verification failed</h1>
|
||||
<p>
|
||||
We were unable to verify your email.
|
||||
<template v-if="auth.user">
|
||||
Try re-sending the verification email through the button below.
|
||||
</template>
|
||||
<template v-else>
|
||||
Try re-sending the verification email through your dashboard by signing in.
|
||||
</template>
|
||||
</p>
|
||||
<button v-if="auth.user" class="btn btn-primary continue-btn" @click="resendVerifyEmail">
|
||||
Resend verification email <RightArrowIcon />
|
||||
</button>
|
||||
<nuxt-link v-else to="/auth/sign-in" class="btn btn-primary continue-btn">
|
||||
Sign in <RightArrowIcon />
|
||||
</nuxt-link>
|
||||
|
||||
<section class="auth-form">
|
||||
<p>
|
||||
We were unable to verify your email.
|
||||
<template v-if="auth.user">
|
||||
Try re-sending the verification email through the button below.
|
||||
</template>
|
||||
<template v-else>
|
||||
Try re-sending the verification email through your dashboard by signing in.
|
||||
</template>
|
||||
</p>
|
||||
|
||||
<button v-if="auth.user" class="btn btn-primary continue-btn" @click="resendVerifyEmail">
|
||||
Resend verification email <RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<NuxtLink v-else to="/auth/sign-in" class="btn btn-primary continue-btn centered-btn">
|
||||
Sign in <RightArrowIcon />
|
||||
</NuxtLink>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,25 +1,33 @@
|
||||
<template>
|
||||
<div class="auth-page-container">
|
||||
<div>
|
||||
<h1>Welcome to Modrinth!</h1>
|
||||
<p>
|
||||
Thank you for creating an account. You can now follow and create projects, receive updates
|
||||
about your favorite projects, and more!
|
||||
</p>
|
||||
<Checkbox
|
||||
v-model="subscribe"
|
||||
class="subscribe-btn"
|
||||
label="Subscribe to updates about Modrinth"
|
||||
/>
|
||||
<button class="btn btn-primary continue-btn" @click="continueSignUp">Continue</button>
|
||||
<p>
|
||||
By creating an account, you agree to Modrinth's
|
||||
<nuxt-link to="/legal/terms" class="text-link">terms</nuxt-link> and
|
||||
<nuxt-link to="/legal/privacy" class="text-link">privacy policy</nuxt-link>.
|
||||
</p>
|
||||
|
||||
<section class="auth-form">
|
||||
<p>
|
||||
Thank you for creating an account. You can now follow and create projects, receive updates
|
||||
about your favorite projects, and more!
|
||||
</p>
|
||||
|
||||
<Checkbox
|
||||
v-model="subscribe"
|
||||
class="subscribe-btn"
|
||||
label="Subscribe to updates about Modrinth"
|
||||
/>
|
||||
|
||||
<button class="btn btn-primary continue-btn centered-btn" @click="continueSignUp">
|
||||
Continue <RightArrowIcon />
|
||||
</button>
|
||||
|
||||
<p>
|
||||
By creating an account, you have agreed to Modrinth's
|
||||
<NuxtLink to="/legal/terms" class="text-link">Terms</NuxtLink> and
|
||||
<NuxtLink to="/legal/privacy" class="text-link">Privacy Policy</NuxtLink>.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Checkbox } from 'omorphia'
|
||||
import { Checkbox, RightArrowIcon } from 'omorphia'
|
||||
|
||||
useHead({
|
||||
title: 'Welcome - Modrinth',
|
||||
|
||||
@ -381,16 +381,16 @@ import {
|
||||
LeftArrowIcon,
|
||||
RightArrowIcon,
|
||||
CheckIcon,
|
||||
GitHubIcon,
|
||||
ExternalIcon,
|
||||
} from 'omorphia'
|
||||
import QrcodeVue from 'qrcode.vue'
|
||||
import DiscordIcon from 'assets/images/utils/discord.svg'
|
||||
import GoogleIcon from 'assets/images/utils/google.svg'
|
||||
import SteamIcon from 'assets/images/utils/steam.svg'
|
||||
import MicrosoftIcon from 'assets/images/utils/microsoft.svg'
|
||||
import GitLabIcon from 'assets/images/utils/gitlab.svg'
|
||||
import KeyIcon from '~/assets/images/utils/key.svg'
|
||||
import GitHubIcon from 'assets/icons/auth/sso-github.svg'
|
||||
import MicrosoftIcon from 'assets/icons/auth/sso-microsoft.svg'
|
||||
import GoogleIcon from 'assets/icons/auth/sso-google.svg'
|
||||
import SteamIcon from 'assets/icons/auth/sso-steam.svg'
|
||||
import DiscordIcon from 'assets/icons/auth/sso-discord.svg'
|
||||
import KeyIcon from 'assets/icons/auth/key.svg'
|
||||
import GitLabIcon from 'assets/icons/auth/sso-gitlab.svg'
|
||||
import ModalConfirm from '~/components/ui/ModalConfirm.vue'
|
||||
import Modal from '~/components/ui/Modal.vue'
|
||||
|
||||
|
||||
1411
pnpm-lock.yaml
generated
1411
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user