CSS Styling (#37)

* padawan - settimeout to keep container alive while user is on page * padawan - deploy script * padawan - ignore wireguard * padawan - remove turnstile * css - remove sass and bootstrap as backend deps, move all scss to frontend
Plebeian-Technology · Jul 8, 2024 · 0bed641 · 0bed641
1 parent 8d00161
commit 0bed641
Show file tree

Hide file tree

Showing 19 changed files with 145 additions and 109 deletions.
diff --git a/Gemfile b/Gemfile
@@ -58,12 +58,6 @@ gem 'rgeo-geojson'
 # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
 # gem "image_processing", "~> 1.2"
 
-# gem 'dartsass-rails'
-# gem 'dartsass-rails', '~> 0.5.0'
-gem 'sassc-rails'
-gem 'bootstrap', '~> 5.3.2'
-
-
 # https://github.com/BrandonShar/inertia-rails-template/blob/main/Gemfile
 gem 'vite_rails'
 

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -82,8 +82,6 @@ GEM
       activerecord (>= 3.2, < 8.0)
       rake (>= 10.4, < 14.0)
     ast (2.4.2)
-    autoprefixer-rails (10.4.16.0)
-      execjs (~> 2)
     awrence (1.2.1)
     base64 (0.2.0)
     better_errors (2.10.1)
@@ -97,9 +95,6 @@ GEM
       debug_inspector (>= 1.2.0)
     bootsnap (1.18.3)
       msgpack (~> 1.2)
-    bootstrap (5.3.3)
-      autoprefixer-rails (>= 9.1.0)
-      popper_js (>= 2.11.8, < 3)
     builder (3.2.4)
     capybara (3.40.0)
       addressable
@@ -132,7 +127,6 @@ GEM
     drb (2.2.1)
     dry-cli (1.0.0)
     erubi (1.12.0)
-    execjs (2.9.1)
     factory_bot (6.4.6)
       activesupport (>= 5.0.0)
     factory_bot_rails (6.4.3)
@@ -253,7 +247,6 @@ GEM
     parser (3.3.1.0)
       ast (~> 2.4.1)
       racc
-    popper_js (2.11.8)
     prism (0.29.0)
     pry (0.14.2)
       coderay (~> 1.1)
@@ -371,14 +364,6 @@ GEM
     rubyzip (2.3.2)
     safety_net_attestation (0.4.0)
       jwt (~> 2.0)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     scout_apm (5.3.8)
       parser
     selenium-webdriver (4.21.1)
@@ -428,7 +413,6 @@ GEM
       thor (>= 1.2.0)
       yard-sorbet
     thor (1.3.1)
-    tilt (2.3.0)
     timeout (0.4.1)
     tpm-key_attestation (0.12.0)
       bindata (~> 2.4)
@@ -494,7 +478,6 @@ DEPENDENCIES
   better_errors
   binding_of_caller
   bootsnap
-  bootstrap (~> 5.3.2)
   capybara
   concurrent-ruby
   debug
@@ -517,7 +500,6 @@ DEPENDENCIES
   rspec-rails (~> 6)
   rspec-sorbet
   rubocop
-  sassc-rails
   scout_apm
   selenium-webdriver
   shortener

diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */
diff --git a/app/frontend/components/NoAuthLayout.tsx b/app/frontend/components/NoAuthLayout.tsx
@@ -6,7 +6,7 @@ const NoAuthLayout: React.FC<PropsWithChildren & { isBubbles?: boolean }> = ({ c
     return (
         <LoginBubbles title={""} isBubbles={isBubbles}>
             <div>
-                <div className="row pb-2">
+                <div className="row pb-2 mt-5 pt-5">
                     <div className="col text-center">
                         <SwayLogo />
                     </div>

diff --git a/app/frontend/entrypoints/application.tsx b/app/frontend/entrypoints/application.tsx
@@ -15,12 +15,7 @@ import { Toaster } from "react-hot-toast";
 import { Provider } from "react-redux";
 import { logDev } from "../sway_utils";
 
-// const RECAPTCHA__SCRIPT_PROPS = {
-//     async: true, // optional, default to false,
-//     defer: false, // optional, default to false
-//     appendTo: "head", // optional, default to "head", can be "head" or "body",
-//     nonce: undefined, // optional, default undefined
-// } as const;
+import "app/frontend/styles";
 
 const NO_AUTH_LAYOUTS = ["home", "registration"];
 
@@ -61,19 +56,12 @@ document.addEventListener("DOMContentLoaded", () => {
             Sentry.then(({ ErrorBoundary }) => {
                 createRoot(el!).render(
                     <ErrorBoundary onError={onRenderError} fallback={<RenderErrorHandler />}>
-                        {/* <GoogleReCaptchaProvider
-                            reCaptchaKey={import.meta.env.VITE_GOOGLE_RECAPTCHA_SITE_KEY}
-                            language="en"
-                            useEnterprise={true}
-                            scriptProps={RECAPTCHA__SCRIPT_PROPS}
-                        > */}
                         <StrictMode>
                             <Provider store={store(props.initialPage.props)}>
                                 <App {...props} />
                                 <Toaster />
                             </Provider>
                         </StrictMode>
-                        {/* </GoogleReCaptchaProvider> */}
                     </ErrorBoundary>,
                 );
             });

diff --git a/app/frontend/pages/Passkey.tsx b/app/frontend/pages/Passkey.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from "react-redux";
 import { sway } from "sway";
 
 import { setUser } from "app/frontend/redux/actions/userActions";
-import { handleError, logDev, notify } from "app/frontend/sway_utils";
+import { logDev, notify } from "app/frontend/sway_utils";
 import { PHONE_INPUT_TRANSFORMER, isValidPhoneNumber } from "app/frontend/sway_utils/phone";
 import { ErrorMessage, Field, FieldAttributes, Form, Formik, FormikProps } from "formik";
 import { Form as BootstrapForm, Button } from "react-bootstrap";
@@ -14,7 +14,6 @@ import { useSendPhoneVerification } from "app/frontend/hooks/authentication/phon
 import { useWebAuthnAuthentication } from "app/frontend/hooks/authentication/useWebAuthnAuthentication";
 import { AxiosError } from "axios";
 import { Animate } from "react-simple-animate";
-import Turnstile, { useTurnstile } from "react-turnstile";
 import * as yup from "yup";
 
 interface ISigninValues {
@@ -42,33 +41,6 @@ const Passkey: React.FC = () => {
 
     const dispatch = useDispatch();
 
-    const turnstile = useTurnstile();
-    const [turnstileVerified, setTurnstileVerified] = useState<boolean>(false);
-    const handleTurnstileVerify = useCallback(
-        (token: string) => {
-            fetch("https://turnstile.sway.vote", {
-                method: "POST",
-                body: JSON.stringify({ token }),
-                headers: {
-                    "Content-Type": "application/json",
-                },
-            })
-                .then((res) => res.json())
-                .then((j) => {
-                    setTurnstileVerified(j.success);
-                    if (!j.success) {
-                        setTurnstileVerified(false);
-                        handleError(new Error(j.message));
-                    }
-                })
-                .catch((e) => {
-                    console.error(e);
-                    turnstile.reset();
-                });
-        },
-        [turnstile],
-    );
-
     const onAuthenticated = useCallback(
         (user: sway.IUser) => {
             if (!user) return;
@@ -103,8 +75,6 @@ const Passkey: React.FC = () => {
 
     const handleSubmit = useCallback(
         async ({ phone, code }: { phone: string; code?: string }) => {
-            if (!turnstileVerified) return;
-
             if (code && isConfirmingPhone) {
                 confirmPhoneVerification(phone, code);
             } else {
@@ -136,14 +106,7 @@ const Passkey: React.FC = () => {
                     });
             }
         },
-        [
-            turnstileVerified,
-            isConfirmingPhone,
-            confirmPhoneVerification,
-            startAuthentication,
-            verifyAuthentication,
-            sendPhoneVerification,
-        ],
+        [isConfirmingPhone, confirmPhoneVerification, startAuthentication, verifyAuthentication, sendPhoneVerification],
     );
 
     const handleCancel = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
@@ -182,17 +145,6 @@ const Passkey: React.FC = () => {
                                             </Field>
                                         </BootstrapForm.Group>
                                         <ErrorMessage name={"phone"} className="bold white" />
-
-                                        <div className="my-2">
-                                            <Turnstile
-                                                appearance="always"
-                                                theme="light"
-                                                action="passkey-phone"
-                                                // sitekey={"3x00000000000000000000FF"}
-                                                sitekey={import.meta.env.VITE_CLOUDFLARE_TURNSTILE_SITE_KEY}
-                                                onVerify={handleTurnstileVerify}
-                                            />
-                                        </div>
                                     </div>
                                 </div>
                                 <Animate
@@ -240,12 +192,7 @@ const Passkey: React.FC = () => {
                                         </Animate>
                                     </div>
                                     <div className="col">
-                                        <Button
-                                            className="w-100"
-                                            variant="primary"
-                                            type="submit"
-                                            disabled={isLoading || !turnstileVerified}
-                                        >
+                                        <Button className="w-100" variant="primary" type="submit" disabled={isLoading}>
                                             Submit
                                         </Button>
                                     </div>

diff --git a/app/assets/stylesheets/application.scss → app/frontend/styles/application.scss b/app/assets/stylesheets/application.scss → app/frontend/styles/application.scss
diff --git a/app/frontend/styles/index.ts b/app/frontend/styles/index.ts
@@ -0,0 +1 @@
+import "./application.scss";
diff --git a/app/assets/stylesheets/scss/_constants.scss → app/frontend/styles/scss/_constants.scss b/app/assets/stylesheets/scss/_constants.scss → app/frontend/styles/scss/_constants.scss
diff --git a/app/assets/stylesheets/scss/charts.scss → app/frontend/styles/scss/charts.scss b/app/assets/stylesheets/scss/charts.scss → app/frontend/styles/scss/charts.scss
diff --git a/app/assets/stylesheets/scss/confetti.scss → app/frontend/styles/scss/confetti.scss b/app/assets/stylesheets/scss/confetti.scss → app/frontend/styles/scss/confetti.scss
diff --git a/app/assets/stylesheets/scss/login.scss → app/frontend/styles/scss/login.scss b/app/assets/stylesheets/scss/login.scss → app/frontend/styles/scss/login.scss
diff --git a/app/assets/stylesheets/scss/main.scss → app/frontend/styles/scss/main.scss b/app/assets/stylesheets/scss/main.scss → app/frontend/styles/scss/main.scss
diff --git a/app/assets/stylesheets/scss/recaptcha.scss → app/frontend/styles/scss/recaptcha.scss b/app/assets/stylesheets/scss/recaptcha.scss → app/frontend/styles/scss/recaptcha.scss
diff --git a/app/assets/stylesheets/scss/striped.scss → app/frontend/styles/scss/striped.scss b/app/assets/stylesheets/scss/striped.scss → app/frontend/styles/scss/striped.scss
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -4,11 +4,9 @@
     <title>Sway</title>
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <link rel="manifest" href="manifest.json" />
+
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
-    
-    <%= stylesheet_link_tag "application", "data-turbo-track": "reload", nonce: true  %>
-    <%# <%= stylesheet_link_tag "scss/recaptcha", "data-turbo-track": "reload", nonce: true if @current_user  %>
 
     <%= vite_client_tag nonce: true  %>
     <%= vite_react_refresh_tag nonce: true  %>

diff --git a/config/environments/development.rb b/config/environments/development.rb
@@ -82,11 +82,8 @@
 
   # https://dev.to/thomasvanholder/how-to-set-up-rails-hotwire-live-reload-38i9
   config.hotwire_livereload.listen_paths << Rails.root.join('app/assets/stylesheets')
-  config.hotwire_livereload.listen_paths << Rails.root.join('app/assets/stylesheets/scss')
-
   config.hotwire_livereload.listen_paths << Rails.root.join('app/controllers')
 
   config.hotwire_livereload.force_reload_paths << Rails.root.join('app/assets/stylesheets')
-  config.hotwire_livereload.force_reload_paths << Rails.root.join('app/assets/stylesheets/scss')
   config.hotwire_livereload.force_reload_paths << Rails.root.join('app/controllers')
 end