Skip to content

Commit 76f585e

Browse files
sjschlapbachsjschlapbach
committed
enhance: add option to enable / disable demo question seeding on first login dialogue
1 parent 696a43a commit 76f585e

15 files changed

Lines changed: 96 additions & 33 deletions

File tree

‎apps/frontend-manage/src/components/user/ShortnameSetting.tsx‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -96,13 +96,8 @@ function ShortnameSetting({ user }: ShortnameSettingProps) {
9696
</Tooltip>
9797
)}
9898
<DebouncedUsernameField
99-
t={t}
100-
className={{
101-
root: 'w-36',
102-
label: 'hidden',
103-
input: 'h-9 bg-white',
104-
icon: 'bg-transparent',
105-
}}
99+
required
100+
hideError
106101
name="shortname"
107102
labelType="large"
108103
valid={isShortnameAvailable}
@@ -119,9 +114,13 @@ function ShortnameSetting({ user }: ShortnameSettingProps) {
119114
return result?.checkShortnameAvailable ?? false
120115
}}
121116
unavailableMessage={t('shared.generic.usernameAvailability')}
117+
className={{
118+
root: 'w-36',
119+
label: 'hidden',
120+
input: 'h-9 bg-white',
121+
icon: 'bg-transparent',
122+
}}
122123
data={{ cy: 'shortname-update-field' }}
123-
required
124-
hideError
125124
/>
126125
<Button
127126
primary

‎apps/frontend-manage/src/components/user/SuspendedFirstLoginModal.tsx‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,11 @@ import DebouncedUsernameField from '@klicker-uzh/shared-components/src/Debounced
99
import { useEffect, useState } from 'react'
1010
import * as Yup from 'yup'
1111

