support facebook social login

hichina-admin-backend/src/main/java/com/hichina/admin/hichinaadminbackend/config/MyWebSecurityConfiguration.java

@@ -9,10 +9,6 @@ import org.springframework.security.config.annotation.authentication.builders.Au
 import org.springframework.security.config.annotation.web.builders.HttpSecurity;
 import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
 import org.springframework.security.config.annotation.web.configuration.WebSecurityCustomizer;
-import org.springframework.security.core.userdetails.User;
-import org.springframework.security.core.userdetails.UserDetails;
-import org.springframework.security.core.userdetails.UserDetailsService;
-import org.springframework.security.provisioning.InMemoryUserDetailsManager;
 import org.springframework.security.web.SecurityFilterChain;
 import org.springframework.security.web.authentication.AuthenticationFailureHandler;
 import org.springframework.security.web.authentication.logout.LogoutSuccessHandler;

hichina-main-back/build.gradle

@@ -62,8 +62,6 @@ dependencies {
 	implementation 'com.alibaba.fastjson2:fastjson2:2.0.29'
     // https://mvnrepository.com/artifact/org.jsoup/jsoup
 	implementation 'org.jsoup:jsoup:1.16.1'
-	// https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-oauth2-client
-	implementation 'org.springframework.boot:spring-boot-starter-oauth2-client:3.0.6'
 }
 
 tasks.named('test') {

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/config/CorsConfig.java

@@ -0,0 +1,24 @@
+package com.hichina.main.back.hichinamainback.config;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.core.env.Environment;
+import org.springframework.web.servlet.config.annotation.CorsRegistry;
+import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
+
+@Configuration
+public class CorsConfig implements WebMvcConfigurer {
+
+    @Autowired
+    private Environment env;
+
+    @Override
+    public void addCorsMappings(CorsRegistry registry) {
+        registry.addMapping("/**")
+                .allowedOrigins(env.getProperty("frontend.url"), "https://www.facebook.com")
+                .allowedMethods("GET", "POST", "PUT", "PATCH", "DELETE", "OPTIONS")
+                .allowedHeaders("*")
+                .allowCredentials(true)
+                .maxAge(3600);
+    }
+}

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/config/FacebookAuthProvider.java

@@ -0,0 +1,75 @@
+package com.hichina.main.back.hichinamainback.config;
+
+import com.hichina.main.back.hichinamainback.mapper.UserMapper;
+import com.hichina.main.back.hichinamainback.model.User;
+import com.hichina.main.back.hichinamainback.utils.FacebookAccessTokenValidator;
+import com.hichina.main.back.hichinamainback.utils.UserUtil;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.authentication.AuthenticationProvider;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.stereotype.Component;
+
+import java.util.ArrayList;
+import java.util.Date;
+
+@Component
+public class FacebookAuthProvider implements AuthenticationProvider {
+    @Autowired
+    private UserMapper userMapper;
+
+    @Autowired
+    private FacebookAccessTokenValidator facebookAccessTokenValidator;
+
+    private User generateOrUpdateUser(String fbId, String name, String email, String profileImageUrl){
+        User user = UserUtil.getUserByEmail(userMapper, email);
+        if(user==null){
+            //register new user
+            user = new User();
+            user.setCreatedTime(new Date());
+            user.setSalt(CustomAuthenticationProvider.generateSalt());
+            user.setUsername(name);
+            user.setEmail(email);
+            user.setFacebookId(fbId);
+            user.setProfileImageUrl(profileImageUrl);
+            user.setPwdCode(-1);
+            user.setUserId(java.util.UUID.randomUUID().toString());
+            userMapper.insert(user);
+        }else{
+            // update user with facebook info
+            user.setFacebookId(fbId);
+            user.setUsername(name);
+            user.setProfileImageUrl(profileImageUrl);
+            userMapper.update(user);
+        }
+        return user;
+    }
+
+    @Override
+    public Authentication authenticate(Authentication authentication)
+            throws AuthenticationException {
+        String idNameEmailCombo = authentication.getName();
+        String accessToken = authentication.getCredentials().toString();
+
+        boolean authed = facebookAccessTokenValidator.validateAccessToken(accessToken);
+        if(!authed){
+            return null;
+        }
+        String[] arrs = idNameEmailCombo.split(",");
+        if(arrs.length!=4){
+            return null;
+        }
+        String fbId = arrs[0];
+        String name = arrs[1];
+        String email = arrs[2];
+        String profileImageUrl = arrs[3];
+        User user = generateOrUpdateUser(fbId, name, email, profileImageUrl);
+        return new UsernamePasswordAuthenticationToken(user.getUsername()+"["+user.getEmail()+"]", accessToken, new ArrayList<>());
+    }
+
+    @Override
+    public boolean supports(Class<?> authentication) {
+        return authentication.equals(UsernamePasswordAuthenticationToken.class);
+    }
+}

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/config/MyWebSecurityConfiguration.java

@@ -26,11 +26,15 @@ public class MyWebSecurityConfiguration {
     @Autowired
     private CustomAuthenticationProvider authProvider;
 
+    @Autowired
+    private FacebookAuthProvider facebookAuthProvider;
+
     @Bean
     public AuthenticationManager authManager(HttpSecurity http) throws Exception {
         AuthenticationManagerBuilder authenticationManagerBuilder =
                 http.getSharedObject(AuthenticationManagerBuilder.class);
         authenticationManagerBuilder.authenticationProvider(authProvider);
+        authenticationManagerBuilder.authenticationProvider(facebookAuthProvider);
         return authenticationManagerBuilder.build();
     }
 

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/config/RequestFilter.java

@@ -1,78 +0,0 @@
-package com.hichina.main.back.hichinamainback.config;
-
-import jakarta.servlet.*;
-import jakarta.servlet.http.HttpServletRequest;
-import jakarta.servlet.http.HttpServletResponse;
-import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.core.Ordered;
-import org.springframework.core.annotation.Order;
-import org.springframework.core.env.Environment;
-import org.springframework.stereotype.Component;
-
-import java.io.IOException;
-
-/**
- * Servlet Filter implementation class CORSFilter
- */
-// Enable it for Servlet 3.x implementations
-/* @ WebFilter(asyncSupported = true, urlPatterns = { "/*" }) */
-@Component
-@Order(Ordered.HIGHEST_PRECEDENCE)
-public class RequestFilter implements Filter {
-
-    @Autowired
-    private Environment env;
-
-    /**
-     * Default constructor.
-     */
-    public RequestFilter() {
-        // TODO Auto-generated constructor stub
-    }
-
-    /**
-     * @see Filter#destroy()
-     */
-    @Override
-    public void destroy() {
-        // TODO Auto-generated method stub
-    }
-
-    /**
-     * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
-     */
-    @Override
-    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain chain)
-            throws IOException, ServletException {
-
-        HttpServletRequest request = (HttpServletRequest) servletRequest;
-        System.out.println("CORSFilter HTTP Request: " + request.getMethod());
-
-        // Authorize (allow) all domains to consume the content
-        ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Origin", env.getProperty("frontend.url"));
-        ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Methods","GET, OPTIONS, HEAD, PUT, POST, DELETE");
-        ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Headers","authorization, Access-Control-Allow-Origin, content-type, hash-referer,  x-auth-token, cache-control, " +
-                "access-control-request-headers,access-control-request-method,accept,origin,authorization,x-requested-with");
-        ((HttpServletResponse) servletResponse).addHeader("Access-Control-Allow-Credentials","true");
-        ((HttpServletResponse) servletResponse).addHeader("Access-Control-Expose-Headers","Access-Control-Allow-Origin");
-        HttpServletResponse resp = (HttpServletResponse) servletResponse;
-
-        // For HTTP OPTIONS verb/method reply with ACCEPTED status code -- per CORS handshake
-        if (request.getMethod().equals("OPTIONS")) {
-            resp.setStatus(HttpServletResponse.SC_ACCEPTED);
-            return;
-        }
-
-        // pass the request along the filter chain
-        chain.doFilter(request, servletResponse);
-    }
-
-    /**
-     * @see Filter#init(FilterConfig)
-     */
-    @Override
-    public void init(FilterConfig fConfig) throws ServletException {
-        // TODO Auto-generated method stub
-    }
-
-}

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/controller/DemoController.java

