Skip to content

Commit 7c4b4d9

Browse files
tdgaotdgao
committed
update auth with new designs
1 parent f9004dc commit 7c4b4d9

4 files changed

Lines changed: 206 additions & 154 deletions

File tree

‎apps/frontend/src/locales/en-US/index.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -267,10 +267,10 @@
267267
"message": "Enter code..."
268268
},
269269
"auth.sign-in.additional-options": {
270-
"message": "<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>"
270+
"message": "<forgot-password-link>Forgot password</forgot-password-link> • Don't have an account? <create-account-link>Sign up</create-account-link>"
271271
},
272272
"auth.sign-in.sign-in-with": {
273-
"message": "Sign in with"
273+
"message": "Sign into Modrinth"
274274
},
275275
"auth.sign-in.title": {
276276
"message": "Sign In"

‎apps/frontend/src/pages/auth.vue‎

Lines changed: 3 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ useSeoMeta({
88
})
99
</script>
1010
<template>
11-
<NuxtPage class="auth-container universal-card" />
11+
<NuxtPage class="auth-container universal-card border border-solid border-surface-5" />
1212
</template>
1313

1414
<style>
1515
.auth-container {
16-
width: 26rem;
16+
width: 28rem;
1717
max-width: calc(100% - 2rem);
1818
margin: 1rem auto;
1919
display: flex;
@@ -45,24 +45,6 @@ useSeoMeta({
4545
margin: 0 0 0 0.5rem;
4646
}
4747
48-
.third-party {
49-
display: grid;
50-
gap: var(--gap-md);
51-
grid-template-columns: repeat(2, 1fr);
52-
width: 100%;
53-
}
54-
55-
.third-party .btn {
56-
width: 100%;
57-
vertical-align: middle;
58-
}
59-
60-
.third-party .btn svg {
61-
margin-right: var(--gap-sm);
62-
width: 1.25rem;
63-
height: 1.25rem;
64-
}
65-
6648
@media screen and (max-width: 25.5rem) {
6749
.third-party .btn {
6850
grid-column: 1 / 3;
@@ -84,7 +66,7 @@ useSeoMeta({
8466
align-items: center;
8567
display: flex;
8668
justify-content: center;
87-
gap: var(--gap-md);
69+
gap: var(--gap-xs);
8870
flex-wrap: wrap;
8971
}
9072

‎apps/frontend/src/pages/auth/sign-in.vue‎

Lines changed: 119 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
class="fixed left-0 top-0 z-[9999] m-0 h-full w-full border-0 p-0"
66
></iframe>
77
</div>
8-
<div v-else>
8+
<div v-else c>
99
<template v-if="flow && !subtleLauncherRedirectUri">
1010
<label for="two-factor-code">
1111
<span class="label__title">{{ formatMessage(messages.twoFactorCodeLabel) }}</span>
@@ -28,98 +28,120 @@
2828
</button>
2929
</template>
3030
<template v-else>
31-
<h1>{{ formatMessage(messages.signInWithLabel) }}</h1>
31+
<div class="flex flex-col gap-6">
32+
<div class="text-center text-2xl font-semibold text-contrast">
33+
{{ formatMessage(messages.signInWithLabel) }}
34+
</div>
3235

33-
<section class="third-party">
34-
<a class="btn" :href="getAuthUrl('discord', redirectTarget)">
35-
<DiscordColorIcon />
36-
<span>Discord</span>
37-
</a>
38-
<a class="btn" :href="getAuthUrl('github', redirectTarget)">
39-
<GitHubColorIcon />
40-
<span>GitHub</span>
41-
</a>
42-
<a class="btn" :href="getAuthUrl('microsoft', redirectTarget)">
43-
<MicrosoftColorIcon />
44-
<span>Microsoft</span>
45-
</a>
46-
<a class="btn" :href="getAuthUrl('google', redirectTarget)">
47-
<GoogleColorIcon />
48-
<span>Google</span>
49-
</a>
50-
<a class="btn" :href="getAuthUrl('steam', redirectTarget)">
51-
<SteamColorIcon />
52-
<span>Steam</span>
53-
</a>
54-
<a class="btn" :href="getAuthUrl('gitlab', redirectTarget)">
55-
<GitLabColorIcon />
56-
<span>GitLab</span>
57-
</a>
58-
</section>
36+
<section class="flex flex-col gap-2.5">
37+
<ButtonStyled>
38+
<a class="!shadow-none" :href="getAuthUrl('google', redirectTarget)">
39+
<GoogleColorIcon />
40+
<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'Google' }) }}</span>
41+
</a>
42+
</ButtonStyled>
43+
<ButtonStyled>
44+
<a class="!shadow-none" :href="getAuthUrl('microsoft', redirectTarget)">
45+
<MicrosoftColorIcon />
46+
<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'Microsoft' }) }}</span>
47+
</a>
48+
</ButtonStyled>
49+
<ButtonStyled>
50+
<a class="!shadow-none" :href="getAuthUrl('discord', redirectTarget)">
51+
<DiscordColorIcon />
52+
<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'Discord' }) }}</span>
53+
</a>
54+
</ButtonStyled>
55+
<ButtonStyled>
56+
<a class="!shadow-none" :href="getAuthUrl('github', redirectTarget)">
57+
<GitHubColorIcon />
58+
<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'GitHub' }) }}</span>
59+
</a>
60+
</ButtonStyled>
61+
<ButtonStyled>
62+
<a class="!shadow-none" :href="getAuthUrl('gitlab', redirectTarget)">
63+
<GitLabColorIcon />
64+
<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'GitLab' }) }}</span>
65+
</a>
66+
</ButtonStyled>
67+
<ButtonStyled>
68+
<a class="!shadow-none" :href="getAuthUrl('steam', redirectTarget)">
69+
<SteamColorIcon />
70+
<span class="ml-1">{{ formatMessage(messages.continueWithProvider, { provider: 'Steam' }) }}</span>
71+
</a>
72+
</ButtonStyled>
73+
</section>
5974

