Added frontend external auth

Author: ElisDN

cucumber/features/join_external.feature

@@ -0,0 +1,9 @@
+Feature: Join Auth via Yandex
+
+  Scenario: Auth
+    Given I am a guest user
+    And I am on "/join" page
+    When I click "auth-external-yandex" element
+    Then I see "Auth with Yandex"
+    When I click "oauth-new" element
+    Then I see "logout-button" element

frontend/src/Home/Home.tsx

@@ -21,7 +21,7 @@ export default function Home(): React.JSX.Element {
             <Link to="/join" data-testid="join-link">
               Join
             </Link>
-            <button type="button" data-testid="login-button" onClick={() => login()}>
+            <button type="button" data-testid="login-button" onClick={() => login({})}>
               Log In
             </button>
           </>

frontend/src/Join/Join.tsx

@@ -3,6 +3,7 @@ import System from '../Layout/System'
 import { Link, Navigate } from 'react-router-dom'
 import JoinForm from './JoinForm'
 import { useAuth } from '../OAuth/Provider'
+import AuthExternal from '../OAuth/External/AuthExternal'
 
 export default function Join(): React.JSX.Element {
   const { isAuthenticated } = useAuth()
@@ -15,6 +16,7 @@ export default function Join(): React.JSX.Element {
     <System>
       <h1>Join to Us</h1>
       <JoinForm />
+      <AuthExternal />
       <p>
         <Link to="/">Back to Home</Link>
       </p>

frontend/src/OAuth/External/AuthExternal.module.css

@@ -0,0 +1,48 @@
+.external {
+  margin: 1rem 0;
+  padding: 1rem 0;
+  border-top: 1px solid #eee;
+  border-bottom: 1px solid #eee;
+}
+
+.external .heading {
+  font-size: 0.8rem;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.external .items {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.external .item {
+  margin-right: 0.5rem;
+  border-radius: 3px;
+  padding: 0.6rem 1rem;
+  cursor: pointer;
+  border: 1px solid #ccc;
+  background: linear-gradient(to bottom, #fff, #f6f6f6);
+  color: #222;
+  font-size: 0.8rem;
+  line-height: 1;
+  text-decoration: none;
+  text-align: center;
+}
+
+.external .item:last-of-type {
+  margin-right: 0;
+}
+
+.external .item.yandex {
+  border: 1px solid #f60;
+  background: linear-gradient(to bottom, #ff7600, #f00);
+  color: #fff;
+}
+
+.external .item.mailru {
+  border: 1px solid #064fcd;
+  background: linear-gradient(to bottom, #256ce7, #064fcd);
+  color: #fff;
+}

frontend/src/OAuth/External/AuthExternal.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import styles from './AuthExternal.module.css'
+import { useAuth } from '../Provider'
+
+export default function AuthExternal(): React.JSX.Element {
+  const { login } = useAuth()
+
+  return (
+    <div className={styles.external}>
+      <div className={styles.heading}>Or log in via:</div>
+      <div className={styles.items} data-testid="auth-external">
+        <div
+          className={styles.item + ' ' + styles.yandex}
+          onClick={() => login({ provider: 'yandex' })}
+          data-testid="auth-external-yandex"
+        >
+          Yandex
+        </div>
+        <div
+          className={styles.item + ' ' + styles.mailru}
+          onClick={() => login({ provider: 'mailru' })}
+          data-testid="auth-external-mailru"
+        >
+          MailRu
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/OAuth/Provider/AuthContext.ts

@@ -3,7 +3,7 @@ import { createContext } from 'react'
 export type AuthContextValue = {
   isAuthenticated: boolean
   getToken(): Promise<string>
-  login(): void
+  login(extra: Record<string, string>): void
   logout(): void
   loading: boolean
   error: string | null

frontend/src/OAuth/Provider/AuthProvider.tsx

@@ -154,7 +154,7 @@ export default function AuthProvider({
     return () => window.removeEventListener('storage', listener)
   }, [])
 
-  const login = useCallback(async () => {
+  const login = useCallback(async (extra: Record<string, string>) => {
     const currentLocation = window.location.pathname
     const codeVerifier = generateCodeVerifier()
     const codeChallenge = await generateCodeChallenge(codeVerifier)
@@ -172,6 +172,7 @@ export default function AuthProvider({
       redirect_uri: window.location.origin + redirectPath,
       scope,
       state,
+      ...extra,
     })
 
     window.location.assign(authorizeUrl + '?' + args)