@@ -2,10 +2,15 @@ package com.hichina.main.back.hichinamainback.controller;
 
 import com.hichina.main.back.hichinamainback.utils.RedisUtil;
 import com.hichina.main.back.hichinamainback.utils.WxPayUtil;
+import jakarta.servlet.http.Cookie;
+import jakarta.servlet.http.HttpServletRequest;
+import jakarta.servlet.http.HttpServletResponse;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.context.request.RequestContextHolder;
+import org.springframework.web.context.request.ServletRequestAttributes;
 
 import java.io.IOException;
 
@@ -18,12 +23,24 @@ public class DemoController {
     @Autowired
     private WxPayUtil wxPayUtil;
 
-    @GetMapping
+
+
+    @GetMapping("/showme")
     public String trySomething() throws IOException {
 //        String ve = wxPayUtil.test();
 
 //        return ve;
-        return "";
+        return "f*ck";
+    }
+    @GetMapping("/setCookie")
+    public String setCookie() {
+        HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getRequest();
+        HttpServletResponse response = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes()).getResponse();
+
+        Cookie cookie = new Cookie("myCookie", "cookieValue");
+        cookie.setMaxAge(3600); // Set the cookie expiration time in seconds
+        response.addCookie(cookie);
+        return "Cookie set successfully";
     }
 
 }

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/utils/FacebookAccessTokenValidator.java

