Solution 1 :

Google’s log-in API already has handlers set up

The “Additional Capabilities” section has what you need.

Solution 2 :

So the thing was that instead of using display: run-in; for the login and login_success class I should have used display: flex;.

But this only seems to work on Chrome, on other browsers I get Error 400 redirect_uri_mismatch but that’s probably for another topic.

Problem :

I recently wrote a website using HTML and it uses Google’s OAuth. After a successful login, a script written in JavaScript using jQuery is supposed to hide sections with a class of “login” and display sections with class of “login_success”. Sadly after a successful login everything is getting displayed which makes the website look really messy.

Here is the HTML:

<!DOCTYPE html>
 <title>A test website</title>
 <link rel="stylesheet" type="text/css" href="css/master.css">
 <link href="" rel="stylesheet">
 <meta name="google-signin-client_id" content="token">
 <script src="" async defer></script>
 <script src=""></script>
 <script src="scripts/login.js"></script>
<header class="site-header clearfix">
  <div class="logo" id="top">
   <h1><a href="#top"><img src="images/logo.png" id="logo_image"></a></h1>
  <div class="menu login">
    <li><a href="#info">Info</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#download">Download</a></li>
    <li><button class="g-signin2" data-onsuccess="onSignIn">Login</button></li>
  <div class="menu login_success">
     <li><a href="">Blogs</a></li>
     <li><a href="#contact">Anouncments</a></li>
     <li><a href="#download">Admin</a></li>
     <li><button onclick="signOut()">Sign out</button></li>

<section class="login_success">
  <div class="data">
    <img id="profile_picture"/>
    <h1 id="name"></h1>
    <p>Email adress:</p>
    <p id="email"></p>

 <section class="login">
  <div class="leftside">
   <img src="images/preview1.png">
  <div class="rightside">
   <h1>Some header text</h1>
   <p>Some more text...</p>
   <button onclick="window.location.href='#info'">Click me!</button>


Here is the css for class “login” and “login success”:

  display: run-in;
  display: none;

Here is the login.js file:

function onSignIn(googleUser) {
  var profile=googleUser.getBasicProfile();
  $(".login_success").css("display", "run-in");


Comment posted by

Are you aware that

Comment posted by isherwood

Where is

Comment posted by isherwood

Protip: If you want to be taken seriously as a professional, take those red squiggly lines that show your spelling errors seriously.

Comment posted by GawronDev

@Turnip thanks for the answer, I wasn’t aware of that!

Comment posted by GawronDev

@isherwood it’s getting called after a successful login via Google. (line 23 in HTML)

Comment posted by isherwood

Link-only answers are not considered valuable here. Please include the relevant information in your answer.