12+
import {
13+
faBook,
14+
faListCheck,
15+
faPeopleGroup,
16+
} from '@fortawesome/free-solid-svg-icons'
1217
import Loader from '@klicker-uzh/shared-components/src/Loader'
1318
import {
1419
Button,
@@ -58,11 +63,19 @@ function SuspendedFirstLoginModal() {
5863
<H1 className={{ root: 'mb-4 text-4xl' }}>
5964
{t('manage.firstLogin.welcome')}
6065
</H1>
61-
<div className="prose mb-2 max-w-none">
66+
<div className="mb-3 max-w-none">
6267
{t('manage.firstLogin.makeFirstSettings')}
6368
</div>
6469
{data.userProfile ? (
6570
<Formik
71+
isInitialValid={false}
72+
validateOnMount
73+
initialTouched={{
74+
shortname: false,
75+
locale: false,
76+
sendProjectUpdates: false,
77+
seedDemoElements: true,
78+
}}
6679
validationSchema={Yup.object().shape({
6780
shortname: Yup.string()
6881
.required(t('manage.settings.shortnameRequired'))
@@ -72,11 +85,15 @@ function SuspendedFirstLoginModal() {
7285
/^[a-zA-Z0-9]*$/,
7386
t('manage.settings.shortnameAlphanumeric')
7487
),
88+
seedDemoElements: Yup.boolean().required(
89+
t('manage.firstLogin.seedDemoElementsDecisionRequired')
90+
),
7591
})}
7692
initialValues={{
7793
shortname: data.userProfile.shortname,
7894
locale: data.userProfile.locale,
7995
sendProjectUpdates: data.userProfile.sendProjectUpdates,
96+
seedDemoElements: undefined,
8097
}}
8198
onSubmit={async (values, { setSubmitting, setErrors }) => {
8299
setShowGenericError(false)
@@ -89,6 +106,7 @@ function SuspendedFirstLoginModal() {
89106
shortname: trimmedUsername,
90107
locale: values.locale,
91108
sendUpdates: values.sendProjectUpdates,
109+
seedDemoElements: values.seedDemoElements ?? false,
92110
},
93111
refetchQueries: [{ query: GetUserElementsDocument }],
94112
})
@@ -112,12 +130,7 @@ function SuspendedFirstLoginModal() {
112130
<Form className="flex flex-col">
113131
<div className="mb-1 flex flex-col space-y-4 md:mb-5 md:flex-row md:justify-between md:space-y-0">
114132
<DebouncedUsernameField
115-
t={t}
116-
className={{
117-
root: 'w-[250px] md:w-max',
118-
input: 'bg-white !pl-8',
119-
icon: 'bg-transparent',
120-
}}
133+
required
121134
name="shortname"
122135
label={t('shared.generic.shortname')}
123136
labelType="large"
@@ -135,8 +148,12 @@ function SuspendedFirstLoginModal() {
135148
return result?.checkShortnameAvailable ?? false
136149
}}
137150
unavailableMessage={t('shared.generic.usernameAvailability')}
151+
className={{
152+
root: 'w-[250px] md:w-max',
153+
input: 'bg-white !pl-8',
154+
icon: 'bg-transparent',
155+
}}
138156
data={{ cy: 'first-login-shortname' }}
139-
required
140157
/>
141158
<FormikSelectField
142159
label={t('shared.generic.language')}
@@ -166,37 +183,48 @@ function SuspendedFirstLoginModal() {
166183
</UserNotification>
167184
)}
168185

169-
<div className="prose mb-2 max-w-none">
170-
{t('manage.firstLogin.relevantLinks')}
186+
<div className="mb-1.5">
187+
{t('manage.firstLogin.seedDemoElementsExplanation')}
171188
</div>
189+
<FormikSwitchField
190+
name="seedDemoElements"
191+
labelLeft
192+
label={t('manage.firstLogin.seedDemoElements')}
193+
className={{ root: 'mb-5' }}
194+
/>
172195

173-
<div className="mb-4 grid grid-cols-3 gap-4">
196+
<div className="mb-1.5 max-w-none">
197+
{t('manage.firstLogin.relevantLinks')}
198+
</div>
199+
<div className="mb-5 grid grid-cols-3 gap-4">
174200
<Link
175201
href="https://www.klicker.uzh.ch/getting_started/welcome"
176202
target="_blank"
177203
>
178204
<Button data={{ cy: 'first-login-documentation' }} fluid>
205+
<Button.Icon icon={faBook} />
179206
<Button.Label>
180207
{t('shared.generic.documentation')}
181208
</Button.Label>
182209
</Button>
183210
</Link>
184211
<Link href="https://community.klicker.uzh.ch" target="_blank">
185212
<Button data={{ cy: 'first-login-community' }} fluid>
213+
<Button.Icon icon={faPeopleGroup} />
186214
<Button.Label>{t('shared.generic.community')}</Button.Label>
187215
</Button>
188216
</Link>
189217
<Link href="https://klicker-uzh.feedbear.com" target="_blank">
190218
<Button data={{ cy: 'first-login-roadmap' }} fluid>
219+
<Button.Icon icon={faListCheck} />
191220
<Button.Label>{t('shared.generic.roadmap')}</Button.Label>
192221
</Button>
193222
</Link>
194223
</div>
195224

196-
<div className="prose mb-6 max-w-none">
225+
<div className="mb-2 max-w-none">
197226
{t('manage.firstLogin.watchVideo')}
198227
</div>
199-
200228
<iframe
201229
id="kmsembed-0_ugtkafd3"
202230
width="100%"

‎apps/frontend-pwa/src/components/forms/CreateAccountForm.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,7 +155,6 @@ function CreateAccountForm({
155155
/>
156156
<DebouncedUsernameField
157157
required
158-
t={t}
159158
name="username"
160159
label={t('shared.generic.username')}
161160
valid={isUsernameAvailable}

‎apps/frontend-pwa/src/components/forms/UpdateAccountInfoForm.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,6 @@ function UpdateAccountInfoForm({
147147
data={{ cy: 'update-account-email' }}
148148
/>
149149
<DebouncedUsernameField
150-
t={t}
151150
name="username"
152151
label={t('shared.generic.username')}
153152
valid={isUsernameAvailable}

‎packages/graphql/src/graphql/ops/MChangeInitialSettings.graphql‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@ mutation ChangeInitialSettings(
22
$shortname: String!
33
$locale: LocaleType!
44
$sendUpdates: Boolean!
5+
$seedDemoElements: Boolean!
56
) {
67
changeInitialSettings(
78
shortname: $shortname
89
locale: $locale
910
sendUpdates: $sendUpdates
11+
seedDemoElements: $seedDemoElements
1012
) {
1113
id
1214
email

‎packages/graphql/src/ops.schema.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18024,6 +18024,22 @@
1802418024
"isDeprecated": false,
1802518025
"deprecationReason": null
1802618026
},
18027+
{
18028+
"name": "seedDemoElements",
18029+
"description": null,
18030+
"type": {
18031+
"kind": "NON_NULL",
18032+
"name": null,
18033+
"ofType": {
18034+
"kind": "SCALAR",
18035+
"name": "Boolean",
18036+
"ofType": null
18037+
}
18038+
},
18039+
"defaultValue": null,
18040+
"isDeprecated": false,
18041+
"deprecationReason": null
18042+
},
1802718043
{
1802818044
"name": "sendUpdates",
1802918045
"description": null,

0 commit comments

Comments
 (0)