@@ -0,0 +1,79 @@
+package com.hichina.main.back.hichinamainback.utils;
+
+import com.google.gson.JsonObject;
+import com.google.gson.JsonParser;
+import org.apache.http.client.methods.HttpGet;
+import org.apache.http.client.protocol.HttpClientContext;
+import org.apache.http.config.Registry;
+import org.apache.http.config.RegistryBuilder;
+import org.apache.http.conn.socket.ConnectionSocketFactory;
+import org.apache.http.conn.socket.PlainConnectionSocketFactory;
+import org.apache.http.conn.ssl.SSLConnectionSocketFactory;
+import org.apache.http.impl.client.CloseableHttpClient;
+import org.apache.http.impl.client.HttpClients;
+import org.apache.http.impl.conn.PoolingHttpClientConnectionManager;
+import org.apache.http.protocol.HttpContext;
+import org.apache.http.ssl.SSLContexts;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.core.env.Environment;
+import org.springframework.stereotype.Component;
+import java.io.IOException;
+import java.io.InputStreamReader;
+import java.net.InetSocketAddress;
+import java.net.Proxy;
+import java.net.Socket;
+import java.net.SocketAddress;
+
+@Component
+public class FacebookAccessTokenValidator {
+    private static final String GRAPH_API_URL = "https://graph.facebook.com/v14.0/me?access_token=";
+
+    @Autowired
+    private Environment env;
+
+    public boolean validateAccessToken(String accessToken) {
+        Registry<ConnectionSocketFactory> reg = RegistryBuilder.<ConnectionSocketFactory>create()
+                .register("http", new MyConnectionSocketFactory())
+                .register("https",new MySSLConnectionSocketFactory()).build();
+        PoolingHttpClientConnectionManager connManager = new PoolingHttpClientConnectionManager(reg);
+        CloseableHttpClient httpClient = HttpClients.custom()
+                .setConnectionManager(connManager)
+                .build();
+        SocketAddress socketAddress = new InetSocketAddress("127.0.0.1", Integer.parseInt(env.getProperty("gfw.proxy.port")));
+        HttpClientContext context = HttpClientContext.create();
+        context.setAttribute("socks.address", socketAddress);
+        HttpGet httpGet = new HttpGet(GRAPH_API_URL + accessToken);
+        try {
+            JsonObject response = httpClient.execute(httpGet, httpResponse -> {
+                JsonParser jsonParser = new JsonParser();
+                InputStreamReader reader = new InputStreamReader(httpResponse.getEntity().getContent());
+                return jsonParser.parse(reader).getAsJsonObject();
+            }, context);
+            return response.has("id");
+        } catch (Exception e) {
+            e.printStackTrace();
+            return false;
+        }
+    }
+
+    static class MyConnectionSocketFactory extends PlainConnectionSocketFactory {
+        @Override
+        public Socket createSocket(final HttpContext context) throws IOException {
+            InetSocketAddress socksaddr = (InetSocketAddress) context.getAttribute("socks.address");
+            // socket代理
+            Proxy proxy = new Proxy(Proxy.Type.SOCKS, socksaddr);
+            return new Socket(proxy);
+        }
+    }
+    static class MySSLConnectionSocketFactory extends SSLConnectionSocketFactory {
+        public MySSLConnectionSocketFactory() {
+            super(SSLContexts.createDefault(), getDefaultHostnameVerifier());
+        }
+        @Override
+        public Socket createSocket(final HttpContext context) throws IOException {
+            InetSocketAddress socksaddr = (InetSocketAddress) context.getAttribute("socks.address");
+            Proxy proxy = new Proxy(Proxy.Type.SOCKS, socksaddr);
+            return new Socket(proxy);
+        }
+    }
+}