60-
<h1>{{ formatMessage(messages.usePasswordLabel) }}</h1>
75+
<div class="h-px w-full bg-surface-5"></div>
6176

62-
<section class="auth-form">
63-
<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
64-
<StyledInput
65-
id="email"
66-
v-model="email"
67-
:icon="MailIcon"
68-
type="text"
69-
inputmode="email"
70-
autocomplete="username"
71-
:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
72-
wrapper-class="w-full"
73-
/>
77+
<section class="auth-form">
78+
<label for="email" hidden>{{ formatMessage(commonMessages.emailUsernameLabel) }}</label>
79+
<StyledInput
80+
id="email"
81+
v-model="email"
82+
:icon="MailIcon"
83+
type="text"
84+
inputmode="email"
85+
autocomplete="username"
86+
:placeholder="formatMessage(commonMessages.emailUsernameLabel)"
87+
wrapper-class="w-full"
88+
/>
7489

75-
<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
76-
<StyledInput
77-
id="password"
78-
v-model="password"
79-
:icon="KeyIcon"
80-
type="password"
81-
autocomplete="current-password"
82-
:placeholder="formatMessage(commonMessages.passwordLabel)"
83-
wrapper-class="w-full"
84-
/>
90+
<label for="password" hidden>{{ formatMessage(commonMessages.passwordLabel) }}</label>
91+
<StyledInput
92+
id="password"
93+
v-model="password"
94+
:icon="KeyIcon"
95+
type="password"
96+
autocomplete="current-password"
97+
:placeholder="formatMessage(commonMessages.passwordLabel)"
98+
wrapper-class="w-full"
99+
/>
85100

86-
<HCaptcha v-if="globals?.captcha_enabled" ref="captcha" v-model="token" />
101+
<HCaptcha
102+
v-if="globals?.captcha_enabled && email && password"
103+
ref="captcha"
104+
v-model="token"
105+
/>
87106

