From 8b7f1331eea885a346be63a308613ee4373c3aea Mon Sep 17 00:00:00 2001
From: Dmitry Verkhoturov <paskal.07@gmail.com>
Date: Wed, 4 Jan 2023 10:29:46 +0400
Subject: [PATCH] add Apple auth provider frontend support

With distinct logos for light and dark theme from
https://devimages-cdn.apple.com/design/resources/download/Logo-Sign-in-with-Apple.dmg
---
 .../apps/remark42/app/assets/social/apple-dark.svg     | 10 ++++++++++
 .../apps/remark42/app/assets/social/apple-light.svg    | 10 ++++++++++
 frontend/apps/remark42/app/common/types.ts             |  1 +
 .../apps/remark42/app/components/auth/auth.spec.tsx    |  1 +
 .../app/components/auth/components/oauth.consts.ts     |  7 +++++++
 frontend/packages/api/clients/index.ts                 |  1 +
 site/src/docs/configuration/authorization/index.md     |  2 +-
 7 files changed, 31 insertions(+), 1 deletion(-)
 create mode 100755 frontend/apps/remark42/app/assets/social/apple-dark.svg
 create mode 100755 frontend/apps/remark42/app/assets/social/apple-light.svg

diff --git a/frontend/apps/remark42/app/assets/social/apple-dark.svg b/frontend/apps/remark42/app/assets/social/apple-dark.svg
new file mode 100755
index 00000000..389c544f
--- /dev/null
+++ b/frontend/apps/remark42/app/assets/social/apple-dark.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
+    <title>White Logo Square </title>
+    <desc>Created with Sketch.</desc>
+    <g id="White-Logo-Square-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#000000" x="6" y="6" width="44" height="44"></rect>
+        <path d="M28.2226562,20.3846154 C29.0546875,20.3846154 30.0976562,19.8048315 30.71875,19.0317864 C31.28125,18.3312142 31.6914062,17.352829 31.6914062,16.3744437 C31.6914062,16.2415766 31.6796875,16.1087095 31.65625,16 C30.7304687,16.0362365 29.6171875,16.640178 28.9492187,17.4494596 C28.421875,18.06548 27.9414062,19.0317864 27.9414062,20.0222505 C27.9414062,20.1671964 27.9648438,20.3121424 27.9765625,20.3604577 C28.0351562,20.3725366 28.1289062,20.3846154 28.2226562,20.3846154 Z M25.2929688,35 C26.4296875,35 26.9335938,34.214876 28.3515625,34.214876 C29.7929688,34.214876 30.109375,34.9758423 31.375,34.9758423 C32.6171875,34.9758423 33.4492188,33.792117 34.234375,32.6325493 C35.1132812,31.3038779 35.4765625,29.9993643 35.5,29.9389701 C35.4179688,29.9148125 33.0390625,28.9122695 33.0390625,26.0979021 C33.0390625,23.6579784 34.9140625,22.5588048 35.0195312,22.474253 C33.7773438,20.6382708 31.890625,20.5899555 31.375,20.5899555 C29.9804688,20.5899555 28.84375,21.4596313 28.1289062,21.4596313 C27.3554688,21.4596313 26.3359375,20.6382708 25.1289062,20.6382708 C22.8320312,20.6382708 20.5,22.5950413 20.5,26.2911634 C20.5,28.5861411 21.3671875,31.013986 22.4335938,32.5842339 C23.3476562,33.9129053 24.1445312,35 25.2929688,35 Z" id="" fill="#FFFFFF" fill-rule="nonzero"></path>
+    </g>
+</svg>
diff --git a/frontend/apps/remark42/app/assets/social/apple-light.svg b/frontend/apps/remark42/app/assets/social/apple-light.svg
new file mode 100755
index 00000000..d3b2556f
--- /dev/null
+++ b/frontend/apps/remark42/app/assets/social/apple-light.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 61 (89581) - https://sketch.com -->
+    <title>Black Logo Square</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Black-Logo-Square" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#FFFFFF" x="6" y="6" width="44" height="44"></rect>
+        <path d="M28.2226562,20.3846154 C29.0546875,20.3846154 30.0976562,19.8048315 30.71875,19.0317864 C31.28125,18.3312142 31.6914062,17.352829 31.6914062,16.3744437 C31.6914062,16.2415766 31.6796875,16.1087095 31.65625,16 C30.7304687,16.0362365 29.6171875,16.640178 28.9492187,17.4494596 C28.421875,18.06548 27.9414062,19.0317864 27.9414062,20.0222505 C27.9414062,20.1671964 27.9648438,20.3121424 27.9765625,20.3604577 C28.0351562,20.3725366 28.1289062,20.3846154 28.2226562,20.3846154 Z M25.2929688,35 C26.4296875,35 26.9335938,34.214876 28.3515625,34.214876 C29.7929688,34.214876 30.109375,34.9758423 31.375,34.9758423 C32.6171875,34.9758423 33.4492188,33.792117 34.234375,32.6325493 C35.1132812,31.3038779 35.4765625,29.9993643 35.5,29.9389701 C35.4179688,29.9148125 33.0390625,28.9122695 33.0390625,26.0979021 C33.0390625,23.6579784 34.9140625,22.5588048 35.0195312,22.474253 C33.7773438,20.6382708 31.890625,20.5899555 31.375,20.5899555 C29.9804688,20.5899555 28.84375,21.4596313 28.1289062,21.4596313 C27.3554688,21.4596313 26.3359375,20.6382708 25.1289062,20.6382708 C22.8320312,20.6382708 20.5,22.5950413 20.5,26.2911634 C20.5,28.5861411 21.3671875,31.013986 22.4335938,32.5842339 C23.3476562,33.9129053 24.1445312,35 25.2929688,35 Z" id="" fill="#000000" fill-rule="nonzero"></path>
+    </g>
+</svg>
diff --git a/frontend/apps/remark42/app/common/types.ts b/frontend/apps/remark42/app/common/types.ts
index 1fe9177d..2b7b0ee0 100644
--- a/frontend/apps/remark42/app/common/types.ts
+++ b/frontend/apps/remark42/app/common/types.ts
@@ -97,6 +97,7 @@ export interface Tree {
 }
 
 export type OAuthProvider =
