WIP Settings

src/Settings.res

@@ -1,116 +1,159 @@
 @react.component
 let make = () => {
 
-  module Form = {
+  module Proto = {
-    type proto = HTTP | HTTPS;
+    type t = HTTP | HTTPS
-    type urlStyle =  VHOST | PATH;
+    let default = HTTPS
 
-    type t = {
+    let make = str => switch(str) {
-      protocol: option<proto>,
+      | "http" => HTTP
-      endpoint: option<string>,
+      | _ => default
-      url: option<urlStyle>,
+    }
-      region: option<string>,
+    let make2 = mayStr => switch(mayStr) {
-      keyId: option<string>,
+      | Some(str) => make(str)
-      secretKey: option<string>,
+      | None => default
     }
 
-    type e = 
+    let toStr = p => switch(p) {
-    | UndefinedParameter
+      | HTTP => "http"
-    
+      | HTTPS => "https"
+    }
+    let isTls = p => p == HTTPS
+  }
 
-    let make = () => { protocol: None, endpoint: None, url: None, region: None, keyId: None, secretKey: None }
+  module UrlStyle = {
+    type t = VHOST | PATH
+    let default = PATH
 
-    let _build_unsafe = f => {
+    let make = str => switch(str) {
-      open Belt.Option
+      | "vhost" => VHOST
+      | _ => default
+    }
+    let make2 = mayStr => switch(mayStr) {
+      | Some(str) => make(str)
+      | None => default
+    }
 
+    let toStr = u => switch(u) {
+      | PATH => "path"
+      | VHOST => "vhost"
+    }
+    let isPathStyle = u => u == PATH
+  }
+
+  module LocalKV = {
+    open Dom
+    let get = (key) => Storage2.localStorage -> Storage2.getItem(key) 
+    let set = (key, value) => Storage2.localStorage -> Storage2.setItem(key, value)
+  }
+
+  module Config = {
+    open Belt
+
+    type t = {
+      protocol: Proto.t,
+      url: UrlStyle.t,
+      endpoint: string,
+      region: string,
+      keyId: string,
+      secretKey: string,
+    }
+
+    let make = () => { 
+      protocol: "conf_protocol" -> LocalKV.get -> Proto.make2,
+      url: "conf_url" -> LocalKV.get -> UrlStyle.make2, 
+      endpoint: "conf_endpoint" -> LocalKV.get -> Option.getWithDefault("garage.deuxfleurs.fr"), 
+      region: "conf_region" -> LocalKV.get -> Option.getWithDefault("garage"), 
+      keyId: "conf_keyid" -> LocalKV.get -> Option.getWithDefault(""), 
+      secretKey: "conf_secretkey" -> LocalKV.get -> Option.getWithDefault(""),
+    }
+
+    let build = c => {
       {
         S3.endpoint: Some({ 
-          protocol: switch(f.protocol -> getExn) { | HTTP => "http" | _ => "https" }, 
+          protocol: c.protocol -> Proto.toStr, 
-	        hostname: f.endpoint -> getExn, 
+	        hostname: c.endpoint, 
 	        path: "/" 
         }),
         credentials: Some({ 
-	        accessKeyId: f.keyId -> getExn, 
+	        accessKeyId: c.keyId, 
-	        secretAccessKey: f.secretKey -> getExn,
+	        secretAccessKey: c.secretKey,
         }),
-        tls: Some((f.protocol -> getExn) == HTTPS),
+        tls: Some(c.protocol -> Proto.isTls),
-        forcePathStyle: Some((f.url -> getExn) == PATH),
+        forcePathStyle: Some(c.url -> UrlStyle.isPathStyle),
-        region: Some(f.region -> getExn),
+        region: Some(c.region),
-      }
-    }
-
-    let build: t => Belt.Result.t<S3.config, e> = f => {
-      switch(f -> _build_unsafe) {
-      | config => Ok(config)
-      | exception Not_found => Error(UndefinedParameter)
       }
     }
   }
 
-  let (form, updateForm) = React.useState(_ => Form.make());
+  let (config, updateConfig) = React.useState(_ => Config.make());
 
   let login = _ => {
-    Js.log(form -> Form.build)
+    Js.log(config -> Config.build)
   }
 
   let setProtocol = evt => {
-    let value = switch (ReactEvent.Form.target(evt)["value"]) {
+    let value = ReactEvent.Form.target(evt)["value"] -> Proto.make
-    | "http" => Form.HTTP
+    updateConfig(c => {...c, protocol: value})
-    | _ => Form.HTTPS
-    }
-    updateForm(form => {...form, protocol: Some(value)})
   }
 
   let setEndpoint = evt => {
     let value = (ReactEvent.Form.target(evt)["value"])
-    updateForm(form => {...form, endpoint: Some(value) })
+    updateConfig(c => {...c, endpoint: value })
   }
 
-  let setRegion = _ => ()
+  let setRegion = evt => {
+    let value = (ReactEvent.Form.target(evt)["value"])
+    updateConfig(c => {...c, region: value })
+  }
 
   let setUrlStyle = evt => {
-    let value = switch (ReactEvent.Form.target(evt)["value"]) {
+    let value = ReactEvent.Form.target(evt)["value"] -> UrlStyle.make
-    | "path" => Form.PATH
+    updateConfig(c => {...c, url: value })
-    | _ => Form.VHOST
-    }
-    updateForm(form => {...form, url: Some(value)})
   }
 
-  let setKeyId = _ => ()
+  let setKeyId = evt => {
-  let setSecretKey = _ => ()
+    let value = (ReactEvent.Form.target(evt)["value"])
+    updateConfig(c => {...c, keyId: value })
+  }
+    
+  let setSecretKey = evt => {
+    let value = (ReactEvent.Form.target(evt)["value"])
+    updateConfig(c => {...c, secretKey: value })
+  }
 
   <section className="menu">
     <div className="menu-title">{ "Configuration"->React.string }</div>
     <form>
       <fieldset>
         <legend> { `Réseau` -> React.string } </legend>
-	<div className="group">
+	      <div className="group">
-          <select name="protocol" onChange={setProtocol}>
+          <select name="protocol" onChange={setProtocol} value={config.protocol -> Proto.toStr}>
             <option value="https">{ "https://"->React.string }</option>
             <option value="http">{ "http://"->React.string }</option>
           </select>
-          <input name="endpoint" type_="text" placeholder="garage.example.tld" onChange={setEndpoint} />
+          <input name="endpoint" type_="text" placeholder="garage.example.tld" onChange={setEndpoint} value={config.endpoint} />
-	</div>
+   	    </div>
-	<div className="group">
+	      <div className="group">
-          <input name="region" type_="text" placeholder="garage" onChange={setRegion} />
+          <input name="region" type_="text" placeholder="garage" onChange={setRegion} value={config.region} />
-	  <select name="urlStyle" onChange={setUrlStyle} >
+	        <select name="urlStyle" onChange={setUrlStyle} value={config.url -> UrlStyle.toStr}>
-	    <option value="path">{ "chemin"->React.string }</option>
+	          <option value="path">{ "chemin"->React.string }</option>
-	    <option value="vhost">{ `hôte`->React.string }</option>
+	          <option value="vhost">{ `hôte`->React.string }</option>
-	  </select>
+	        </select>
-	</div>
+	      </div>
       </fieldset>
 
       <fieldset>
         <legend> { "Authentification"->React.string }</legend>
-	<div className="group">
+	      <div className="group">
-          <input name="keyId" type_="text" placeholder="GKxxx" onChange={setKeyId}/>
+          <input name="keyId" type_="text" placeholder="GKxxx" onChange={setKeyId} value={config.keyId} />
-	</div>
+	      </div>
-	<div className="group">
+	      <div className="group">
-          <input name="secretKey" type_="password" placeholder="************" onChange={setSecretKey} />
+          <input name="secretKey" type_="password" placeholder="************" onChange={setSecretKey} value={config.secretKey} />
-	</div>
+	      </div>
       </fieldset>
 
-      <input className="primary" type_="button" onClick={login} />
+      <input className="primary" type_="button" onClick={login} value="Valider"/>
     </form>
   </section>
 }