import React from 'react'
import axios from 'axios';
import { Link } from 'react-router-dom'
import {
  CButton,
  CCard,
  CCardBody,
  CCardGroup,
  CCol,
  CContainer,
  CForm,
  CInput,
  CInputGroup,
  CInputGroupPrepend,
  CInputGroupText,
  CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'

function Sso() {

  function launchsso() {
    console.log("launch sso");
    window.open("https://fbssso.ts.bizside.biz/Shibboleth.sso/Login", "_self");
  }


  return (
    <div className="c-app c-default-layout flex-row align-items-center">
      <CContainer>
        <CRow className="justify-content-center">
          <CCol md="8">
            <CCardGroup>
              <CCard className="p-4">
                <CCardBody>
                  <CForm>
                    <h1>ログイン</h1>
                    <p className="text-muted">SSOでサインインするには、ここをクリックしてください</p>
                    <CRow>
                      <CCol>
                        <CButton color="primary" className="px-4" onClick={launchsso}>SSOでログイン</CButton>
                      </CCol>
                    </CRow>
                  </CForm>
                </CCardBody>
              </CCard>
              <CCard className="text-white bg-primary py-5 d-md-down-none" style={{ width: '44%' }}>
                <CCardBody className="text-center">
                  <div>
                    <h2>ログイン方法</h2>
                    <p>これはSSOログインを使用します。リンクをクリックすると、SSOログインページにリダイレクトされます。</p>
                  </div>
                </CCardBody>
              </CCard>
            </CCardGroup>
          </CCol>
        </CRow>
      </CContainer>
    </div>
  )
}

export default Sso