+  | 'apple'
   | 'facebook'
   | 'twitter'
   | 'google'
diff --git a/frontend/apps/remark42/app/components/auth/auth.spec.tsx b/frontend/apps/remark42/app/components/auth/auth.spec.tsx
index 726ce4fe..9df6e605 100644
--- a/frontend/apps/remark42/app/components/auth/auth.spec.tsx
+++ b/frontend/apps/remark42/app/components/auth/auth.spec.tsx
@@ -74,6 +74,7 @@ describe('<Auth/>', () => {
     [['facebook', 'google', 'microsoft']],
     [['facebook', 'google', 'microsoft', 'yandex']],
     [['facebook', 'google', 'microsoft', 'yandex', 'twitter']],
+    [['facebook', 'google', 'microsoft', 'yandex', 'twitter', 'apple']],
   ] as [OAuthProvider[]][])('should renders with %j providers', async (providers) => {
     StaticStore.config.auth_providers = providers;
 
diff --git a/frontend/apps/remark42/app/components/auth/components/oauth.consts.ts b/frontend/apps/remark42/app/components/auth/components/oauth.consts.ts
index afa7ab97..61e217a1 100644
--- a/frontend/apps/remark42/app/components/auth/components/oauth.consts.ts
+++ b/frontend/apps/remark42/app/components/auth/components/oauth.consts.ts
@@ -1,4 +1,11 @@
 export const OAUTH_DATA = {
+  apple: {
+    name: 'Apple',
+    icons: {
+      light: require('assets/social/apple-light.svg').default as string,
+      dark: require('assets/social/apple-dark.svg').default as string,
+    },
+  },
   facebook: require('assets/social/facebook.svg').default as string,
   twitter: require('assets/social/twitter.svg').default as string,
   patreon: require('assets/social/patreon.svg').default as string,
diff --git a/frontend/packages/api/clients/index.ts b/frontend/packages/api/clients/index.ts
index 53647888..3b648e31 100644
--- a/frontend/packages/api/clients/index.ts
+++ b/frontend/packages/api/clients/index.ts
@@ -17,6 +17,7 @@ export interface User {
 }
 
 export type OAuthProvider =
+	| 'apple'
 	| 'facebook'
 	| 'twitter'
 	| 'google'
diff --git a/site/src/docs/configuration/authorization/index.md b/site/src/docs/configuration/authorization/index.md
index 32bc1a55..8978c3f1 100644
--- a/site/src/docs/configuration/authorization/index.md
+++ b/site/src/docs/configuration/authorization/index.md
@@ -6,7 +6,7 @@ title: Authorization
 
 Authentication handled by external providers. You should set up OAuth2 for at least one of them to allow users to make comments. It is not mandatory to have all of them, but one should be correctly configured.
 
-### Apple (not implemented yet)
+### Apple
 
 1. Log in [to the developer account](https://developer.apple.com/account).
 1. If you don't have an App ID yet, [create one](https://developer.apple.com/account/resources/identifiers/add/bundleId). Later on, you'll need **TeamID**, which is an "App ID Prefix" value.