hichina-main-back/src/main/java/com/hichina/main/back/hichinamainback/utils/UserUtil.java

@@ -25,4 +25,13 @@ public class UserUtil {
             return users.get(0);
         }
     }
+
+    public static User getUserByEmail(UserMapper userMapper, String email){
+        List<User> users = userMapper.findByUsernameOrEmail(email);
+        if(users.isEmpty()){
+            return null;
+        }else{
+            return users.get(0);
+        }
+    }
 }

hichina-main-back/src/main/resources/application-dev.properties

@@ -60,4 +60,6 @@ spring.data.redis.lettuce.pool.max-wait=-1ms
 
 hichina.email.sender=register@hichinatrip.com
 hichina.email.authcode=**
-hichina.mail.host=smtp.qiye.aliyun.com
+hichina.mail.host=smtp.qiye.aliyun.com
+
+gfw.proxy.port=1082

hichina-main-front/src/assets/svg/facebook-round.svg

@@ -0,0 +1 @@
+<svg height="64" viewBox="0 0 64 64" width="64" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="32" cy="32" fill="#5b68c0" r="30"/><path d="m36.0399472 19.0042432s-4.4528938-.2909084-5.5944929 3.9447403c0 0-.4133892 1.1112024-.3566378 3.8483346l-4.0888165.0118395v3.5806488l4.0888166-.0118402v14.6220338h5.2119587v-14.6101946l4.1336778.000001v-3.5924881l-4.1336778.0000002v-1.9512286c0-1.2651132.7027316-2.4749768 2.7583269-2.4749768h1.9408978v-3.3668699z" fill="#fff"/></g></svg>

hichina-main-front/src/components/Login.vue

@@ -1,5 +1,48 @@
 <template>