88-
<button
89-
class="btn btn-primary continue-btn centered-btn"
90-
:disabled="globals?.captcha_enabled ? !token : false"
91-
@click="beginPasswordSignIn()"
92-
>
93-
{{ formatMessage(commonMessages.signInButton) }} <RightArrowIcon />
94-
</button>
107+
<ButtonStyled color="brand">
108+
<button
109+
class="!w-full"
110+
:disabled="globals?.captcha_enabled ? !token : false"
111+
@click="beginPasswordSignIn()"
112+
>
113+
{{ formatMessage(messages.continueWithEmail) }} <RightArrowIcon />
114+
</button>
115+
</ButtonStyled>
95116

96-
<div class="auth-form__additional-options">
97-
<IntlFormatted :message-id="messages.additionalOptionsLabel">
98-
<template #forgot-password-link="{ children }">
99-
<NuxtLink
100-
class="text-link"
101-
:to="{
102-
path: '/auth/reset-password',
103-
query: route.query,
104-
}"
105-
>
106-
<component :is="() => children" />
107-
</NuxtLink>
108-
</template>
109-
<template #create-account-link="{ children }">
110-
<NuxtLink
111-
class="text-link"
112-
:to="{
113-
path: '/auth/sign-up',
114-
query: route.query,
115-
}"
116-
>
117-
<component :is="() => children" />
118-
</NuxtLink>
119-
</template>
120-
</IntlFormatted>
121-
</div>
122-
</section>
117+
<div class="auth-form__additional-options !text-base">
118+
<IntlFormatted :message-id="messages.additionalOptionsLabel">
119+
<template #forgot-password-link="{ children }">
120+
<NuxtLink
121+
class="text-link"
122+
:to="{
123+
path: '/auth/reset-password',
124+
query: route.query,
125+
}"
126+
>
127+
<component :is="() => children" />
128+
</NuxtLink>
129+
</template>
130+
<template #create-account-link="{ children }">
131+
<NuxtLink
132+
class="inline text-link"
133+
:to="{
134+
path: '/auth/sign-up',
135+
query: route.query,
136+
}"
137+
>
138+
<component :is="() => children" />
139+
</NuxtLink>
140+
</template>
141+
</IntlFormatted>
142+
</div>
143+
</section>
144+
</div>
123145
</template>
124146
</div>
125147
</template>
@@ -137,6 +159,7 @@ import {
137159
SteamColorIcon,
138160
} from '@modrinth/assets'
139161
import {
162+
ButtonStyled,
140163
commonMessages,
141164
defineMessages,
142165
injectModrinthClient,
@@ -159,11 +182,11 @@ const messages = defineMessages({
159182
additionalOptionsLabel: {
160183
id: 'auth.sign-in.additional-options',
161184
defaultMessage:
162-
'<forgot-password-link>Forgot password?</forgot-password-link> • <create-account-link>Create an account</create-account-link>',
185+
"<forgot-password-link>Forgot password</forgot-password-link> • Don't have an account? <create-account-link>Sign up</create-account-link>",
163186
},
164187
signInWithLabel: {
165188
id: 'auth.sign-in.sign-in-with',
166-
defaultMessage: 'Sign in with',
189+
defaultMessage: 'Sign into Modrinth',
167190
},
168191
signInTitle: {
169192
id: 'auth.sign-in.title',
@@ -185,6 +208,14 @@ const messages = defineMessages({
185208
id: 'auth.sign-in.use-password',
186209
defaultMessage: 'Or use a password',
187210
},
211+
continueWithProvider: {
212+
id: 'auth.continue-with-provider',
213+
defaultMessage: 'Continue with {provider}',
214+
},
215+
continueWithEmail: {
216+
id: 'auth.sign-in.continue-with-email',
217+
defaultMessage: 'Continue with Email',
218+
},
188219
})
189220
190221
useHead({

0 commit comments

Comments
 (0)