1
1
<script setup>
2
- import { Modal , XIcon } from ' omorphia'
2
+ import { Modal , XIcon , IssuesIcon , LogInIcon } from ' omorphia'
3
3
import { ChatIcon } from ' @/assets/icons'
4
4
import { ref } from ' vue'
5
+ import { login as login_flow , set_default_user } from ' @/helpers/auth.js'
6
+ import { handleError } from ' @/store/notifications.js'
7
+ import mixpanel from ' mixpanel-browser'
8
+ import { handleSevereError } from ' @/store/error.js'
5
9
6
10
const errorModal = ref ()
7
11
const error = ref ()
@@ -25,6 +29,10 @@ defineExpose({
25
29
if (errorVal .message .includes (' because the target machine actively refused it' )) {
26
30
metadata .value .hostsFile = true
27
31
}
32
+ } else if (errorVal .message && errorVal .message .includes (' User is not logged in' )) {
33
+ title .value = ' Sign in to Minecraft'
34
+ errorType .value = ' minecraft_sign_in'
35
+ supportLink .value = ' https://support.modrinth.com'
28
36
} else {
29
37
title .value = ' An error occurred'
30
38
errorType .value = ' unknown'
@@ -36,6 +44,25 @@ defineExpose({
36
44
errorModal .value .show ()
37
45
},
38
46
})
47
+
48
+ const loadingMinecraft = ref (false )
49
+ async function loginMinecraft () {
50
+ try {
51
+ loadingMinecraft .value = true
52
+ const loggedIn = await login_flow ()
53
+
54
+ if (loggedIn) {
55
+ await set_default_user (loggedIn .id ).catch (handleError)
56
+ }
57
+
58
+ await mixpanel .track (' AccountLogIn' )
59
+ loadingMinecraft .value = false
60
+ errorModal .value .hide ()
61
+ } catch (err) {
62
+ loadingMinecraft .value = false
63
+ handleSevereError (err)
64
+ }
65
+ }
39
66
</script >
40
67
41
68
<template >
@@ -90,7 +117,11 @@ defineExpose({
90
117
Once you're done, come back here and sign in!
91
118
</p >
92
119
</template >
93
-
120
+ <div class =" cta-button" >
121
+ <button class =" btn btn-primary" :disabled =" loadingMinecraft" @click =" loginMinecraft" >
122
+ <LogInIcon /> Sign in to Minecraft
123
+ </button >
124
+ </div >
94
125
<hr />
95
126
<p >
96
127
If nothing is working and you need help, visit
@@ -103,19 +134,86 @@ defineExpose({
103
134
{{ error.message ?? error }}
104
135
</details >
105
136
</template >
137
+ <div v-else-if =" errorType === 'minecraft_sign_in'" >
138
+ <div class =" warning-banner" >
139
+ <div class =" warning-banner__title" >
140
+ <IssuesIcon />
141
+ <span >Installed the app before April 23rd, 2024?</span >
142
+ </div >
143
+ <div class =" warning-banner__description" >
144
+ Modrinth has updated our sign-in workflow to allow for better stability, security, and
145
+ performance. You must sign in again so your credentials can be upgraded to this new
146
+ flow.
147
+ </div >
148
+ </div >
149
+ <p >
150
+ To play this instance, you must sign in through Microsoft below. If you don't have a
151
+ Minecraft account, you can purchase the game on the
152
+ <a href =" https://www.minecraft.net/en-us/store/minecraft-java-bedrock-edition-pc"
153
+ >Minecraft website</a
154
+ >.
155
+ </p >
156
+ <div class =" cta-button" >
157
+ <button class =" btn btn-primary" :disabled =" loadingMinecraft" @click =" loginMinecraft" >
158
+ <LogInIcon /> Sign in to Minecraft
159
+ </button >
160
+ </div >
161
+ </div >
106
162
<template v-else >
107
163
{{ error.message ?? error }}
108
164
</template >
109
165
</div >
110
166
<div class =" input-group push-right" >
111
167
<a :href =" supportLink" class =" btn" @click =" errorModal.hide()" ><ChatIcon /> Get support</a >
112
- <button class =" btn btn-primary " @click =" errorModal.hide()" ><XIcon /> Close</button >
168
+ <button class =" btn" @click =" errorModal.hide()" ><XIcon /> Close</button >
113
169
</div >
114
170
</div >
115
171
</Modal >
116
172
</template >
117
173
174
+ <style >
175
+ .light-mode {
176
+ --color-orange-bg : rgba (255 , 163 , 71 , 0.2 );
177
+ }
178
+
179
+ .dark-mode ,
180
+ .oled-mode {
181
+ --color-orange-bg : rgba (224 , 131 , 37 , 0.2 );
182
+ }
183
+ </style >
184
+
118
185
<style scoped lang="scss">
186
+ .cta-button {
187
+ display : flex ;
188
+ align-items : center ;
189
+ justify-content : center ;
190
+ padding : 0.5rem ;
191
+ }
192
+
193
+ .warning-banner {
194
+ display : flex ;
195
+ flex-direction : column ;
196
+ gap : 0.5rem ;
197
+ padding : var (--gap-lg );
198
+ background-color : var (--color-orange-bg );
199
+ border : 2px solid var (--color-orange );
200
+ border-radius : var (--radius-md );
201
+ margin-bottom : 1rem ;
202
+ }
203
+
204
+ .warning-banner__title {
205
+ display : flex ;
206
+ align-items : center ;
207
+ gap : 0.5rem ;
208
+ font-weight : 700 ;
209
+
210
+ svg {
211
+ color : var (--color-orange );
212
+ height : 1.5rem ;
213
+ width : 1.5rem ;
214
+ }
215
+ }
216
+
119
217
.modal-body {
120
218
display : flex ;
121
219
flex-direction : column ;
0 commit comments