-    <div class="login" v-loading="loading">
+  <el-form
+    class="login-form"
+    :model="model"
+    ref="form"
+    label-position="top"
+    :rules="rules"
+    label-width="80px"
+    @submit.native.prevent="login"
+  >
+    <h2>Login</h2>
+    <br />
+    <el-form-item prop="username">
+      <el-input
+        v-model="model.username"
+        prefix-icon="user"
+        placeholder="Enter your username"
+      ></el-input>
+    </el-form-item>
+    <el-form-item prop="password">
+      <el-input
+        v-model="model.password"
+        prefix-icon="lock"
+        type="password"
+        placeholder="Enter your password"
+      ></el-input>
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" native-type="submit">Login</el-button>
+    </el-form-item>
+    <div class="separate-line"></div>
+    <el-form-item>
+      <el-button
+        color="#626aef"
+        @click="goToFacebookLogin"
+        class="custom-button"
+      >
+        <span class="facebook-icon"></span>
+        Login with Facebook
+      </el-button>
+    </el-form-item>
+  </el-form>
+
+  <!-- <div class="logincontainer"> -->
+  <!-- <div class="login" v-loading="loading">
       <el-card>
         <h2>Login</h2>
         <el-form
@@ -32,186 +75,245 @@
           <a class="forgot-password" href="https://oxfordinformatics.com/">Forgot password ?</a>
         </el-form>
       </el-card>
-    </div>
-  </template>
+    </div> -->
+  <!-- </div> -->
+</template>
   
   <script>
