Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit7ded123

Browse files
committed
frontend changes
1 parentc44a479 commit7ded123

File tree

4 files changed

+69
-24
lines changed

4 files changed

+69
-24
lines changed

‎site/src/index.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
--avatar-lg:2.5rem;
4444
--avatar-default:1.5rem;
4545
--avatar-sm:1.125rem;
46+
--divider:240,6%,90%;/* tailwind zinc-200 */
4647
}
4748
.dark {
4849
--content-primary:00%98%;
@@ -75,6 +76,7 @@
7576
--border:2403.7%15.9%;
7677
--input:2403.7%15.9%;
7778
--ring:2404.9%83.9%;
79+
--divider:240,5%,26%;/* tailwind zinc-700 */
7880
}
7981
}
8082

‎site/src/pages/SetupPage/SetupPage.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import{buildInfo}from"api/queries/buildInfo";
2-
import{createFirstUser}from"api/queries/users";
2+
import{authMethods,createFirstUser}from"api/queries/users";
33
import{Loader}from"components/Loader/Loader";
44
import{useAuthContext}from"contexts/auth/AuthProvider";
55
import{useEmbeddedMetadata}from"hooks/useEmbeddedMetadata";
@@ -19,6 +19,7 @@ export const SetupPage: FC = () => {
1919
isSignedIn,
2020
isSigningIn,
2121
}=useAuthContext();
22+
constauthMethodsQuery=useQuery(authMethods());
2223
constcreateFirstUserMutation=useMutation(createFirstUser());
2324
constsetupIsComplete=!isConfiguringTheFirstUser;
2425
const{ metadata}=useEmbeddedMetadata();
@@ -34,7 +35,7 @@ export const SetupPage: FC = () => {
3435
});
3536
},[buildInfoQuery.data]);
3637

