+login +color input and view

package.json

@@ -30,6 +30,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "proxy": "http://mo.ed.asmer.org.ua/"
+  }
 }

src/App.js

@@ -8,7 +8,12 @@ import { GraphQLClient } from 'graphql-request';
 
 import createModels2 from './front-models'
 
-let gql = new GraphQLClient("/graphql", {headers: localStorage.authToken ? {Authorization: 'Bearer '+localStorage.authToken} : {}})
+let gql;
+
+const getGQL = () => new GraphQLClient(localStorage.url + 'graphql', {headers: localStorage.authToken ? {Authorization: 'Bearer '+localStorage.authToken} : {}})
+if (localStorage.authToken && localStorage.url){
+    gql = getGQL()
+}
 
 const ShortName = ({record, options}) => { 
     if (record && record.constructor)
@@ -349,10 +354,10 @@ const defaultAdminOptions =
             fields:{
                 createdAt: ({children}) => <>{new Date(+children).toISOString()}</> ,
                 url: ({children}) => <a href={children}>{children}</a>,
-                color:(props) => <input type='color' {...props}/>
+                color:(props) => <span style={{backgroundColor: props.value}}>{props.value}</span>
             },
             relations: {
-                Image: ({children}) => <span className="ImageRelation"><img  src={children.url}/>{children.originalFileName}</span>
+                Image: ({children}) => <span className="ImageRelation"><img src={localStorage.url + children.url}/>{children.originalFileName}</span>
             },
             models: {
 
@@ -395,7 +400,8 @@ const defaultAdminOptions =
             },
             fields:{
                 createdAt: ({children}) => <input value={new Date(+children).toISOString()} />,
-                url: ({children}) => <a href={children}>{children}</a> 
+                url: ({children}) => <a href={children}>{children}</a>,
+                color:({children, ...props}) => <input type='color' value={children} {...props}/>
             },
             
             models: {
@@ -423,6 +429,22 @@ const Admin = ({models, components:{ModelList:ML=ModelList, Search:S=Search, Mod
     )
 }
 
+const LoginForm = ({onLogin}) => {
+    const [url, setUrl] = useState(localStorage.url)
+    const [login, setLogin] = useState('')
+    const [password, setPassword] = useState('')
+    return ( 
+        <>
+            <input placeholder="url" value={url} onChange={e => setUrl(e.target.value)}/>
+            <input placeholder='login' value={login} onChange={e => setLogin(e.target.value)}/>
+            <input type='password' placeholder='password' value={password} onChange={e => setPassword(e.target.value)}/>
+            <button onClick={() => {
+                onLogin({url, login, password})
+            }}>Login</button>
+        </>
+    )
+}
+
 
 function App() {
     let [models, setModels] = useState()
@@ -431,9 +453,26 @@ function App() {
     const classes = models
 
     return (
-        <div className="App">
-            {models && <Admin models={models} />}
-        </div>
+        <>
+            <LoginForm onLogin={async ({url, login, password}) => {
+                let gql = new GraphQLClient(url + 'graphql')
+                let token = await gql.request(`query login ($login: String, $password: String){
+                    login(login: $login, password: $password)
+                }`, {login, password})
+                if (token.login){
+                    localStorage.authToken = token.login
+                    localStorage.url = url
+                }
+                else {
+                    localStorage.removeItem('authToken')
+                }
+                gql = getGQL()
+                createModels2(gql).then(models => setModels(models))
+            }}/>
+            <div className="App">
+                {models && <Admin models={models} />}
+            </div>
+        </>
     );
 }
 

src/front-models.js

@@ -1,5 +1,6 @@
 
 export default async function createModels2(gql, config={create: 'Upsert', update: 'Upsert', delete: "Delete",  findOne: "FindOne", find: 'Find', count: 'Count'}){
+    if (!gql) return;
     const universeQuery = `query universe{
   __schema{
      types {