web: auto refresh token

reuse buttons in default & telegram forms

apps/web/components/Form/Form.module.scss

@@ -9,25 +9,13 @@
 }
 
 .button-submit {
-  background-color: var(--color-primary);
-  font-family: Montserrat;
-  border: 0;
-  color: #fff;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: bold;
-  line-height: 2;
-  outline: 0;
-  padding: 0.55rem 0.75rem;
-  text-align: center;
-  text-transform: uppercase;
-  vertical-align: middle;
-  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .button-telegram {
   @extend .button-submit;
-  background-color: var(--color-primary);
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -66,3 +54,16 @@
   margin-right: 13px !important;
   margin-left: none !important;
 }
+
+.spinner-icon {
+  filter: brightness(0) invert(1);
+  fill: var(--color-primary);
+  margin: 0 !important;
+  margin-right: 6px !important;
+}
+
+.loading-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

apps/web/components/Form/buttons.tsx

@@ -0,0 +1,56 @@
+import Spinner from '../../public/assets/animated/90-ring.svg';
+import TelegramIcon from '../../public/assets/images/telegram.svg?url';
+import styles from './Form.module.scss';
+import Image from 'next/image';
+import type { ButtonHTMLAttributes } from 'react';
+
+type Props = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function ButtonLogin(props: Props) {
+  return (
+    <button className={styles['button-submit']} type="submit" {...props}>
+      Войти
+    </button>
+  );
+}
+
+export function ButtonLoading(props: Props) {
+  return (
+    <button disabled type="button" className={styles['button-submit']} {...props}>
+      <div className={styles['loading-wrapper']}>
+        <Spinner alt="spinner" className={styles['spinner-icon']} />
+        Загрузка...
+      </div>
+    </button>
+  );
+}
+
+export function ButtonTelegram(props: Props) {
+  return (
+    <button type="submit" className={styles['button-telegram']} {...props}>
+      <Image
+        className={styles['button-telegram-icon']}
+        src={TelegramIcon}
+        width={24}
+        height={22}
+        alt="Telegram icon"
+      />
+      {props.children}
+    </button>
+  );
+}
+
+export function ButtonTelegramLogin(props: Props) {
+  return (
+    <button disabled type="submit" className={styles['button-telegram']} {...props}>
+      <Image
+        className={styles['button-telegram-icon']}
+        src={TelegramIcon}
+        width={24}
+        height={22}
+        alt="Telegram icon"
+      />
+      Ожидаем подтверждения...
+    </button>
+  );
+}

apps/web/components/Form/default-form.tsx

@@ -1,6 +1,6 @@
 import { BaseForm } from './base-form';
+import { ButtonLoading, ButtonLogin } from './buttons';
 import { ERROR_INVALID_CREDENTIALS, ERROR_SERVER } from './errors';
-import styles from './Form.module.scss';
 import type { FormData } from './types';
 import { redirect } from '@/components/Form/utils';
 import { FormStateContext } from '@/context/form-state';
@@ -19,22 +19,16 @@ export function DefaultForm() {
       .then(() => redirect())
       .catch(() =>
         dispatch({
-          payload: { error: ERROR_SERVER },
+          payload: { error: ERROR_SERVER, user: undefined },
           type: 'set-error',
         })
       );
   }
 
   if (step === 'login' && user) {
-    return (
-      <button
-        className={styles['button-submit']}
-        type="submit"
-        onClick={() => handleRefreshToken()}
-      >
-        Продолжить как <b>{user?.displayName || user.username}</b>
-      </button>
-    );
+    handleRefreshToken();
+
+    return <ButtonLoading />;
   }
 
   function handleLogin(data: FormData) {
@@ -51,9 +45,7 @@ export function DefaultForm() {
 
   return (
     <BaseForm onSubmit={(data) => handleLogin(data)}>
-      <button className={styles['button-submit']} type="submit">
-        Войти
-      </button>
+      <ButtonLogin />
     </BaseForm>
   );
 }

apps/web/components/Form/telegram-form.tsx

@@ -1,7 +1,6 @@
-import TelegramIcon from '../../public/assets/images/telegram.svg';
 import { BaseForm } from './base-form';
+import { ButtonLoading, ButtonLogin, ButtonTelegram, ButtonTelegramLogin } from './buttons';
 import { ERROR_INVALID_CREDENTIALS, ERROR_SERVER } from './errors';
-import styles from './Form.module.scss';
 import type { FormData } from './types';
 import { redirect } from '@/components/Form/utils';
 import { FormStateContext } from '@/context/form-state';
@@ -9,7 +8,6 @@ import { useSocket } from '@/hooks/socket';
 import type { TelegramUrlResponse } from '@/types/error';
 import type { LdapUser } from '@/types/user';
 import axios, { isAxiosError } from 'axios';
-import Image from 'next/image';
 import { useContext, useEffect } from 'react';
 
 export function TelegramForm() {
@@ -102,30 +100,17 @@ export function TelegramForm() {
   }
 
   if (step === 'login' && user) {
-    return (
-      <button
-        className={styles['button-submit']}
-        type="submit"
-        onClick={() => handleRefreshToken()}
-      >
-        Продолжить как <b>{user?.displayName || user.username}</b>
-      </button>
-    );
+    handleRefreshToken();
+
+    return <ButtonLoading />;
   }
 
   if (step === 'telegram') {
     return (
       <BaseForm onSubmit={() => handleTelegramLogin()}>
-        <button type="submit" className={styles['button-telegram']}>
-          <Image
-            className={styles['button-telegram-icon']}
-            src={TelegramIcon}
-            width={24}
-            height={22}
-            alt="Telegram icon"
-          />
+        <ButtonTelegram>
           Войти как &nbsp; <b>{user?.displayName}</b>
-        </button>
+        </ButtonTelegram>
       </BaseForm>
     );
   }
@@ -133,25 +118,14 @@ export function TelegramForm() {
   if (step === 'telegram-login') {
     return (
       <BaseForm onSubmit={() => {}}>
-        <button disabled type="submit" className={styles['button-telegram']}>
-          <Image
-            className={styles['button-telegram-icon']}
-            src={TelegramIcon}
-            width={24}
-            height={22}
-            alt="Telegram icon"
-          />
-          Ожидаем подтверждения...
-        </button>
+        <ButtonTelegramLogin />
       </BaseForm>
     );
   }
 
   return (
     <BaseForm onSubmit={(data) => handleLogin(data)}>
-      <button className={styles['button-submit']} type="submit">
-        Войти
-      </button>
+      <ButtonLogin />
     </BaseForm>
   );
 }

apps/web/elements/Logo.jsx

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import logo from 'public/assets/images/logo-primary.svg';
+import logo from 'public/assets/images/logo-primary.svg?url';
 
 export function Logo() {
   return <Image className="logo" src={logo} alt="logo" width={154} />;

apps/web/next.config.js

@@ -17,4 +17,29 @@ module.exports = {
   reactStrictMode: true,
   serverRuntimeConfig: runtimeConfig,
   swcMinify: true,
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ['@svgr/webpack'],
+      }
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
 };

apps/web/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fontsource/montserrat": "^5.0.13",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^20.10.0",
     "@types/react": "^18.2.39",
     "@types/react-dom": "^18.2.17",

apps/web/public/assets/animated/90-ring.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_P7sC{transform-origin:center;animation:spinner_svv2 .75s infinite linear}@keyframes spinner_svv2{100%{transform:rotate(360deg)}}</style><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_P7sC"/></svg>

apps/web/styles/button.css

@@ -0,0 +1,22 @@
+button {
+  border: 0;
+  background-color: var(--color-primary);
+  color: #fff;
+  cursor: pointer;
+  font-family: Montserrat;
+  font-size: 14px;
+  font-weight: bold;
+  height: 40px;
+  outline: 0;
+  outline: none;
+  padding: 0.55rem 0.75rem;
+  text-align: center;
+  text-transform: uppercase;
+  vertical-align: middle;
+  width: 100%;
+}
+
+button:disabled {
+  opacity: 0.8;
+  cursor: not-allowed;
+}

apps/web/styles/globals.css

@@ -5,3 +5,4 @@
 @import './colors.css';
 @import './info.css';
 @import './logo.css';
+@import './button.css';

apps/web/tsconfig.json

@@ -26,6 +26,6 @@
       "@/*": ["*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "types/svgr.d.ts"],
   "exclude": ["node_modules"]
 }

apps/web/types/svgr.d.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module '*.svg' {
+  import type { FC, SVGProps } from 'react';
+
+  const content: FC<SVGProps<SVGElement>>;
+  export default content;
+}
+
+declare module '*.svg?url' {
+  const content: any;
+  export default content;
+}