V2 Settings - Security View #4018

joeauyeung · 2022-08-29T20:44:30Z

What does this PR do?

This PR adds two screens to the security section of the settings for V2.

Change password
Enable 2FA

Note that the settings shell is still a WIP so the pages will be missing headers.

Fixes #3784

Environment: Staging(main branch) / Production

Type of change

Bug fix (non-breaking change which fixes an issue)
Chore (refactoring code, technical debt, workflow improvements)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How should this be tested?

Visit http://localhost:3000/v2/settings/security/password
- Enter an invalid password, an error should appear
- Enter a valid password, it should be changed
Visit http://localhost:3000/v2/settings/security/two-factor-auth
- Enable 2FA
- Disable 2FA

Checklist

I haven't added tests that prove my fix is effective or that my feature works
I haven't checked if new and existing unit tests pass locally with my changes

vercel · 2022-08-29T20:44:33Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
cal	✅ Ready (Inspect)	Visit Preview	Aug 30, 2022 at 7:06PM (UTC)

1 Ignored Deployment

Name	Status	Preview	Updated
swagger	⬜️ Ignored (Inspect)		Aug 30, 2022 at 7:06PM (UTC)

joeauyeung · 2022-08-29T20:49:48Z

apps/web/components/v2/settings/DisableTwoFactorModal.tsx

@@ -0,0 +1,107 @@
+import { SyntheticEvent, useState } from "react";


Copied this file but added V2 components

joeauyeung · 2022-08-29T20:50:03Z

apps/web/components/v2/settings/EnableTwoFactorModal.tsx

@@ -0,0 +1,232 @@
+import React, { SyntheticEvent, useState } from "react";


Also copied this file and added V2 components

Heads up, this will change on #3817 let's try to match it first

joeauyeung · 2022-08-29T20:52:04Z

packages/trpc/server/routers/viewer/auth.tsx

+export const authRouter = createProtectedRouter().mutation("changePassword", {
+  input: z.object({
+    oldPassword: z.string(),
+    newPassword: z.string(),
+  }),
+  async resolve({ input, ctx }) {
+    const { oldPassword, newPassword } = input;
+
+    const { user } = ctx;
+
+    if (user.identityProvider !== IdentityProvider.CAL) {
+      throw new TRPCError({ code: "FORBIDDEN", message: "THIRD_PARTY_IDENTITY_PROVIDER_ENABLED" });
+    }
+
+    const currentPasswordQuery = await prisma.user.findFirst({
+      where: {
+        id: user.id,
+      },
+      select: {
+        password: true,
+      },
+    });
+
+    const currentPassword = currentPasswordQuery?.password;
+
+    if (!currentPassword) {
+      throw new TRPCError({ code: "NOT_FOUND", message: "MISSING_PASSWORD" });
+    }
+
+    const passwordsMatch = await verifyPassword(oldPassword, currentPassword);
+    if (!passwordsMatch) {
+      throw new TRPCError({ code: "BAD_REQUEST", message: "INCORRECT_PASSWORD" });
+    }
+
+    if (oldPassword === newPassword) {
+      throw new TRPCError({ code: "BAD_REQUEST", message: "PASSWORD_MATCHES_OLD" });
+    }
+
+    if (!validPassword(newPassword)) {
+      throw new TRPCError({ code: "BAD_REQUEST", message: "INVALID_PASSWORD" });
+    }
+
+    const hashedPassword = await hashPassword(newPassword);
+    await prisma.user.update({
+      where: {
+        id: user.id,
+      },
+      data: {
+        password: hashedPassword,
+      },
+    });
+  },
+});


Moved changing a password from an API endpoint to tRPC.

joeauyeung · 2022-08-29T20:52:35Z

packages/trpc/server/routers/viewer/auth.tsx

+    if (!validPassword(newPassword)) {
+      throw new TRPCError({ code: "BAD_REQUEST", message: "INVALID_PASSWORD" });
+    }


Checks for a valid password that was not present in the API endpoint