-  import {AXIOS} from '@/common/http-commons'
-  import { ElNotification } from 'element-plus'  
-  import { useRouter } from 'vue-router';
-  import Qs from "qs";
-  export default {
-    name: "login",
-    setup() {
-      const router = useRouter();
+import { AXIOS } from "@/common/http-commons";
+import { ElNotification } from "element-plus";
+import { useRouter } from "vue-router";
+import Qs from "qs";
+export default {
+  name: "login",
+  setup() {
+    const router = useRouter();
 
-      function whoami(){
-        AXIOS.get("/api/v1/user/whoami")
+    function whoami() {
+      AXIOS.get("/api/v1/user/whoami")
         .then(function (response) {
-
-          console.log("current user in setup: " + response.data)
-          router.push("/home")
+          console.log("current user in setup: " + response.data);
+          router.push("/home");
         })
         .catch(function (error) {
-          console.log("currently not logged in setup: "+error);
+          console.log("currently not logged in setup: " + error);
         });
-      }
+    }
 
-      onMounted(() => {
-        whoami();
+    function initFacebookSDK() {
+      // Load the Facebook SDK asynchronously
+      const loadFacebookSDK = new Promise((resolve) => {
+        window.fbAsyncInit = function () {
+          FB.init({
+            appId: "994181467335802",
+            autoLogAppEvents: true,
+            xfbml: true,
+            version: "v13.0",
+          });
+          resolve();
+        };
       });
 
-      return {
-      };
-    },
-    data() {
-      return {
-        validCredentials: {
-          username: "lightscope",
-          password: "lightscope"
-        },
-        model: {
-          username: "",
-          password: ""
-        },
-        loading: false,
-        rules: {
-          username: [
-            {
-              required: true,
-              message: "username should not be empty",
-              trigger: "blur"
-            },
-            {
-              min: 4,
-              message: "at least 5 characters",
-              trigger: "blur"
-            }
-          ],
-          password: [
-            { required: true, message: "Password is required", trigger: "blur" },
-            {
-              min: 5,
-              message: "Password length should be at least 5 characters",
-              trigger: "blur"
+      // Load the SDK script
+      (function (d, s, id) {
+        var js,
+          fjs = d.getElementsByTagName(s)[0];
+        console.log("js");
+        console.log(js);
+        console.log("fjs");
+        console.log(fjs);
+        if (d.getElementById(id)) {
+          return;
+        }
+        js = d.createElement(s);
+        js.id = id;
+        js.src = "https://connect.facebook.net/en_US/sdk.js";
+        fjs.parentNode.insertBefore(js, fjs);
+      })(document, "script", "facebook-jssdk");
+
+      // Wait for the SDK to be loaded
+      loadFacebookSDK.then(() => {
+        console.log("facebook sdk loaded");
+        // You can now use the Facebook SDK methods here
+        // For example, authenticate the user, fetch user data, etc.
+      });
+    }
+
+    onMounted(() => {
+      whoami();
+    });
+
+    onBeforeMount(() => {
+      initFacebookSDK();
+    });
+
+    return {};
+  },
+  data() {
+    return {
+      validCredentials: {
+        username: "lightscope",
+        password: "lightscope",
+      },
+      model: {
+        username: "",
+        password: "",
+      },
+      loading: false,
+      rules: {
+        username: [
+          {
+            required: true,
+            message: "username should not be empty",
+            trigger: "blur",
+          },
+          {
+            min: 4,
+            message: "at least 5 characters",
+            trigger: "blur",
+          },
+        ],
+        password: [
+          { required: true, message: "Password is required", trigger: "blur" },
+          {
+            min: 5,
+            message: "Password length should be at least 5 characters",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    goToFacebookLogin() {
+      FB.login(function (response) {
+        // handle the response
+        if (response.authResponse) {
+          var accessToken = response.authResponse.accessToken;
+
+          // get my info and set
+          FB.api(
+            "/me",
+            "GET",
+            { fields: "id,name,email,picture" },
+            function (response) {
+              // try login using the oauth way
+              const params = {};
+              params.accessToken = accessToken;
+              params.id = response.id;
+              params.email = response.email;
+              params.name = response.name;
+              params.profileImageUrl = response.picture.data.url;
+
+              this.loading = true;
+              var data = {
+                username: response.id+","+response.name+","+response.email+","+response.picture.data.url,
+                password: accessToken,
+                timeout: 1000,
+              };
+
+              AXIOS.post("/login", Qs.stringify(data), {
+                headers: { "Content-Type": "application/x-www-form-urlencoded" },
+              })
+                .then((response) => {
+                  this.loading = false;
+                  location.reload();
+                })
+                .catch((e) => {
+                  ElNotification({
+                    title: "Error",
+                    message: "Error message: " + e,
+                    type: "error",
+                  });
+                });
+              // AXIOS.post("/auth/social/facebook", params)
+              //   .then((response) => {
+              //     console.log("after try login facebook from facebook got:");
+              //     console.log(response);
+              //     location.reload();
+
+              //   })
+              //   .catch((e) => {
+              //     ElNotification({
+              //       title: "Error",
+              //       message: "Error message: " + e,
+              //       type: "error",
+              //     });
+              //   });
             }
-          ]
+          );
+        } else {
+          console.log("User cancelled login or did not fully authorize.");
+          ElNotification({
+            title: "Error",
+            message: "User cancelled login or did not fully authorize.",
+            type: "error",
+          });
         }
-      };
+      });
     },
-    methods: {
-      async login() {
-        this.loading = true;
-        var data = { username: this.model.username, password: this.model.password, timeout: 1000 };
-      
-        AXIOS
-        .post("/login", Qs.stringify(data), {
-          headers: { "Content-Type": "application/x-www-form-urlencoded" },
-        })
+    async login() {
+      this.loading = true;
+      var data = {
+        username: this.model.username,
+        password: this.model.password,
+        timeout: 1000,
+      };
+
+      AXIOS.post("/login", Qs.stringify(data), {
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      })
         .then((response) => {
           this.loading = false;
-           location.reload()
+          location.reload();
         })
         .catch((e) => {
           ElNotification({
-            title: 'Error',
-            message: 'Error message: '+e,
-            type: 'error',
-          })
+            title: "Error",
+            message: "Error message: " + e,
+            type: "error",
+          });
         });
-        // let valid = await this.$refs.form.validate();
-        // if (!valid) {
-        //   return;
-        // }
-        // this.loading = true;
-        // await this.simulateLogin();
-        // this.loading = false;
-        // if (
-        //   this.model.username === this.validCredentials.username &&
-        //   this.model.password === this.validCredentials.password
-        // ) {
-        //   this.$message.success("Login successfull");
-        // } else {
-        //   this.$message.error("Username or password is invalid");
-        // }
-      }
-    }
-  };
-  </script>
+      // let valid = await this.$refs.form.validate();
+      // if (!valid) {
+      //   return;
+      // }
+      // this.loading = true;
+      // await this.simulateLogin();
+      // this.loading = false;
+      // if (
+      //   this.model.username === this.validCredentials.username &&
+      //   this.model.password === this.validCredentials.password
+      // ) {
+      //   this.$message.success("Login successfull");
+      // } else {
+      //   this.$message.error("Username or password is invalid");
+      // }
+    },
+  },
+};
+</script>
   
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
-  .login {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .login-button {
-    width: 100%;
-    margin-top: 40px;
-  }
-  .login-form {
-    width: 290px;
-  }
-  .forgot-password {
-    margin-top: 10px;
-  }
-  </style>
-  <style lang="scss">
-  $teal: rgb(109, 86, 228);
-  .el-button--primary {
-    background: $teal;
-    border-color: $teal;
-  
-    &:hover,
-    &.active,
-    &:focus {
-      background: lighten($teal, 7);
-      border-color: lighten($teal, 7);
-    }
-  }
-  .login .el-input__inner:hover {
-    border-color: $teal;
-  }
-  .login .el-input__prefix {
-    background: rgb(238, 237, 234);
-    left: 0;
-    height: calc(100% - 2px);
-    left: 1px;
-    top: 1px;
-    border-radius: 3px;
-    .el-input__icon {
-      width: 30px;
-    }
-  }
-  .login .el-input input {
-    padding-left: 35px;
-  }
-  .login .el-card {
-    padding-top: 0;
-    padding-bottom: 30px;
-  }
-  h2 {
-    font-family: "Open Sans";
-    letter-spacing: 1px;
-    font-family: Roboto, sans-serif;
-    padding-bottom: 20px;
-  }
-  a {
-    color: $teal;
-    text-decoration: none;
-    &:hover,
-    &:active,
-    &:focus {
-      color: lighten($teal, 7);
-    }
-  }
-  .login .el-card {
-    width: 340px;
-    display: flex;
-    justify-content: center;
-  }
-  </style>
-  
+.login-form {
+  max-width: 300px;
+  margin: 0 auto;
+  border: 1px solid #000000;
+  padding: 10px;
+}
+.separate-line {
+  border-bottom: 1px solid #000;
+}
+.custom-button {
+  margin-top: 5px;
+}
+.custom-button .facebook-icon {
+  background-image: url("@/assets/svg/facebook-round.svg");
+  background-size: cover;
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}
+</style>

hichina-main-front/src/views/destination/index.vue

@@ -270,9 +270,7 @@ function loadDestinations() {
   (params.query = query.value),
     AXIOS.get("/api/public/destination/list", { params: params })
       .then(function (response) {
-        console.log("got list of destination:");
         destinationCards.value = response.data.data.data;
-        console.log(destinationCards.value);
         globalDestinationCards.value = globalDestinationCards.value.concat(destinationCards.value)
       })
       .catch(function (error) {

hichina-main-front/src/views/login/index.vue

@@ -5,27 +5,17 @@
 </template>
   
 <script setup>
-   import {AXIOS} from '@/common/http-commons'
    import Login from "@/components/Login";
-   const username = ref('')
-   const password = ref('')
-
-   
 </script>
   
 <style scoped lang="scss">
-    .custom-container {
-        display: flex;
-        justify-content:center;
-        align-items: left;
-        height: 50%;
-    }
     .form-center {
-          margin: auto;
-          position: absolute;
-          top: 40%;
-          left: 30%;
-          -ms-transform: translateY(-50%);
-          transform: translateY(-50%);
+          margin: 0 auto;
+          margin-top: 80px;
+        //   position: absolute;
+        //   top: 40%;
+        //   left: 30%;
+        //   -ms-transform: translateY(-50%);
+        //   transform: translateY(-50%);
     }
 </style>