feat(platform): add same site attribute for cookie

perfsee · Oct 11, 2022 · 1ae7ece · 1ae7ece
1 parent 73585d2
commit 1ae7ece
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 20 deletions.
diff --git a/packages/platform/src/modules/project/settings/settings-environments/form-cookies.tsx b/packages/platform/src/modules/project/settings/settings-environments/form-cookies.tsx
@@ -14,7 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { IconButton, Stack, DefaultButton, Label, Checkbox, IIconProps, DatePicker } from '@fluentui/react'
+import {
+  IconButton,
+  Stack,
+  DefaultButton,
+  Label,
+  Checkbox,
+  IIconProps,
+  DatePicker,
+  ComboBox,
+  IComboBoxOption,
+} from '@fluentui/react'
 import dayjs from 'dayjs'
 import { FormEvent, forwardRef, useMemo, useState, useCallback, useImperativeHandle } from 'react'
 
@@ -46,6 +56,21 @@ const CheckboxStyles = {
   },
 }
 
+const SameSiteOptions = [
+  {
+    key: 'None',
+    text: 'None',
+  },
+  {
+    key: 'Strict',
+    text: 'Strict',
+  },
+  {
+    key: 'Lax',
+    text: 'Lax',
+  },
+]
+
 const FormCookie = (props: CookieProps) => {
   const [editing, open, close] = useToggleState(!props.cookie.value)
 
@@ -85,6 +110,19 @@ const FormCookie = (props: CookieProps) => {
     [cookie, index, onCookieChange],
   )
 
+  const onSameSiteChange = useCallback(
+    (_e?: any, _o?: IComboBoxOption, _i?: number, value?: string) => {
+      onCookieChange(
+        {
+          ...cookie,
+          sameSite: value as 'Strict' | 'Lax' | 'None',
+        },
+        index,
+      )
+    },
+    [cookie, index, onCookieChange],
+  )
+
   const header = (
     <Stack horizontal verticalAlign="center" horizontalAlign="space-between" tokens={{ padding: '8px 0 0 0' }}>
       Cookie #{index + 1}
@@ -131,12 +169,18 @@ const FormCookie = (props: CookieProps) => {
             {cookie.secure ? 'Yes' : 'No'}
           </div>
         </Stack>
-        {cookie.expire && (
+        <Stack styles={{ root: { '> div': { width: '50%' } } }} horizontal>
           <div>
-            <b>Expired: </b>
-            {dayjs(cookie.expire).format('YYYY-MM-DD')}
+            <b>SameSite: </b>
+            {cookie.sameSite ?? 'Lax'}
           </div>
-        )}
+          {cookie.expire && (
+            <div>
+              <b>Expired: </b>
+              {dayjs(cookie.expire).format('YYYY-MM-DD')}
+            </div>
+          )}
+        </Stack>
       </div>
     )
   }
@@ -190,21 +234,39 @@ const FormCookie = (props: CookieProps) => {
         label="Share only with SSL servers (Secure)"
         defaultChecked={cookie.secure}
       />
-      <Stack horizontal verticalAlign="center" tokens={NormalToken}>
-        <span>Expire time:</span>
-        <DatePicker
-          styles={{ root: { flex: 1 }, textField: { '> span': { display: 'none' } } }}
-          value={cookie.expire ? new Date(cookie.expire) : undefined}
-          showMonthPickerAsOverlay={true}
-          placeholder="We will notify you on this date."
-          minDate={new Date()}
-          onSelectDate={onSelectDate}
-        />
-        <IconButton
-          iconProps={removeIconProps}
-          styles={{ root: { color: SharedColors.gray30 } }}
-          onClick={onRemoveDate}
-        />
+      <Stack horizontal verticalAlign="center">
+        <Stack.Item basis="50%" grow={0} shrink={0}>
+          <Stack horizontal verticalAlign="center" tokens={NormalToken}>
+            <span>Same Site:</span>
+            <ComboBox
+              selectedKey={cookie.sameSite ?? 'Lax'}
+              placeholder="Same Site"
+              onChange={onSameSiteChange}
+              styles={{ root: { flex: 1 }, textField: { '> span': { display: 'none' } } }}
+              useComboBoxAsMenuWidth={true}
+              allowFreeform={false}
+              options={SameSiteOptions}
+            />
+          </Stack>
+        </Stack.Item>
+        <Stack.Item basis="50%" grow={0} shrink={0}>
+          <Stack horizontal verticalAlign="center" tokens={NormalToken}>
+            <span>Expire time:</span>
+            <DatePicker
+              styles={{ root: { flex: 1 }, textField: { '> span': { display: 'none' } } }}
+              value={cookie.expire ? new Date(cookie.expire) : undefined}
+              showMonthPickerAsOverlay={true}
+              placeholder="We will notify you on this date."
+              minDate={new Date()}
+              onSelectDate={onSelectDate}
+            />
+            <IconButton
+              iconProps={removeIconProps}
+              styles={{ root: { color: SharedColors.gray30 } }}
+              onClick={onRemoveDate}
+            />
+          </Stack>
+        </Stack.Item>
       </Stack>
     </div>
   )

diff --git a/packages/shared/src/types/snapshot.ts b/packages/shared/src/types/snapshot.ts
@@ -96,6 +96,7 @@ export type CookieType = {
   httpOnly: boolean
   secure: boolean
   expire: string | null
+  sameSite?: 'Strict' | 'Lax' | 'None'
 }
 
 export type HeaderType = {