zomars · 2022-08-30T00:07:17Z

@joeauyeung don't forget to add these pages to the middleware.ts

zomars

Looking good @joeauyeung let's address some possible changes incoming in #3817 first 🙏🏽

zomars · 2022-08-30T01:58:52Z

apps/web/components/v2/settings/EnableTwoFactorModal.tsx

@@ -0,0 +1,232 @@
+import React, { SyntheticEvent, useState } from "react";


Heads up, this will change on #3817 let's try to match it first

zomars · 2022-08-30T01:59:04Z

apps/web/components/v2/settings/DisableTwoFactorModal.tsx

@@ -0,0 +1,107 @@
+import { SyntheticEvent, useState } from "react";


Heads up, this will change on #3817 let's try to match it first

zomars · 2022-08-30T01:59:21Z

apps/web/components/v2/settings/TwoFactorAuthAPI.ts

@@ -0,0 +1,33 @@
+const TwoFactorAuthAPI = {


Heads up, this will change on #3817 let's try to match it first

* Create change password screen * Add two factor auth screen * Add two factor auth screen * Remove header file * Updates middleware and rewrites * Adds Meta component to handle layout headings/metadata (#4021) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <[email protected]>

* Create change password screen * Add two factor auth screen * Add two factor auth screen * Remove header file * Updates middleware and rewrites * Adds Meta component to handle layout headings/metadata (calcom#4021) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <[email protected]>

* Fix breadcrumb colors * HorizontalTabs * Team List Item WIP * Horizontal Tabs * Cards * Remove team list item WIP * Login Page * Add welcome back i118n * EventType page work * Update EventType Icons * WIP Availability * Horizontal Tab Work * Add build command for in root * Update build DIr/command * Add Edit Button + change buttons to v2 * Availablitiy page * Fix IPAD * Make mobile look a little nicer * WIP bookingshell * Remove list items from breaking build * Mian bulk of Booking Page. * Few updates to components * Fix chormatic feedback * Fix banner * Fix Empty Screen * Text area + embded window fixes * Semi fix avatar * Troubleshoot container + Active on count * Improve mobile * NITS * Fix padding on input * Fix icons * Starting to move event types settings to tabs * Begin migration to single page form * Single page tabs * Limits Page * Advanced tab * Add RHF to dependancies * Most of advanced tab * Solved RHF mismtach * Build fixes * RHF conditionals fixes * Improved legibility * Major refactor/organisation into optional V2 UI * Portal EditLocationModal * Fix dialoug form * Update imports * Auto Animate + custom inputs WIP * Custom Inputs * WIP Apps * Fixing stories imports * Stripe app * Remove duplicate dialog * Remove duplicate dialog * add Test action button + UI improvements * add test action functionality * Fix embed URL * Fix app toggles + number of active apps * Fix container padding on disabledBorder prop * Removes strict * add confirmation dialog before sending SMS * code clean up * show error message if test action fails * disable test action button in edit mode * fixes SMS testing * use updated values * fix wrongly updated data in useEffect * fix typo * code clean up * EventType Team page WIP * Fix embed * NIT * Add Darkmode gray color * V2 Shell WIP * setup folders for v2 * add lost translations from merge * add all files to v2 + redesign /workflows * use custom template as default template * add first version of v2 for workflow editing page * Fix headings on shell V2 * Fix mobile layout with V2 shell * V2 create event type button * Checked Team Select * Hidden to happen on save - not on toggle * Team Attendee Select animation * Fix scheduling type and remove multi select label * Fix overflow on teams url * use fi icon for down arrow * add v2 shell * add trigger badge * Even Type move order handles * fix save button * enable editing of workflow name * improve delete workflow functionality * adjust empty screen * make trigger start with uppercase * change trash icon * Fix Embed TS errors * Fix TS errors * Fix Eslint errors * Fix TS errors for UI * Fix ESLINT error * create component for time and timeUnit input/dropdown * add workflows to v2 early access middleware * fix type issues * added SidebarCard for promo to v2 and storybook (#3906) Co-authored-by: Julian Benegas <[email protected]> Co-authored-by: Alan <[email protected]> Co-authored-by: sean-brydon <[email protected]> * Tooltip Provider - Wrapper due to dep upgrade * public event type list darkmode * V2 Color changes to public booking * adjust delete and edit button * create custom empty screen for worklows * add workflow examples to empty page * add loading state to button when creating first workflow * Show action as workflow name when no name exists * if no input leave name empty when updating workflow * use reminder template when creating workflow * improve time unit dropdown * Remove unused component * Fix typecheck * add loading state to new workflow button * add label before action dropdown * fixing badges in worflow list * use lighter color for untitled workflows * fix not showing nr of active eventtypes in workflow list * add workflows to event types * implement v2 desing for AddActionDialog * improve phone input * rounded borders for phoneInput in add action dialog * improve message input * fix mobile view for editing page * use md breakpoint for mobile view * finish workflows in event type settings * code cleanup * code cleanup * fix bug in testing workflow action * add v2 design for addition inputs as variables dialog * add V2 design for add variable dropdown * add notification icons to trigger badge * improve mobile version of workflows in eventtypes * remove ring from time before input * fix bug when workflow has no steps * Final UI improvements/fixes * code clean-up * code clean-up * code clean-up * use v2 design for license required * fix translation issues * fix adding variables in different language in old design * limit for pro users only for now * fix import * fix mobile view for empty screen * ues destructive button color for deleting workfow * remove padding at button of creation dialog * V2 Settings - Security View (#4018) * Create change password screen * Add two factor auth screen * Add two factor auth screen * Remove header file * Updates middleware and rewrites * Adds Meta component to handle layout headings/metadata (#4021) Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <[email protected]> * fix: rate limit auth (#3820) * fix: rate limit auth * fix: replace lru-cache w memory-cache * remove comments * fix: yarn.lock * fix: remove changes yarn lock * fix: add missing EOL empty liune * fix: move rate limiter so it kicks the last, limit to 10 tries per minute * fix: move limiter w rest of code * test: trying fix onboardong * fix: undo changes in globalSetup.ts * test: fix disable login for onboarding * fix: use username instead of email for token check * fix: tests * fix: don't run on test * fix: add missing comma * fix: remove uniqueTokenPerInterval * fix: add errorcode to packages lib auth * Update packages/lib/rateLimit.ts fix: improve readability Co-authored-by: Omar López <[email protected]> * Update packages/lib/rateLimit.ts fix: no unnecessary any Co-authored-by: Omar López <[email protected]> * Update packages/lib/rateLimit.ts fix: improve readability Co-authored-by: Omar López <[email protected]> * fix: rename interval -> intervalInMs * fix: check user.email not username which could be empty * fix: rateLimit update all naming Co-authored-by: Agusti Fernandez Pardo <[email protected]> Co-authored-by: Omar López <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Peer Richelsen <[email protected]> * Adds deprecation comments Co-authored-by: sean-brydon <[email protected]> Co-authored-by: Peer Richelsen <[email protected]> Co-authored-by: zomars <[email protected]> Co-authored-by: CarinaWolli <[email protected]> Co-authored-by: Hariom Balhara <[email protected]> Co-authored-by: Julian Benegas <[email protected]> Co-authored-by: Alan <[email protected]> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Joe Au-Yeung <[email protected]> Co-authored-by: Agusti Fernandez Pardo <[email protected]> Co-authored-by: Agusti Fernandez Pardo <[email protected]>

joeauyeung added 3 commits August 29, 2022 13:45

Create change password screen

21132ee

Add two factor auth screen

995198f

Add two factor auth screen

d28e947

Remove header file

f8bc38d

joeauyeung commented Aug 29, 2022

View reviewed changes

joeauyeung requested a review from a team August 29, 2022 20:57

vercel bot deployed to Preview – cal August 29, 2022 20:58 View deployment

Merge branch 'main' into v2/settings/security-view

fd97c9d

joeauyeung added the ♻️ autoupdate tells kodiak to keep this branch up-to-date label Aug 29, 2022

vercel bot deployed to Preview – cal August 29, 2022 21:37 View deployment

Merge branch 'main' into v2/settings/security-view

ea22157

vercel bot deployed to Preview – cal August 29, 2022 22:32 View deployment

Merge branch 'main' into v2/settings/security-view

b6bd3ab

vercel bot deployed to Preview – cal August 29, 2022 22:48 View deployment

Merge branch 'main' into v2/settings/security-view

a126e68

vercel bot had a problem deploying to Preview – swagger August 30, 2022 00:05 Failure

Merge branch 'main' into v2/settings/security-view

51d90cf

vercel bot deployed to Preview – cal August 30, 2022 00:21 View deployment

Updates middleware and rewrites

e64adaa

vercel bot deployed to Preview – cal August 30, 2022 02:18 View deployment

zomars mentioned this pull request Aug 30, 2022

Adds Meta component to handle layout headings/metadata #4021

Merged

3 tasks

zomars reviewed Aug 30, 2022

View reviewed changes

Merge branch 'main' into v2/settings/security-view

d0d805b

vercel bot deployed to Preview – cal August 30, 2022 09:09 View deployment

Merge branch 'main' into v2/settings/security-view

319c083

vercel bot had a problem deploying to Preview – cal August 30, 2022 09:45 Failure

kodiakhq bot added 2 commits August 30, 2022 11:47

Merge branch 'main' into v2/settings/security-view

e25000c

Merge branch 'main' into v2/settings/security-view

e18a33b

vercel bot deployed to Preview – cal August 30, 2022 12:06 View deployment

Merge branch 'main' into v2/settings/security-view

bfbb526

vercel bot deployed to Preview – cal August 30, 2022 13:59 View deployment

Merge branch 'main' into v2/settings/security-view

499058f

vercel bot deployed to Preview – cal August 30, 2022 17:22 View deployment

Merge branch 'main' into v2/settings/security-view

15e1b61

vercel bot deployed to Preview – cal August 30, 2022 18:36 View deployment

kodiakhq bot and others added 2 commits August 30, 2022 18:47

Merge branch 'main' into v2/settings/security-view

73bd9f2

Adds Meta component to handle layout headings/metadata (#4021)

d59c23f

vercel bot deployed to Preview – cal August 30, 2022 19:06 View deployment

zomars approved these changes Aug 30, 2022

View reviewed changes

zomars merged commit f5c1c76 into main Aug 30, 2022

zomars deleted the v2/settings/security-view branch August 30, 2022 19:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

V2 Settings - Security View #4018

V2 Settings - Security View #4018

Uh oh!

joeauyeung commented Aug 29, 2022 •

edited

Loading

Uh oh!

vercel bot commented Aug 29, 2022 •

edited

Loading

Uh oh!

joeauyeung Aug 29, 2022

Uh oh!

joeauyeung Aug 29, 2022

Uh oh!

zomars Aug 30, 2022

Uh oh!

joeauyeung Aug 29, 2022

Uh oh!

joeauyeung Aug 29, 2022

Uh oh!

zomars commented Aug 30, 2022

Uh oh!

zomars left a comment

Uh oh!

zomars Aug 30, 2022

Uh oh!

zomars Aug 30, 2022

Uh oh!

zomars Aug 30, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -0,0 +1,107 @@
		import { SyntheticEvent, useState } from "react";

		@@ -0,0 +1,232 @@
		import React, { SyntheticEvent, useState } from "react";

V2 Settings - Security View #4018

V2 Settings - Security View #4018

Uh oh!

Conversation

joeauyeung commented Aug 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Type of change

How should this be tested?

Checklist

Uh oh!

vercel bot commented Aug 29, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zomars commented Aug 30, 2022

Uh oh!

zomars left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

joeauyeung commented Aug 29, 2022 •

edited

Loading

vercel bot commented Aug 29, 2022 •

edited

Loading