37-
if(isLoading){
38+
if(isLoading||authMethodsQuery.isLoading){
3839
return<Loaderfullscreen/>;
3940
}
4041

@@ -54,6 +55,7 @@ export const SetupPage: FC = () => {
5455
<title>{pageTitle("Set up your account")}</title>
5556
</Helmet>
5657
<SetupPageView
58+
authMethods={authMethodsQuery.data}
5759
isLoading={isSigningIn||createFirstUserMutation.isLoading}
5860
error={createFirstUserMutation.error}
5961
onSubmit={async(firstUser)=>{

‎site/src/pages/SetupPage/SetupPageView.tsx

Lines changed: 62 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
importGitHubIconfrom"@mui/icons-material/GitHub";
12
importLoadingButtonfrom"@mui/lab/LoadingButton";
23
importAlertTitlefrom"@mui/material/AlertTitle";
34
importAutocompletefrom"@mui/material/Autocomplete";
5+
importButtonfrom"@mui/material/Button";
46
importCheckboxfrom"@mui/material/Checkbox";
57
importLinkfrom"@mui/material/Link";
68
importMenuItemfrom"@mui/material/MenuItem";
@@ -15,8 +17,7 @@ import { PasswordField } from "components/PasswordField/PasswordField";
1517
import{SignInLayout}from"components/SignInLayout/SignInLayout";
1618
import{Stack}from"components/Stack/Stack";
1719
import{typeFormikContextType,useFormik}from"formik";
18-
importtype{FC}from"react";
19-
import{useEffect}from"react";
20+
import{typeChangeEvent,typeFC,useCallback}from"react";
2021
import{docs}from"utils/docs";
2122
import{
2223
getFormHelpers,
@@ -33,7 +34,8 @@ export const Language = {
3334
emailInvalid:"Please enter a valid email address.",
3435
emailRequired:"Please enter an email address.",
3536
passwordRequired:"Please enter a password.",
36-
create:"Create account",
37+
create:"Continue with email",
38+
githubCreate:"Continue with GitHub",
3739
welcomeMessage:<>Welcome to Coder</>,
3840
firstNameLabel:"First name",
3941
lastNameLabel:"Last name",
@@ -50,13 +52,29 @@ export const Language = {
5052
developersRequired:"Please select the number of developers in your company.",
5153
};
5254

55+
constusernameValidator=nameValidator(Language.usernameLabel);
56+
constusernameFromEmail=(email:string):string=>{
57+
try{
58+
constemailPrefix=email.split("@")[0];
59+
constusername=emailPrefix.toLowerCase().replace(/[^a-z0-9]/g,"-");
60+
usernameValidator.validateSync(username);
61+
returnusername;
62+
}catch(error){
63+
console.warn(
64+
"failed to automatically generate username, defaulting to 'admin'",
65+
error,
66+
);
67+
return"admin";
68+
}
69+
};
70+
5371
constvalidationSchema=Yup.object({
5472
email:Yup.string()
5573
.trim()
5674
.email(Language.emailInvalid)
5775
.required(Language.emailRequired),
5876
password:Yup.string().required(Language.passwordRequired),
59-
username:nameValidator(Language.usernameLabel),
77+
username:usernameValidator,
6078
trial:Yup.bool(),
6179
trial_info:Yup.object().when("trial",{
6280
is:true,
@@ -81,16 +99,23 @@ const numberOfDevelopersOptions = [
8199
"2500+",
82100
];
83101

102+
consticonStyles={
103+
width:16,
104+
height:16,
105+
};
106+
84107
exportinterfaceSetupPageViewProps{
85108
onSubmit:(firstUser:TypesGen.CreateFirstUserRequest)=>void;
86109
error?:unknown;
87110
isLoading?:boolean;
111+
authMethods:TypesGen.AuthMethods|undefined;
88112
}
89113

90114
exportconstSetupPageView:FC<SetupPageViewProps>=({
91115
onSubmit,
92116
error,
93117
isLoading,
118+
authMethods,
94119
})=>{
95120
constform:FormikContextType<TypesGen.CreateFirstUserRequest>=
96121
useFormik<TypesGen.CreateFirstUserRequest>({
@@ -112,6 +137,10 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
112137
},
113138
validationSchema,
114139
onSubmit,
140+
// With validate on blur set to true, the form lights up red whenever
141+
// you click out of it. This is a bit jarring. We instead validate
142+
// on submit and change.
143+
validateOnBlur:false,
115144
});
116145
constgetFieldHelpers=getFormHelpers<TypesGen.CreateFirstUserRequest>(
117146
form,
@@ -142,23 +171,36 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
142171
</header>
143172
<VerticalFormonSubmit={form.handleSubmit}>
144173
<FormFields>
145-
<TextField
146-
autoFocus
147-
{...getFieldHelpers("username")}
148-
onChange={onChangeTrimmed(form)}
149-
autoComplete="username"
150-
fullWidth
151-
label={Language.usernameLabel}
152-
/>
153-
<TextField
154-
{...getFieldHelpers("name")}
155-
autoComplete="name"
156-
fullWidth
157-
label={Language.nameLabel}
158-
/>
174+
{authMethods?.github.enabled&&(
175+
<>
176+
<Button
177+
fullWidth
178+
component="a"
179+
href="/api/v2/users/oauth2/github/callback"
180+
variant="contained"
181+
startIcon={<GitHubIconcss={iconStyles}/>}
182+
type="submit"
183+
size="xlarge"
184+
>
185+
{Language.githubCreate}
186+
</Button>
187+
<divclassName="flex items-center gap-4">
188+
<divclassName="h-[1px] w-full bg-border"/>
189+
<divclassName="shrink-0 text-xs uppercase text-content-secondary tracking-wider">
190+
or
191+
</div>
192+
<divclassName="h-[1px] w-full bg-border"/>
193+
</div>
194+
</>
195+
)}
159196
<TextField
160197
{...getFieldHelpers("email")}
161-
onChange={onChangeTrimmed(form)}
198+
onChange={(event)=>{
199+
constemail=event.target.value;
200+
constusername=usernameFromEmail(email);
201+
form.setFieldValue("username",username);
202+
onChangeTrimmed(form)(eventasChangeEvent<HTMLInputElement>);
203+
}}
162204
autoComplete="email"
163205
fullWidth
164206
label={Language.emailLabel}
@@ -340,9 +382,7 @@ export const SetupPageView: FC<SetupPageViewProps> = ({
340382
loading={isLoading}
341383
type="submit"
342384
data-testid="create"
343-
size="large"
344-
variant="contained"
345-
color="primary"
385+
size="xlarge"
346386
>
347387
{Language.create}
348388
</LoadingButton>

‎site/tailwind.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ module.exports = {
6363
grey:"hsl(var(--highlight-grey))",
6464
sky:"hsl(var(--highlight-sky))",
6565
},
66+
divider:"hsl(var(--divider))",
6667
},
6768
keyframes:{
6869
loading:{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp