apps/web/app/routes/settings/two-factor.tsx · flagon-io/g1t

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

1

import { KeyRound, ShieldAlert, ShieldCheck, Smartphone } from "lucide-react";

2

import { useState } from "react";

3

import { Form } from "react-router";

4

5

import type { Route } from "./+types/two-factor";

6

import { ConfirmItIsYou } from "../../components/emails-section";

7

import { QrCode } from "../../components/qr-code";

8

import { CopyLine, ErrorText, Field, Input, SubmitButton, TimeAgo } from "../../components/ui";

9

import { Badge } from "../../components/ui/badge";

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.2d ago

10

import { Button } from "../../components/ui/button";

11

import { Card } from "../../components/ui/card";

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

12

import { githubSignIn } from "../../lib/github.server";

13

import { page } from "../../lib/meta";

14

import { accounts } from "../../lib/services.server";

15

import { assertSameOrigin, requireUser } from "../../lib/session.server";

16

import { TWO_FACTOR_INTENTS, twoFactorAction } from "../../lib/two-factor.server";

17

18

export function meta(args: Route.MetaArgs) {

19

return page(args, { title: "Two-factor authentication · Settings · g1t" });

20

}

21

22

export async function loader({ request, context }: Route.LoaderArgs) {

23

const user = requireUser(context, request);

24

const [status, github] = await Promise.all([

25

accounts.twoFactorStatus(user).catch(() => null),

26

githubSignIn.account(user).catch(() => null),

27

]);

28

return {

29

status: status?.ok ? status.value : null,

30

hasPassword: github?.hasPassword ?? true,

31

};

32

}

33

34

export async function action({ request, context }: Route.ActionArgs) {

35

assertSameOrigin(request);

36

const user = requireUser(context, request);

37

const form = await request.formData();

38

if ((TWO_FACTOR_INTENTS as readonly string[]).includes(String(form.get("intent")))) {

39

return (await twoFactorAction(user, form, request)) ?? null;

40

}

41

return null;

42

}

43

44

/** A base32 secret in groups of four, as people type it. */

45

function grouped(secret: string): string {

46

return secret.match(/.{1,4}/g)?.join(" ") ?? secret;

47

}

48

49

/** The six digits an app shows, typed. */

50

function CodeInput({ label = "Code from your app", recovery = false }: { label?: string; recovery?: boolean }) {

51

return (

52

53

<Input

54

name="code"

55

required

56

autoComplete="one-time-code"

57

inputMode={recovery ? "text" : "numeric"}

58

pattern={recovery ? undefined : "[0-9 ]{6,7}"}

59

maxLength={recovery ? 20 : 7}

60

placeholder={recovery ? "123456" : "123 456"}

61

/>

62

</Field>

63

);

64

}

65

66

/** Recovery codes, shown once, with a way to keep them. */

67

function RecoveryCodes({ codes }: { codes: string[] }) {

68

const [copied, setCopied] = useState(false);

69

return (

70

71

72

<KeyRound size={16} className="text-warn" /> Save your recovery codes

73

</h2>

74

75

Each one signs you in once if you lose your phone. They are shown only now: keep them in your password manager.

76

</p>

77

78

{codes.map((code) => (

79

80

{code}

81

</li>

82

))}

83

</ul>

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.2d ago

84

<Button

85

type="button" variant="link" size="inline" className="mt-4 text-sm underline" onClick={() => {

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

86

void navigator.clipboard.writeText(codes.join("\n"));

87

setCopied(true);

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.2d ago

88

}}>

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

89

{copied ? "Copied" : "Copy all"}

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.2d ago

90

</Button>

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

91

</section>

92

);

93

}

94

95

export default function TwoFactorSettings({ loaderData, actionData }: Route.ComponentProps) {

96

const { status, hasPassword } = loaderData;

97

const setup = actionData?.setup;

98

if (!status) {

99

return <p className="text-sm text-muted">Two-factor authentication could not be loaded just now. Try again in a moment.</p>;

100

}

101

return (

102

103

{actionData?.reauth && <ConfirmItIsYou pending={actionData.reauth} hasPassword={hasPassword} />}

104

{actionData?.codes && <RecoveryCodes codes={actionData.codes} />}

105

{actionData?.notice && !actionData.codes && (

106

107

{actionData.notice}

108

</p>

109

)}

110

111

{status.required_by.length > 0 && !status.enabled && (

112

113

114

<p>

115

<span className="font-medium">{status.required_by.join(", ")}</span>{" "}

116

{status.required_by.length === 1 ? "requires" : "require"} two-factor authentication. You cannot use{" "}

117

{status.required_by.length === 1 ? "it" : "them"} until you turn it on here.

118

</p>

119

</div>

120

)}

121

122

{status.enabled ? (

123

<>

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.2d ago

124

125

126

127

128

<h2 className="grow text-sm font-medium">Authenticator app</h2>

129

130

</div>

131

132

Signing in with your password asks for a code from your app too. Git over HTTPS takes an access token,

133

never your password.

134

{status.enabled_at && (

135

<>

136

{" "}

137

Turned on <TimeAgo at={status.enabled_at} />.

138

</>

139

)}

140

</p>

141

142

{status.recovery_codes_left} of 10 recovery codes left.

143

</p>

144

145

146

147

Make new recovery codes

148

</SubmitButton>

149

</Form>

150

</section>

151

</Card>

152

153

154

155

<h2 className="text-sm font-medium">Turn off two-factor authentication</h2>

156

157

{status.required_by.length > 0

158

? `You would lose access to ${status.required_by.join(", ")} until you turn it on again.`

159

: "Your account is safer with it on."}

160

</p>

161

162

163

164

165

</div>

166

167

Turn off

168

</SubmitButton>

169

</Form>

170

<ErrorText>{actionData?.error}</ErrorText>

171

</section>

172

</Card>

173

</>

174

) : setup ? (

175

176

177

178

<Smartphone size={16} className="text-accent" /> Set up your authenticator app

179

</h2>

180

181

<li>

182

<p className="text-muted">1. Scan this with an authenticator app, such as 1Password, Google Authenticator or Authy.</p>

183

184

185

</div>

186

<p className="mt-3 text-muted">Or enter this key by hand:</p>

187

188

189

</div>

190

</li>

191

<li>

192

<p className="text-muted">2. Enter the six-digit code your app shows.</p>

193

194

195

196

197

198

199

</div>

200

201

Turn on

202

</SubmitButton>

203

</Form>

204

<ErrorText>{actionData?.error}</ErrorText>

205

</li>

206

</ol>

207

</section>

208

</Card>

209

) : (

210

211

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

212

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.2d ago

213

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

214

<h2 className="grow text-sm font-medium">Authenticator app</h2>

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.2d ago

215

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

216

</div>

217

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.2d ago

218

A code from an app on your phone, asked for each time you sign in with your password, so a stolen password

219

is not enough.

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

220

</p>

221

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.2d ago

222

223

224

Set up

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

225

</SubmitButton>

226

</Form>

227

<ErrorText>{actionData?.error}</ErrorText>

228

</section>

The site is built from its shared components: one Button with its variants and sizes, one Badge, Card for every panel, Alert for notices, Kbd for keys, Table for the security tables, and Avatar, Command, Progress, ScrollArea, ToggleGroup, Collapsible and Accordion in the kit; raw buttons, hand-drawn cards and pills and per-file button class lists are gone, outline buttons stand the same height as filled ones, and the phone's Ask g1t loses its tile. Every page was compared pixel by pixel before and after.2d ago

229

</Card>

Merge main (membership, two-factor, GitHub repo roles) into tokens5d ago

230

)}

231

</div>

232

);

233

}